Accessible color contrast: the ratio WCAG requires

The thresholds that matter

The Web Content Accessibility Guidelines (WCAG) from the W3C measure contrast as a ratio between the luminance of the lighter colour and that of the darker one, from 1:1 (the same colour) to 21:1 (black on white). For level AA, the one usually required, they ask for:

The W3C treats "large text" as 18 point or larger, or 14 point or larger if bold. On the web, 18 point is about 24 CSS pixels and 14 point bold is about 18.7 CSS pixels. Text in an inactive component, purely decorative text and text that is part of a logo are exempt.

How contrast is calculated

The formula is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker one. Relative luminance is calculated from a colour's red, green and blue components after correcting for the sRGB gamma curve, weighting green far more than blue (0.2126 for red, 0.7152 for green and 0.0722 for blue), because the eye is more sensitive to green. That is why two colours that "look" equally dark can have very different contrast.

You do not have to work it out by hand: the contrast checker gives you the ratio of any two colours instantly and tells you whether it passes AA and AAA for normal text, large text and components.

Real colors on a white background

These ratios are calculated with the WCAG formula, on a white background (#ffffff):

The line for grays on white sits at #767676: a gray just one step lighter (#777777) already fails. That is why the "secondary text" gray people reach for almost by instinct, #999999, does not even reach 3:1.

Brand colours behave the same way, and that is where it surprises people most. The blue #1A73E8 on white gives 4.51:1 and passes by a hair; the red #E53935 gives 4.23:1 and fails; a very common teal such as #0F9E8E gives 3.33:1, which only works for large text or icons. The same hue a shade darker, #0B7A6E, rises to 5.22:1.

Text on a color: buttons and colored backgrounds

Contrast is measured between the text and the background colour directly behind it, so a coloured button needs its own check. White on #0F9E8E is 3.33:1, which means a button of that colour with white normal-size text fails AA. White on pure red (#FF0000) gives 4.0:1, whereas black on the same red gives 5.25:1: sometimes the fix is not darkening the background but changing the text colour.

Backgrounds with images or gradients are harder, because contrast changes at every point. The safe approach is to put a semi-transparent dark or light layer between the image and the text, and check the worst point.

Not only text: icons, borders and states

Success criterion 1.4.11 (Non-text Contrast, level AA) asks for at least 3:1 against adjacent colours for user interface components and the graphics needed to understand content. In practice: a form field's border, an icon with no label, the "selected" or "focused" state of a button and the bars of a chart must stand out from the background by that minimum. A field with a very pale gray border on white is one of the most common failures.

Contrast is not everything

• Do not rely on colour alone. If an error is only signalled by red text, someone with colour blindness may miss it. Add an icon or text. The colour blindness simulator shows how an image or palette looks with the most common types.
• Mind the size and weight of the letters. Thin 12-pixel text needs more real contrast than bold 20-pixel text, even if both pass the metric.
• Test in real light. A screen in strong ambient light, or with the brightness turned down, makes marginal contrasts unreadable.

If you are designing a palette from scratch, the accessible palette generator starts from the colours you choose and suggests combinations that already meet the contrast requirements.

Is it mandatory?

It depends who you are. In the European Union, Directive 2016/2102 requires public-sector websites and apps to be accessible, and it points to the EN 301 549 standard, which includes WCAG 2.1 level AA verbatim for web content. The European Accessibility Act (Directive 2019/882) extends accessibility requirements to certain private-sector products and services too, with obligations applying from 28 June 2025. If you have a legal question about your case, ask a professional: this guide explains the technical criteria and is not legal advice.

Contrast also matters outside your page: the favicon has to read on light and dark tabs, and the image shown when you share a link on social cards.

Sources and further reading

• W3C: WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum)
• W3C: WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced)
• W3C: WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast
• W3C WAI: accessibility policies in the European Union

Figures checked on 3 October 2026.