WCAG Color Contrast Checker

WCAG contrast requirements

The Web Content Accessibility Guidelines set minimum contrast ratios so that text stays readable for people with low vision, colour vision deficiencies or a phone in bright sunlight. Ratios run from 1:1 (identical colours) to 21:1 (black on white).

AA, normal text

At least 4.5:1 (success criterion 1.4.3). The level most laws and accessibility policies require, including the European Accessibility Act and the ADA guidance in the US.

AA, large text

At least 3:1. Large means 24 px (18 pt) and up, or 18.66 px (14 pt) and up when bold.

AAA, normal text

At least 7:1 (success criterion 1.4.6). The enhanced level, worth aiming for in long-form reading.

AAA, large text

At least 4.5:1.

Non-text contrast

At least 3:1 (success criterion 1.4.11) for icons, input borders, focus rings, chart lines and the parts of a control you need to see to use it.

How the contrast ratio is calculated

Each colour is converted to its relative luminance: the sRGB channels are linearised (undoing the gamma curve) and weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, because the eye is far more sensitive to green. The ratio is then (L1 + 0.05) / (L2 + 0.05), with L1 the lighter colour. For example, #777777 on white comes out at 4.48:1, just short of AA, while #767676 reaches 4.54:1 and passes.

A ratio is never rounded up to a threshold: WCAG is explicit that 4.49:1 does not meet 4.5:1. Translucent colours are first blended the way the browser draws them, the foreground over the background and a translucent background over white.

Fixing a failing colour

The suggestions keep the hue and saturation of your text colour and change only its lightness in OKLCH, the perceptual colour space CSS now supports, stepping darker and lighter until the ratio passes and picking whichever is closer to your original. The result is usually the same brand colour, a little deeper or lighter, rather than a jump to black. If no shade of that hue can reach the target on your background, the tool says so, and the background is what needs to change.

To explore other variants yourself, open the colour in the color converter and step through its tints and shades, or pull candidate colours from a photo with the color palette generator.

Common contrast mistakes

• Placeholder and disabled-looking text. Light grey placeholder text is still text, and it has to meet 4.5:1 if users need it. Truly disabled controls are exempt, but anything that only looks disabled is not.
• Text on images and gradients. Check the lightest part of the image behind the text, not the average. A dark overlay or a solid panel behind the text is the dependable fix.
• Brand colours used for text. A vivid orange or turquoise can look bold yet fail on white. Use the suggestion to find a deeper variant of the same hue for text, and keep the bright one for large headings or decoration.
• Focus rings and input borders. A 1 px light grey border around a text field often fails the 3:1 non-text rule, making the field hard to find for people with low vision.
• Dark mode. A pair that passes in the light theme says nothing about the dark one. Check both themes, using the swap button for a quick look at the inverted pair.

APCA and WCAG 3

Below the WCAG 2 results you will also see an APCA lightness contrast value, written Lc. APCA is the contrast method proposed for the future WCAG 3. It accounts for font weight and for the fact that light text on a dark background needs different contrast from dark text on light, which the WCAG 2 formula ignores; that is also why its sign changes when you swap the colours. As a rough guide, Lc 75 suits body text, Lc 60 other readable text and Lc 45 large headings. WCAG 3 is still a draft, so treat APCA as extra information: WCAG 2.x remains the standard that audits and laws refer to.