Color Contrast Checker
Check text and background colours against WCAG AA and AAA, and get fixes.
- Runs in your browser
- Nothing is uploaded
- Free, no sign-up
Excellent. Passes the strictest level for all text.
Normal text at 16px. The quick brown fox jumps over the lazy dog, and the numbers 0123456789.
Large text at 24px bold
Large text means 18pt (24px) or larger, or 14pt (about 18.7px) and bold. Text that is part of a logo or purely decorative is exempt from the requirement.
About this tool
Enter a text colour and a background and see the contrast ratio between them, with a pass or fail against each WCAG level for normal text, large text and interface components. If it fails, you get the closest colours that would pass, so you can fix it without redesigning.
How to use it
- Enter the text colour and background colour as hex, rgb(), hsl() or a name, or use the pickers.
- Read the ratio and the pass or fail for each level, and check the preview.
- If something fails, use one of the suggested colours.
The thresholds
WCAG sets minimum contrast ratios, from 1:1 (identical colours) to 21:1 (black on white).
| What | AA (the usual target) | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Icons, borders and form controls | 3:1 | not defined |
Large text is 18pt (24px) or bigger, or 14pt (about 18.7px) and bold. Interface components covers the parts of a control needed to recognise it, such as an input's border or an icon that has no text label.
AA is the level most accessibility laws and procurement rules refer to. AAA is worth aiming for on body text where you can, but it is not expected of a whole site.
How the ratio is worked out
Each colour is converted to its relative luminance, a measure of how bright it appears to the eye, weighting green most and blue least. The ratio is then (lighter + 0.05) / (darker + 0.05).
Because the formula is built on perceived brightness, hue does not matter on its own. Pure blue on black looks vivid but has a low ratio because blue contributes so little brightness.
Pass or fail uses the exact figure. A ratio of 4.499 does not meet 4.5, however it is rounded.
Failures worth knowing
- Light grey placeholder and caption text.
#999999on white is only 2.85:1, below even the large-text minimum. - White on a mid-tone brand colour. White on
#3b82f6is 3.68:1 and fails for body text. Darkening the blue to#2563ebmakes it 5.17:1, which passes. - Text over images and gradients. The ratio has to hold at the worst point behind the text, not at the average.
- Disabled controls are exempt, but a control that merely looks faded is not disabled.
Beyond the number
A passing ratio is necessary, not sufficient. Thin fonts at small sizes are harder to read than the ratio suggests, and WCAG's formula does not model dark mode well; a newer method, APCA, is being studied for a future WCAG version. Never use colour alone to carry meaning, such as red and green with no other cue.
When you are working with colours more broadly, the color converter translates between hex, RGB, HSL and OKLCH.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text and interface components meets WCAG AA, which is the standard most legal requirements point to.
Do logos have to pass?
No. Text that is part of a logo or brand name is exempt, as is purely decorative text and disabled controls.
How are semi-transparent colours handled?
A translucent text colour is blended with the background first, because that blended colour is what people actually see. A translucent background is shown over white.
How are the suggested colours chosen?
The tool changes only lightness, keeping hue and saturation, and finds the smallest change that reaches the target, so a brand blue stays recognisably blue.