Design
Contrast Checker
Check whether text is easy to read on its background – according to WCAG 2.2 for normal and large text as well as UI components. If contrast is lacking, the tool suggests the closest matching color in the same hue. Plus APCA and a simulation of color vision deficiencies.
- Runs entirely in your browser
- No data upload
- No sign-up
- Free
Colors
Preview
Large heading
Normal body text at 16 pixels. This is how visitors read your content – long sections need good contrast so the eyes do not tire. A link in the text.
Small note text at 13 pixels, e.g. for footnotes or captions.
How people with color vision deficiency see it
Simulation according to Machado et al. (2009) at full severity. About 8% of men and 0.5% of women have red-green color deficiency – color should never be the only distinguishing feature.
Result according to WCAG 2.2
APCA WCAG 3 draft
APCA takes into account that light text on a dark background looks different from the other way round. Not yet an official standard – WCAG 2.2 currently applies.
Guide
How it works
- Choose colors
Enter the text color and background – in any notation (HEX, RGB, HSL, color name) – or pick them with the color picker. The arrow swaps the two.
- Read the result
On the right you see the contrast ratio and which WCAG levels are met: AA is the usual minimum standard, AAA the stricter level.
- Apply a suggestion
If the contrast is not sufficient, the tool calculates the next matching text or background color – only lighter or darker, in the same hue. One click applies it.
- Check for everyone
Below you see how the combination looks with red, green or blue blindness – including the contrast value.
FAQ
Frequently asked questions
Which contrast is required?
For level AA, WCAG 2.2 requires at least 4.5 : 1 for normal text and 3 : 1 for large text (from 24 px or 18.66 px bold) as well as for UI components and graphics. Since 28 June 2025, the European Accessibility Act applies in the EU: for many online shops and digital services, level AA – via the standard EN 301 549 – is now mandatory.
What is the difference between AA and AAA?
AA is the recommended minimum standard that laws usually require. AAA is stricter (7 : 1 for normal text) and especially helps people with low vision. AAA for all content is often not necessary, but it is a good goal for body text.
How is the contrast calculated?
From the relative luminance of both colors: (lighter + 0.05) / (darker + 0.05). The result is between 1 : 1 (same color) and 21 : 1 (black on white). According to WCAG, values are not rounded up – 4.499 does not meet 4.5.
What is APCA?
The “Accessible Perceptual Contrast Algorithm” is the candidate for the upcoming WCAG 3. It takes into account that light text on a dark background is perceived differently from dark text on a light background, and outputs an Lc value. Until WCAG 3 is adopted, WCAG 2.2 remains the benchmark.
Does the opacity of the text color count?
Yes. Semi-transparent text is blended over the background and then measured – exactly as it actually looks on screen. The opacity of the background, on the other hand, is ignored because what matters is what lies beneath it.
Are my colors stored?
No. Everything is calculated in your browser, nothing is sent.