Why it matters
About one in twelve men and one in two hundred women have some form of colour vision deficiency, and many more people read screens in bright sunlight or with tired eyes. Low-contrast text is the most common accessibility failure on the web: WebAIM's yearly review of the top million home pages finds it on most of them.
WCAG 2.2, the standard UK public sector sites must meet and the one most accessibility audits use, asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text and interface parts such as input borders and icons (level AA). The problem is that a brand colour that fails usually only needs a small nudge, and finding that nudge by hand is slow. This tool finds it for you, keeping the same hue so it still looks like your brand.
How to use it
- Type or pick your text colour and background colour. Hex, rgb(), hsl() and colour names all work.
- Read the ratio and the five results. Body text needs AA normal; headings 24px and up need AA large.
- If it fails, press Use next to the suggested colour to swap it in.
- For a full palette, enter your brand colour below and copy or download the CSS variables.
FAQ
Why does #777777 on white fail?
Its contrast ratio is 4.48:1, just under the 4.5:1 that WCAG AA asks for body text. #767676 is the lightest grey that passes on white, at 4.54:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm, the method being developed for WCAG 3. It accounts for which colour is the text and how thin fonts are. It isn't a legal standard yet, so use the WCAG 2.2 results for compliance and APCA as a second opinion.
What counts as large text?
24px and up, or 18.66px and up if it's bold (that's 18pt and 14pt bold in the standard's terms).
Is anything I enter sent anywhere?
No. All the maths runs in your browser, so it keeps working offline once the page has loaded.
