WCAG 2.2 · 1.4.3 Contrast (Minimum) · 1.4.11 Non-text Contrast
Contrast checker
Enter a background and a text colour. You get the contrast ratio, whether it passes WCAG, and if it does not, the nearest tint of your own colour that does.
This tool needs JavaScript. Without it, the rule of thumb: body text needs 4.5:1, large text and icons 3:1.
–
- AA · body text4.5:1
- AA · large text (24px, or 18.7px bold), icons, borders3:1
- AAA · body text7:1
Large text, 24px bold
Body text at 16px. The web is for everyone, so make sure everyone can read it.
Nearest tints of your colour that pass
Why WCAG matters
WCAG, the Web Content Accessibility Guidelines, is the international standard for making websites and apps usable for people with a disability. It is written by the W3C, the organisation behind HTML and CSS. Version 2.2 has 86 success criteria at three levels: A, AA and AAA. AA is the level the law and most organisations ask for.
- 2.2 billionpeople worldwide live with a vision impairment (WHO).
- 1 in 12men and 1 in 200 women have a colour vision deficiency.
- Everyonereads a screen in bright sunlight, on a cheap display or with tired eyes.
It is also the law. In the Netherlands, government websites must meet WCAG 2.1 AA (through the European standard EN 301 549). Since 28 June 2025 the European Accessibility Act applies the same standard to many private services too, such as web shops, banking and e-books.
What the contrast ratio does
Text that is too light on its background is hard or impossible to read for people with low vision, older eyes or a bad screen. WCAG measures this with one number: the contrast ratio, from 1:1 (the same colour) to 21:1 (black on white).
Both colours get a relative luminance L: how bright they look, from 0 for black to 1 for white, with green weighing most because our eyes are most sensitive to it. The ratio is (L1 + 0.05) / (L2 + 0.05), with the lighter colour on top.
- 4.5:1 for normal text (success criterion 1.4.3, level AA).
- 3:1 for large text, from 24px, or 18.7px bold (1.4.3), and for icons, input borders and focus rings (1.4.11).
- 7:1 for normal text at level AAA (1.4.6).
Hover and focus states count too: a link that turns light orange on hover still has to be readable.
What OKLCH is, and why this tool uses it
OKLCH is a way to describe a colour with three numbers: Lightness, Chroma (how colourful) and Hue (which colour: red, orange, blue). It was published by Björn Ottosson in 2020 and is built so that the numbers match what we see. Change the lightness by 10% and every colour looks 10% lighter, whether it is yellow or blue.
Older models such as HSL do not work like that. Yellow and blue at the same HSL lightness look completely different, and making a colour darker in HSL often shifts it towards brown or grey. That is why this tool works in OKLCH: to find a passing tint it changes only the lightness of your colour. The hue and the colourfulness stay, so the result still looks like your colour, just darker or lighter.
You can use it in CSS directly, in every modern browser: color: oklch(52% 0.17 33);