Contrast Checker
Verify WCAG 2.1 color contrast ratios for high-performance accessible design.
Optimization
SMART ADJUSTUtilVox adjusts the luminosity while preserving your color hue to meet target standards.
WCAG 2.1 Requirements
Simulation
How people with normal see your colors.
Color vision deficiency affects roughly 1 in 12 men and 1 in 200 women. Use these simulations to ensure your UI elements remain distinct even without color cues.
How It Works
Choose Colors
Select or enter your foreground and background hex codes.
Verify Ratios
Check real-time compliance with WCAG 2.1 AA/AAA standards.
Preview UI
Visualize and test contrast under different color-blindness conditions.
Contrast & Accessibility FAQ
What defines 'Large Text' in WCAG?expand_more
Why is 4.5:1 the magic number?expand_more
Does contrast matter for dark mode?expand_more
How does the Auto-fix tool work?expand_more
Can People Actually Read That?
The WCAG thresholds, decoded
Contrast ratio runs from 1:1 (invisible) to 21:1 (black on white). The lines that matter:
| Ratio | Standard | Means |
|---|---|---|
| 4.5:1 | AA — normal text | The legal and practical minimum for body copy |
| 3:1 | AA — large text (18px+ bold / 24px+) | Headlines get more slack |
| 7:1 | AAA — normal text | Comfortable for low-vision readers |
| 3:1 | UI components & icons | Buttons, borders, focus rings count too |
Where designs quietly fail
The repeat offenders: light gray text on white (the “elegant” #999 fails at 2.8:1), white text on brand yellows and light greens, placeholder text nobody can read, and disabled states that are so disabled they're invisible. Roughly 1 in 12 men has some color vision deficiency — contrast is also what keeps interfaces usable for them, since ratio is about lightness difference, not hue difference.
Fixing a failing pair
Don't abandon the brand color — adjust lightness until the pair passes, which usually means darkening text or lightening background by a step or two (easy to reason about in HSL via the color converter). Build the candidate pairs in the color picker, and remember text over images/gradients needs checking at the worst point of the background — the gradient generator shows you exactly what range you're dealing with.