Color contrast checker (WCAG 2.2 AA and AAA)
Contrast checker
Hex format, for example #2f47d9 or #fff.
Normal text: add the product to your cart and pay in three steps.
Large text: €129
Button border and icon
Contrast ratio
4.54 : 1
| Requirement | Minimum | Result |
|---|---|---|
| Normal text, level AAWCAG 1.4.3 | 4.5 : 1 | — |
| Large text, level AAWCAG 1.4.3 | 3 : 1 | — |
| Normal text, level AAAWCAG 1.4.6 | 7 : 1 | — |
| Large text, level AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Icons, field borders and other interface partsWCAG 1.4.11 | 3 : 1 | — |
Large text means at least 24 px, or 18.66 px in bold. The check runs in your browser; the colours are not sent anywhere.
Enter a text colour and a background colour: the checker shows the contrast ratio by the WCAG 2.x formula, whether it passes level AA and AAA for normal and large text and for interface parts, and the closest text colour that reaches 4.5:1.
What the results mean
| Requirement | Minimum | WCAG criterion |
|---|---|---|
| Normal text, level AA | 4.5 : 1 | 1.4.3 Contrast (Minimum) |
| Large text, level AA | 3 : 1 | 1.4.3 Contrast (Minimum) |
| Normal text, level AAA | 7 : 1 | 1.4.6 Contrast (Enhanced) |
| Large text, level AAA | 4.5 : 1 | 1.4.6 Contrast (Enhanced) |
| Icons, borders, interface parts | 3 : 1 | 1.4.11 Non-text Contrast |
Level AA is the level that EN 301 549, the European Accessibility Act, the German BFSG and US practice under the ADA rely on. AAA is stricter and not required by these laws.
Why contrast matters in an online shop
Grey prices on white, white text on a pale banner, light placeholders in the checkout form: people with low vision, older customers and anyone on a phone in sunlight read them slowly or not at all. Low contrast is the most frequent problem automated checks find on shop websites. Fix it in the colour settings of your theme or in its CSS variables, not element by element.
How the ratio is calculated
The ratio compares the relative luminance of the lighter and the darker colour: (L1 + 0.05) / (L2 + 0.05). It goes from 1:1 (the same colour) to 21:1 (black on white). Transparency, shadows and background images change the real contrast; check text on images with the darkest and lightest part of the image behind it.
Check the whole site
This checker tests one colour pair. Pandus finds every text with low contrast on a page — with the colours, the ratio and a screenshot — and checks every page of your site each week. See also the rule low text contrast.