Contrast checker
Check color contrast for accessibility. Get the WCAG 2.1 ratio and APCA value with AA/AAA pass-fail for normal and large text.
Large text sample
Normal body text sample — the quick brown fox jumps over the lazy dog.
WCAG 3 candidate. Rough guide: ≥60 for body text, ≥45 for large.
What this contrast checker does
Enter a text color and a background color and get the WCAG 2.1 contrast ratio with pass/fail badges for AA and AAA at normal and large text sizes, plus the APCA Lc value used by the draft WCAG 3. A live preview renders real body and heading text in your colors so you can judge legibility alongside the numbers. Calculations use the colorjs.io library, written by the CSS Color spec editors.
How to use it
- Set Foreground (the text color) by typing a CSS color or using the picker.
- Set Background the same way. Any CSS syntax works, including
oklch()and named colors. - Read the WCAG 2.1 ratio and the four badges: AA normal, AA large, AAA normal, AAA large.
- Read the APCA (Lc) value for a perceptual second opinion.
- Adjust either color until the badges you need turn green, then copy the hex from the field.
WCAG 2.1 thresholds
| Requirement | Normal text | Large text | Non-text UI |
|---|---|---|---|
| AA (1.4.3, 1.4.11) | 4.5:1 | 3:1 | 3:1 |
| AAA (1.4.6) | 7:1 | 4.5:1 | n/a |
“Large” means at least 18pt (24px) regular or 14pt (about 18.7px) bold. Logos, decorative text and disabled controls are exempt. Placeholder text is not exempt — it is real content and must meet 4.5:1, which most default grey placeholders fail.
The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). It is computed from relative luminance, so hue barely matters: a saturated blue and a dark grey with the same luminance score the same against white.
Worked examples
| Foreground | Background | WCAG | APCA Lc | Verdict |
|---|---|---|---|---|
#ffffff | #6b46ff | 5.32 | 80.9 | AA normal, AAA large only |
#767676 | #ffffff | 4.54 | 71.6 | The lightest grey that passes AA |
#595959 | #ffffff | 7.00 | 84.3 | Exactly AAA for body text |
#ffffff | #0d6efd | 4.50 | 75.8 | Bootstrap blue — passes AA with no margin |
#ffffff | #f97316 | 2.80 | 58.4 | White on orange fails everything |
#1a1a1a | #f97316 | 6.21 | 49.1 | Dark text on orange passes AA |
#aaaaaa | #1a1a1a | 7.49 | 54.9 | Passes AAA on paper, APCA says “large text only” |
The last two rows show where the models disagree. WCAG rates #aaaaaa on near-black as AAA, but APCA scores it 54.9, below its body-text guideline — light grey on dark is harder to read than the ratio suggests. Conversely, dark text on a bright orange button is fine by both, while white on the same orange fails, which is why so many orange and green buttons with white labels are inaccessible.
Fixing a failing pair
- Darken the text, not the background, when the background is a brand surface you cannot change. Moving
#777to#595959takes white-background text from AA to AAA. - Drop to a bigger size only if the text is genuinely 24px+ or 18.7px bold — then 3:1 is enough.
- Dark mode: pure white on pure black passes 21:1 but causes halation for many readers.
#e6e6e6on#121212still clears 7:1 and reads more comfortably. - Icons and borders: input outlines, focus rings and toggle tracks need 3:1 against adjacent colors (1.4.11), a rule often missed in design systems.
Generate candidate colors with the tints and shades generator and paste them in here until the pair passes.
Related tools and snippets
- Tints and shades generator — produce darker variants of a failing text color in one step.
- Palette generator — a 9-step OKLCH scale whose outer steps are designed to pair with high contrast.
- Color mixer — flatten a translucent color onto its background to get the real composited value to test.
- Color converter — convert the passing pair to
oklch()orhsl()for your tokens. - Custom range slider snippet — a styled input whose track and thumb colors you should check against 1.4.11.
FAQ
What contrast ratio do I need to pass WCAG?
AA requires 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold, roughly 24px and 19px). AAA requires 7:1 and 4.5:1. UI components and graphics such as icons and input borders need 3:1.
What is APCA and how does it relate to WCAG?
APCA (Accessible Perceptual Contrast Algorithm) is the contrast model proposed for WCAG 3. It reports Lc on a 0 to about 106 scale and accounts for polarity, so dark-on-light and light-on-dark are scored differently. It is not yet a legal requirement; WCAG 2.1 ratios are.
What APCA value should I aim for?
A common guide is Lc 90 for body text at small sizes, Lc 75 for standard body text, Lc 60 for large or bold text and Lc 45 for non-text elements. The tool shows a short version of this scale next to the number.
Does the order of foreground and background matter?
Not for the WCAG 2.1 ratio, which is symmetric. It does matter for APCA, which scores light text on dark slightly differently, so enter the actual text color as foreground.
Can I check colors with transparency?
Enter the final composited colors instead. A semi-transparent text color depends on what is behind it, so blend it first with the color mixer or read it off a screenshot.
Why does #777777 on white fail when #767676 passes?
#777777 on white is 4.48:1, just under the 4.5:1 AA line; #767676 is 4.54:1. The threshold is a hard cutoff, so always check the exact value rather than eyeballing it.