Color Contrast Checker
Enter a foreground and a background colour to get the exact contrast ratio and whether it clears WCAG AA and AAA. Everything runs in your browser.
Enter two colours, get the exact ratio and whether it clears WCAG — plus a suggested fix when it does not.
AA is 4.5:1
For normal text. Large text — 18pt, or 14pt bold — only needs 3:1.
AAA is 7:1
The stricter level, 4.5:1 for large text. Worth targeting for long-form reading.
Controls need 3:1 too
WCAG 1.4.11 covers buttons, inputs and focus rings, not just text. A hairline border rarely qualifies.
A suggested pair
When a combination fails, the tool proposes the nearest passing variant, so you keep the hue.
Passing is a floor, not a goal. Exactly 4.5:1 is legible, not comfortable. The ratio also says nothing about hue, so two colours can pass and still be an unpleasant pairing.
How a contrast ratio is calculated
The ratio compares the relative luminance of two colours, weighting red, green and blue for how sensitive the eye is to each. Green contributes most and blue least, which is why a mid blue on black is harder to read than a mid green on black.
The scale runs from 1:1 to 21:1, pure black on pure white. Nothing exceeds 21:1, so 12:1 is already a comfortable margin.
Every threshold in one place
| What it is | AA | AAA |
|---|---|---|
| Body text, under 18pt | 4.5:1 | 7:1 |
| Large text — 18pt, or 14pt bold | 3:1 | 4.5:1 |
| Icons, borders, focus rings, charts | 3:1 | 3:1 |
| Logos and genuinely disabled controls | exempt | exempt |
The exemption for disabled controls is narrow: it applies to a control that cannot be operated at all, not one that merely looks muted.
The failures that come up most
- Placeholder text as a label. Usually around 2.5:1, and it disappears once the field is filled in.
- Light grey secondary text.
#999on white is 2.8:1 — the most common failure on a marketing site. - White text on a brand colour. Most mid-tone brand blues, greens and oranges land between 2:1 and 4:1 against white.
- Focus rings. A 1px hairline rarely reaches 3:1, and it is the indicator keyboard users depend on.
- Text over an image or gradient. Test the lightest and darkest point the text can sit over, and add a scrim if either fails.
- Hover and visited states. The resting state gets checked; the others do not.
Where the number stops helping
A ratio is blunt. It treats a thin 300-weight face and a bold 700-weight face as identical, and it does not model the way light text on a dark background reads as heavier than the same pair inverted. APCA, the candidate replacement drafted for WCAG 3, accounts for weight, size and polarity, but it is not a requirement anywhere yet. Ship against the numbers above, then use judgement.
Frequently asked questions
Is this free?
Yes, with no account and no limit on how many pairs you check.
Does anything get uploaded?
No. The calculation runs in your browser; no colour you enter reaches a server.
What counts as large text?
18pt and above, or 14pt bold — roughly 24px and 18.66px. It needs 3:1 for AA rather than 4.5:1.
Does this cover non-text elements?
Yes. Icons, form borders and focus indicators need 3:1 under WCAG 1.4.11.
What is a good contrast ratio?
4.5:1 passes for body text, but treat it as the floor. Around 7:1 is comfortable for long-form reading.
Do logos have to pass?
No. Logotypes are exempt under WCAG, as is text inside a photograph. The exemption covers the mark, not the navigation beside it.
How do I fix failing text without abandoning the brand colour?
Keep the hue and move the lightness. Darkening by 15 to 25 per cent usually clears 4.5:1 on white, and the original stays usable for fills and borders, where only 3:1 applies.
Does dark mode need checking separately?
Yes. Contrast is a property of a pair, so every pair changes when the background does. Palettes that pass in light mode routinely fail on secondary text in dark mode.
Related tools
Build a palette that passes from the start with the colour palette generator, or apply it as a CSS gradient. For dedicated accessibility software, browse digital product design tools.