Colour Contrast Checker
Check whether your text and background colours meet WCAG accessibility guidelines.
About this tool
Works out the contrast ratio with the WCAG 2 relative-luminance formula and checks it against the AA (4.5:1, or 3:1 for large text) and AAA (7:1, or 4.5:1 for large text) thresholds. Enter hex codes or use the colour pickers.
Text that does not stand out from its background is hard to read for everyone, and impossible for some people with low vision or colour blindness. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios for text. Enter a text colour and a background colour to get the ratio, see whether it passes AA and AAA for normal and large text, and preview how it looks.
How to use the Colour Contrast Checker
- Enter the text colour as a hex code, or pick it with the colour picker.
- Enter the background colour the same way.
- Read the contrast ratio and the pass or fail results.
- Adjust the colours until the level you need passes.
Grey text on white
Mid-grey text #777777 on a white background has a contrast ratio of 4.48:1. That fails AA for normal text, which needs 4.5:1, though it passes for large text. Darkening it slightly to #767676 gives 4.54:1 and passes AA. Black on white is the maximum, 21:1, and #5b6478 on white is about 5.9:1, an AA pass.
How WCAG contrast works
WCAG measures contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colour, from 0 for black to 1 for white. Ratios run from 1:1 (no contrast) to 21:1. Level AA, the usual legal and practical target, needs 4.5:1 for normal text and 3:1 for large text, meaning at least 24 px regular or about 18.7 px bold. Level AAA needs 7:1 and 4.5:1. User interface parts such as input borders and icons need 3:1 against their surroundings. Contrast is only one part of readability: font size, weight and line spacing matter too, and colour alone should never be the only way information is shown.
Frequently asked questions
What contrast ratio do I need?
For most websites, aim for WCAG AA: at least 4.5:1 for body text and 3:1 for large text and interface elements.
What counts as large text?
Text at least 24 px (18 pt) regular or about 18.7 px (14 pt) bold.
Does contrast apply to logos?
No. WCAG exempts logos and decorative text, but it is still good practice to keep them readable.
Why does my colour pass on one background and fail on another?
Contrast depends on both colours. A mid-tone colour can pass on white but fail on a light grey card.