Color Accessibility Checker
Check WCAG contrast ratio for foreground and background colors.
About this tool
Enter any foreground and background color using the hex color pickers and instantly see the WCAG 2.1 contrast ratio along with AA and AAA pass/fail results for both normal text and large text. Four live text-size previews show exactly how your color pair looks at different scales. If the combination fails, the tool suggests nearby accessible colors that do pass, so you can quickly find a compliant alternative without leaving the page.
How to use
- 1 Pick a foreground (text) color using the color picker or type a hex code.
- 2 Pick a background color the same way.
- 3 View the contrast ratio and WCAG AA/AAA results for normal and large text.
- 4 If failing, click a suggested color to apply it and meet the AA standard.
What contrast ratio measures, and why it is a ratio
Readability depends on the difference in brightness between text and its background, not on the colours themselves. Two colours can look completely different and still be hard to read together if they are similarly bright — light grey on white, or navy on black. WCAG (the Web Content Accessibility Guidelines) captures this with a single number: the contrast ratio, which compares the relative luminance of the lighter colour to the darker one. It ranges from 1:1 (identical, invisible) to 21:1 (pure black on pure white). This tool computes that ratio from any two hex colours and tells you which conformance levels you pass.
The math behind the number
The ratio is not a simple subtraction of brightness, because human eyes do not perceive light linearly. The tool follows the exact WCAG 2.1 procedure:
- Split each hex colour into its red, green, and blue channels (0–255).
- Linearise each channel: divide by 255, then apply a gamma curve — values at or below
0.03928are divided by 12.92, and higher values use((c + 0.055) / 1.055)^2.4. This undoes the sRGB encoding so the numbers reflect actual light intensity. - Combine the channels into relative luminance with the weighting
0.2126·R + 0.7152·G + 0.0722·B. Green dominates because the eye is most sensitive to it; blue barely counts. - Form the ratio
(L_lighter + 0.05) / (L_darker + 0.05). The+ 0.05models the small amount of ambient light that always reflects off a screen, which is why even black-on-black yields 1:1 rather than dividing by zero.
The thresholds you are being graded against
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
"Large text" is the official escape hatch: text at 18pt (24px) or 14pt bold (~18.7px) and above is easier to read at the same contrast, so it is held to a looser standard. The tool checks all four cells at once and marks each Pass or Fail, so you can see, for example, that a colour pair good enough for a heading still fails for body copy.
A worked example
Take the default pair: foreground #1a1a2e (a near-black navy) on a white #ffffff background. White has the maximum luminance of 1.0; the dark navy linearises to roughly 0.011. The ratio is (1.0 + 0.05) / (0.011 + 0.05) ≈ 17.2:1 — comfortably above every threshold, so all four cells pass. Now imagine a trendy "grey on white" of #999999 on #ffffff: that lands near 2.85:1, which fails AA for both normal and large text. It looks clean in a mockup and is genuinely hard to read for anyone with even mild low vision. The number tells you what the eye in a comfortable office won't.
How the suggestions work
When a pair fails AA, the tool offers up to four fixes — and it only adjusts the foreground, leaving your background untouched. It walks the text colour darker in steps, then lighter in steps, stopping at the first shade in each direction that clears 4.5:1, and also offers plain black and white when those qualify. Each suggestion shows its own resulting ratio so you can pick the smallest change that passes. Click one and it is applied instantly, with the preview updating to match.
Use cases beyond ticking a compliance box
- Design systems. Lock in a palette where every text-on-surface combination is pre-verified, so designers can't accidentally ship illegible states.
- Dark mode. Contrast that passes on a white background often fails when you invert to a dark surface; check both directions explicitly.
- Placeholder and helper text. The faint grey hint text in forms is the single most common AA failure on the web — test it like real content.
- Disabled states. These are exempt from WCAG, but pushing them too faint still frustrates real users; the tool helps you find a "muted but legible" level.
Common mistakes
The first is testing only your "happy path" colours and forgetting hover, visited, and error states. The second is assuming contrast covers colour-blindness — it does not. A red/green pair can have excellent contrast and still be indistinguishable to someone with deuteranopia, because contrast measures brightness, not hue. Never rely on colour alone to convey meaning; add an icon, underline, or label. Finally, remember the ratio describes solid colours: text over a photo or gradient varies pixel by pixel, so test against the lightest and darkest region the text crosses, or add a scrim behind it. Everything here runs locally in your browser — your colour values are never sent to a server.