Check colour contrast against WCAG
Enter a text colour and a background colour and you immediately see the WCAG 2.1 contrast ratio with AA and AAA verdicts, separately for normal text, large text and UI components. The preview shows real text in three sizes, and when the pair falls short, the tool suggests the closest colour that passes. Everything runs in your browser.
Which values does WCAG require?
| Success criterion | Applies to | Level AA | Level AAA |
|---|---|---|---|
| 1.4.3 / 1.4.6 Contrast | normal text | 4.5:1 | 7:1 |
| 1.4.3 / 1.4.6 Contrast | large text | 3:1 | 4.5:1 |
| 1.4.11 Non-text contrast | UI components, graphics | 3:1 | not defined |
Large text means at least 18 pt, or 14 pt when bold. With 1 pt = 4/3 px that is 24 px and 18.66 px, exactly the sizes shown in the preview. Source: W3C, WCAG 2.1, Contrast (Minimum).
Low contrast is not a niche problem: the WebAIM Million 2024 analysis found text with insufficient contrast on 81.0 percent of the one million home pages it tested, by far the most common automatically detectable WCAG failure (webaim.org/projects/million).
How is the ratio calculated?
In two steps. First each colour is translated into its relative luminance: every channel is divided by 255 and linearised (values up to 0.03928 divided by 12.92, above that ((c + 0.055) / 1.055) ^ 2.4), then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. Green counts most because the eye is most sensitive there.
Then comes the ratio itself: (lighter + 0.05) / (darker + 0.05). It runs from 1:1 for identical colours to 21:1 for black on white.
Two details this tool takes seriously. The WCAG definition names 0.03928 as the threshold while the sRGB specification names 0.04045. For 8-bit colours no integer channel value falls between the two, so the result is identical. And the displayed number is rounded down, so it never reads 4.50 while the verdict says fail.
Is contrast a legal requirement?
In the EU, increasingly yes. Directive (EU) 2019/882, the European Accessibility Act, obliges member states to require accessibility for certain consumer products and services, including e-commerce. Germany transposed it as the Barrierefreiheitsstärkungsgesetz (BFSG), which has applied since 28 June 2025.
The technical requirements are not in the law itself. For digital offerings the chain runs through the German BFSG regulation to the harmonised standard EN 301 549, which references WCAG Level AA, the level that contains the 4.5:1 requirement for normal text.
There are exemptions. Under the German law, microenterprises providing services (fewer than 10 employees and at most 2 million euros in annual turnover or balance sheet total) are outside its scope. Public bodies in Germany have been covered for longer by the separate BITV 2.0.
Whether your specific offering is covered, and what follows from that, is a legal question. This section summarises the framework and is not legal advice. Legal text: BFSG at gesetze-im-internet.de (German).
How does the closest passing colour work?
The suggestion shifts lightness only, in HSL, and leaves hue and saturation alone. Your blue stays blue and just moves lighter or darker until the target is met. It searches for the smallest change in both directions and evaluates the rounded 8-bit value, so the HEX code you see really does hold the criterion.
Sometimes there is no solution, and the tool says so. Against a mid grey no lightness reaches 7:1, because black only gets to 5.32:1 and white to 3.95:1. Then you have to change the other colour of the pair.
Where are the limits?
- Contrast is one criterion among many. Keyboard operability, focus visibility, labels, structure and alternative text are not checked here.
- Semi-transparent colours are treated as opaque. WCAG judges what is actually rendered, so composite the colour first, or sample the rendered pixel with the eyedropper.
- Text on images or gradients has no single background value. Test the worst spot.
- Disabled controls are exempt from the contrast requirement under WCAG. They should still stay recognisable.
- This check does not replace testing with real people, especially people with low vision.
Where do the colour values come from?
If you only have a HEX code but need RGB, HSL or OKLCH (or the other way round), the colour converter gives you every format at once, plus tints and shades that often make a higher-contrast variant easy to spot.