Check WCAG 2.1 AA & AAA accessibility contrast ratios between any two colors — instantly.
The minimum legal and practical standard. Requires 4.5:1 for normal text and 3:1 for large text (18pt+) or bold large text (14pt bold+). Also requires 3:1 for non-text UI components such as buttons and form fields.
The enhanced accessibility standard. Requires 7:1 for normal text and 4.5:1 for large text. AAA compliance is not required for entire sites but is ideal for high-readability interfaces such as medical or government portals.
Luminance is the perceived brightness of a color on a scale of 0 (black) to 1 (white). The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. Black-on-white achieves the maximum ratio of 21:1.
~300 million people worldwide have color vision deficiency; ~2.2 billion have some form of vision impairment. Adequate contrast benefits everyone — especially in bright sunlight, on low-quality screens, or for older users with reduced contrast sensitivity.
The ratio is calculated from relative luminance — a measure of how much light a color emits relative to white. Pure white has relative luminance 1.0; pure black has 0. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. The range is 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum possible contrast).
The 4.5:1 threshold was chosen by the WCAG working group based on research into visual acuity loss. It approximately corresponds to the contrast sensitivity needed by someone with 20/80 visual acuity — roughly three times normal — reading body-sized text on a typical monitor. 3:1 for large text reflects the fact that larger letterforms are readable at lower contrast. The 7:1 AAA threshold is based on 20/200 visual acuity, which is the legal threshold for blindness in many jurisdictions.
| WCAG level | Threshold | What it covers | One thing to know |
|---|---|---|---|
| AA — Normal text | 4.5:1 | Body text, captions, labels. Text below 18pt (24px) or 14pt bold (18.67px). | This is what most accessibility laws require. It's the floor, not the goal. |
| AA — Large text | 3:1 | Headings, display text at 18pt+ or 14pt+ bold. | Font weight matters: 14pt regular doesn't qualify as "large text"; 14pt bold does. |
| AA — UI components | 3:1 | Form control borders, icons, focus indicators, chart elements that convey information. | Placeholder text needs to meet body text contrast (4.5:1), not the UI component threshold. |
| AAA — Normal text | 7:1 | Same as AA normal text, enhanced level. | WCAG says AAA compliance isn't always possible for all content. Don't treat it as a blocker, but aim for it where you can. |
| Decorative / exempt | None | Logos, inactive UI components, purely decorative images. | A logo is exempt only if it appears as a logo. The same graphic used as a button label would need to meet contrast requirements. |
The WCAG ratio assumes a reasonably rendered typeface. A hairline-thin font at 4.5:1 reads much harder than the same ratio with a normal-weight font, because the thin strokes have effectively lower local contrast. If you're using a light font weight (300 or below), aim for 6:1 or higher rather than the minimum. The spec doesn't cover font rendering quality, but your users' eyes do.
A text/background pair that passes at 5:1 in light mode might fail in dark mode if the designer simply inverted the colors — because luminance doesn't invert symmetrically. Test both themes explicitly. Store passing pairs as design tokens and note which theme they belong to so they don't accidentally get swapped.
Medium purple text on a medium blue background can technically hit 4.5:1 while looking visually confusing because the hues fight each other. The ratio measures luminance difference, not perceptual clarity across hues. Colors with similar saturation and lightness but different hues can create legible-by-number but unpleasant-in-practice combinations. Test with real content, not just the checker.
#767676 on white is exactly 4.54:1 — the minimum grey that passes AA for body text on a white background. #777777 fails. #999999 is only 2.85:1. Most designs that use grey text for "secondary" or "muted" copy fail WCAG badly. If you're using light grey for helper text or captions, check it explicitly — it's one of the most common failures in UI audits.
The current WCAG 2.1 contrast algorithm treats luminance as a single threshold: 4.5:1 regardless of font size, weight, or rendering quality. APCA models contrast differently — it accounts for polarity (light text on dark vs dark text on light), spatial frequency (how fine the letterforms are), and the non-linear way human vision processes contrast. In practice, APCA allows some combinations that WCAG 2.1 fails, and fails some that WCAG 2.1 passes — particularly light text on dark backgrounds, where WCAG 2.1 tends to be more restrictive than visual perception requires.
WCAG 3.0 is still in working draft as of 2025. Current legal requirements (ADA, EN 301 549, AODA) reference WCAG 2.1 AA. For compliance purposes, continue using the 4.5:1 / 3:1 thresholds from this tool. If you want to explore APCA, the Accessible Perceptual Contrast Algorithm calculator is available separately — but don't rely on it for legal compliance yet.
rgba(0,0,0,0.5) on a photo background are common for this reason.#757575 which is right at the threshold, but many custom designs use lighter greys that fail. The exception is if the placeholder text is truly decorative and the field has a visible label — but if the placeholder is the only indication of what the field expects, it must pass contrast.