WCAG Color Contrast Wheel
Eliminate digital accessibility guesswork. Drag the interactive wheel to calculate harmonies while auditing contrast ratios against white and obsidian dark surfaces at 60fps.
Accessible UI Color Wheel Studio
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#10B77Foklch(0.690 0.148 162.2)
Split Accent 1
#B7109Boklch(0.535 0.228 337.2)
Split Accent 2
#B72C10oklch(0.513 0.179 32.8)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #10B77F | 2.59:1(Fail) | 7.39:1(AAA) | Best on Dark UI / Buttons |
Split Accent 1 | #B7109B | 5.90:1(AA) | 3.25:1(AA (large text)) | Best on Light UI / Backgrounds |
Split Accent 2 | #B72C10 | 6.21:1(AA) | 3.08:1(AA (large text)) | Best on Light UI / Backgrounds |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F5FAF8',
100: '#E7F3EF',
200: '#B4F8E2',
300: '#85F4CF',
400: '#4DEFB9',
500: '#10B77F',
600: '#11C589',
700: '#0EA06F',
800: '#0A7552',
900: '#015539',
950: '#013222',
},
secondary: '#B7109B',
accent: '#B72C10',
}
}
}
};Understanding WCAG 2.1 Contrast Standards
The Web Content Accessibility Guidelines (WCAG) define minimum relative luminance ratios to ensure digital products are legible for people with visual impairments, color blindness, or age-related vision loss.
4.5:1 Ratio
The legal baseline for web accessibility across body copy, form labels, and interactive button text under 18pt.
3.0:1 Ratio
Applies to large headings (18pt / 24px regular, or 14pt / 18.5px bold) and graphical UI components like input borders.
7.0:1 Ratio
The gold standard for medical, financial, and government software, ensuring optimal reading speed for all users.
Frequently Asked Questions
What is the difference between WCAG 2.1 AA and AAA?
Level AA requires a 4.5:1 contrast ratio for normal body copy (<18pt) and 3:1 for large text (≥18pt or ≥14pt bold). Level AAA raises this standard to 7:1 for normal body text and 4.5:1 for large text, which is especially critical for low-vision readers and elderly users.
Why do so many popular SaaS tools fail color contrast standards?
Many design teams select low-contrast placeholder text (e.g. #94a3b8 on white, which only yields a 2.6:1 ratio) or soft pastel buttons for aesthetic minimalism. UI Wheel audits both white and dark obsidian backgrounds simultaneously so you never accidentally ship illegible text.
Does UI Wheel evaluate graphical user interface components?
Yes. Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components such as active input borders, slider handles, and icon badges require a minimum 3.0:1 ratio against adjacent background surfaces.
What is the APCA algorithm and how does it compare to WCAG 2.1?
APCA (Accessible Perceptual Contrast Algorithm) is the candidate algorithm for future WCAG 3.0 standards. Unlike WCAG 2.1's simple mathematical luminance ratio, APCA accounts for spatial frequency, font weight, and polarity (dark text on light vs light text on dark).