Contrast Checker
Check WCAG contrast and find the nearest passing colour.
Contrast ratio4.54:1
| Check | Needs | Result |
|---|---|---|
| AA, normal text | 4.5:1 | Pass |
| AA, large text | 3:1 | Pass |
| AAA, normal text | 7:1 | Fail |
| AAA, large text | 4.5:1 | Pass |
| User interface components and graphics | 3:1 | Pass |
Large text is at least 24 px, or at least 18.66 px and bold.
Suggest a passing colour
Already passes (4.5:1 needed).
Think a result is wrong? Report it on GitHub
What contrast ratio does WCAG require?
Check the WCAG contrast ratio of text and background colours for AA and AAA, including transparent colours, and get the nearest colour that passes. Free.
WCAG 2 measures contrast as a ratio of relative luminance, from 1:1 (no contrast) to 21:1 (black on white). Normal text needs 4.5:1 for level AA and 7:1 for AAA. Large text (at least 24 px, or 18.66 px bold) and user interface components need 3:1.
Why 4.49 and not 4.50
The ratio is shown truncated, never rounded up, and pass or fail is decided on the exact value. #007bc8 on white has a ratio of 4.4997: rounded it would read 4.50 and look like a pass, but it fails AA. Semi-transparent colours are measured as they would be drawn, over the background and then the page.
Fixing a failing pair
Suggest a passing colour changes only the lightness of the text colour (or the background), keeping its hue and chroma where possible, and offers the closest colour that passes the level you choose. WCAG 2 is the current conformance measure, though it is an imperfect model of legibility, especially for light text on dark colours.