Contrast checker

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, version 3.2.1). The newest version, EN 301 549 v4.1.1 from September 2026, moves to WCAG 2.2; it becomes the legal reference once the European Commission cites it in the Official Journal of the EU. 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.

The algorithm is the one WCAG 2.x itself defines for relative luminance: each sRGB channel is linearised (c / 12.92 up to 0.04045, otherwise ((c + 0.055) / 1.055)^2.4) and weighted L = 0.2126 R + 0.7152 G + 0.0722 B. Older versions of WCAG used 0.03928 as the threshold; W3C changed it in May 2021 and notes that this has no practical effect, because no 8-bit colour value falls between the two. It is not APCA, the newer contrast method proposed for WCAG 3, which is still a draft. To suggest a passing tint, the tool converts your colour to OKLCH and searches in small steps (0.2%) along the lightness only (more about OKLCH in the next section).

• 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.

The colours that go with yours use the same wheel. Analogous colours sit 30° away and feel calm together, a triadic colour sits a third of the way round, and the complementary colour sits opposite and stands out most. Because only the hue turns, the suggestions keep the weight of your colour, and each one is darkened or lightened just enough to pass on your background.

You can use it in CSS directly, in every modern browser: color: oklch(52% 0.17 33);