WCAG Color Contrast Explained: AA vs AAA Ratios You Need

What contrast ratio do I need? The short answer

If you just need the numbers, here they are. They come from the Web Content Accessibility Guidelines, WCAG 2.1, and the same thresholds carry over to WCAG 2.2.

• Normal text, level AA: at least 4.5:1.
• Large text, level AA: at least 3:1.
• Normal text, level AAA: at least 7:1.
• Large text, level AAA: at least 4.5:1.
• User interface components and meaningful graphics (WCAG 2.1 and later): at least 3:1 against what is next to them.

AA vs AAA: which level should you aim for?

WCAG has three conformance levels: A, AA and AAA. Contrast for text appears at AA (success criterion 1.4.3, Contrast Minimum) and AAA (1.4.6, Contrast Enhanced). There is no level A contrast rule for text.

AA is the level most organisations target, and it is the level usually referenced in accessibility policies and procurement requirements. AAA is stricter and harder to meet across a whole site, which is why the W3C does not recommend requiring AAA for entire sites. A sensible approach is to treat AA as the floor for everything and aim for AAA on long passages of body text, where higher contrast makes reading less tiring for everyone.

What counts as large text?

Large text gets the lower threshold because bigger, heavier letters stay readable at lower contrast. WCAG defines large text as at least 18 point regular, or at least 14 point bold. On the web, 18pt is roughly 24px and 14pt is roughly 18.66px, assuming default browser settings.

Two things catch people out. First, it is the rendered size that counts, so a heading that is 24px on desktop but shrinks to 18px on a phone needs to pass the normal-text threshold on the phone. Second, very thin fonts can still be hard to read even when they technically count as large, so treat the threshold as a minimum, not a target.

Contrast for buttons, icons and form fields

WCAG 2.1 added success criterion 1.4.11, Non-text Contrast. It asks for at least 3:1 for the visual parts needed to identify user interface components and their states, and for parts of graphics needed to understand them. In practice that covers things like the border of a text input, the outline of a checkbox, a focus indicator, or the lines in a chart that carry meaning.

Some things are exempt from the contrast rules: purely decorative elements, logos and brand names, text that is part of a photo, and disabled controls that are not available for use. That said, a disabled button that people cannot see at all is still a usability problem, even if it passes the letter of the guideline.

How the contrast ratio is calculated

The ratio compares the relative luminance of two colors, that is, how bright each one appears to the eye. It always ranges from 1:1 (two identical colors) to 21:1 (pure black on pure white).

To get relative luminance, each of the red, green and blue channels is first converted to a value between 0 and 1 and linearised: if the value is 0.03928 or less it is divided by 12.92, otherwise it becomes ((value + 0.055) / 1.055) raised to the power 2.4. The luminance L is then 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue. Green carries the most weight because our eyes are most sensitive to it.

Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two colors. A well-known example: mid grey #767676 on white comes out at about 4.54:1, just over the AA line for normal text, while the slightly lighter #777777 drops to about 4.48:1 and fails. One step of grey can be the difference, which is why it is worth measuring rather than guessing.

How to check color contrast on a real page

The hard part is usually not the maths but getting accurate values. Text over a photo, a gradient or a semi-transparent overlay does not have one background color in the CSS, so you need to sample what is actually on screen.

• Sample the text color and the background color as rendered pixels, not from the stylesheet. Our guide on how to pick a color from any website covers the options.
• For text over images or gradients, sample the background at the point where contrast is weakest, usually the lightest area behind light text or the darkest area behind dark text.
• Calculate the ratio with the formula above or any contrast calculator, and compare it with the threshold for that text size.
• Check every state: hover, focus, visited links and error messages often get colors that nobody tested.

A quick contrast check with Loupe

Loupe, our free color picker for Chrome, shows the WCAG contrast ratio of every color you pick against white and against black. Each ratio is graded AAA at 7:1 or above, AA at 4.5:1 or above, or Fail below that, which are the normal-text thresholds. So when you pick a brand color, you can see straight away whether white text or black text on it will pass.

To be clear about the limit: Loupe compares a color with white and with black, not with an arbitrary second color. For a pair like dark blue text on a pale yellow background, pick both colors with Loupe, copy their values and run them through the formula or a calculator. For large text and UI components, remember the lower 3:1 threshold applies, so a color graded Fail for normal text may still be fine for a big heading or an input border.

Try it

Loupe is live on the Chrome Web Store and free, with no account and no network requests. Add Loupe to Chrome, pick any color on a page, and its contrast grades against white and black appear in the popup.