Color contrast requirements explained simply

Light grey text on a white background looks elegant on a designer’s high-end monitor. On a budget phone at half brightness, outdoors at noon, it can be close to invisible. Color contrast requirements exist to prevent exactly that. They set a minimum difference in lightness between text or controls and whatever sits behind them. This guide explains the numbers in the Web Content Accessibility Guidelines (WCAG) without the maths lecture, so you can judge whether your site passes.

What a contrast ratio measures

WCAG compares the relative luminance, roughly the perceived brightness, of two colours. The result is written as a ratio from 1:1 to 21:1.

• 1:1 means no contrast at all, such as white text on white.
• 21:1 is the maximum, pure black on pure white.

Hue does not count, only lightness. Red text on a green background of similar brightness can score badly even though the colours look very different to many people. That matters because the most common forms of colour vision deficiency make red and green hard to tell apart.

The WCAG ratios for text

Level AA: the usual target

Most accessibility policies, including those that reference WCAG 2.1 or 2.2, aim for Level AA. Success criterion 1.4.3, Contrast (Minimum), requires:

• 4.5:1 for normal body text
• 3:1 for large text

Level AAA: the enhanced standard

Success criterion 1.4.6, Contrast (Enhanced), raises the bar to 7:1 for normal text and 4.5:1 for large text. It is a good goal for long reading content, but few organisations require it across a whole site.

What counts as large text

WCAG defines large text as at least 18 point, or at least 14 point when bold. On the web that is commonly treated as about 24 CSS pixels for regular weight and about 18.66 pixels for bold. A 16px regular paragraph is normal text and needs 4.5:1. A 28px heading can pass at 3:1.

Combinations that often fail

Some pairings look fine at a glance but miss the mark. Mid grey #777777 on white comes in just under 4.5:1, while the slightly darker #767676 is often quoted as the lightest plain grey that passes on white. White text on bright orange, yellow, light green or sky blue buttons frequently falls well short. Pale text over a photograph can pass in one spot and fail a few pixels away, because the background keeps changing.

Thin decorative fonts are a trap: they may meet the size rule yet still be hard to read because the strokes are so fine. Treat the ratios as a minimum, not a target to scrape past.

Contrast for buttons, icons and form fields

Text is not the only thing people need to see. Success criterion 1.4.11, Non-text Contrast (Level AA, added in WCAG 2.1), requires 3:1 against adjacent colours for:

• Visual boundaries of controls when they are needed to identify them, such as the border of a text input on a white page
• States of controls, such as the tick in a checkbox or the indicator showing which option is selected
• Focus indicators that show keyboard position
• Meaningful icons, such as a search magnifier or cart icon without a text label
• Parts of charts and graphs needed to understand the information

A very pale grey input border that almost disappears into the page is a frequent failure. So is an outline-style button whose thin border is too light to be noticed.

What is exempt from the rules

The requirements do not apply to everything on screen. Exemptions include:

• Logos and brand names in a logotype
• Disabled controls that cannot be used
• Purely decorative text or graphics that carry no information
• Incidental text in a photo, such as a shop sign in the background
• Controls styled entirely by the browser without author changes, for the non-text rule

Be careful with “decorative”. Placeholder text, footer links, captions, prices and small print are all real content, and they must meet the ratio.

Why contrast matters beyond disability

Low vision affects a large number of people, and it becomes more common with age. Yet good contrast helps almost everyone at some point:

• Bright sunlight on a phone screen at a market, bus stop or delivery doorstep
• Low-cost screens with limited brightness and viewing angles
• Battery saver modes that dim the display
• Tired eyes late in the day, or reading without glasses
• Projected screens in meeting rooms, where colours wash out

There is a business side too. Prices, delivery charges and “Buy now” labels that people struggle to read cause hesitation. Clear, readable text supports trust, especially on mobile where most browsing happens.

How to check contrast on your own pages

You do not need to calculate luminance by hand. A few reliable options:

1. Chrome DevTools: inspect a text element, click the colour swatch in the Styles pane, and the colour picker shows the contrast ratio with pass or fail marks for AA and AAA.
2. Lighthouse: the accessibility audit flags text elements with insufficient contrast.
3. WebAIM Contrast Checker: enter two hex codes and get the ratio and results for normal text, large text and UI components.
4. Colour Contrast Analyser from TPGi: a free desktop app with an eyedropper, handy for text over images.

Automated tools cannot always work out colours for text over gradients or photos, so check those spots by eye and with an eyedropper.

Turning the numbers into a quick audit

List the colour pairs your site actually uses: body text, headings, links, button text on button colour, placeholder text, footer text, error messages, input borders and icons. Test each pair once and note the ratio. Anything below its target goes on a fix list. If the failures involve your core brand colours, the fix is usually a matter of adjusting shades and roles rather than a redesign, and our website design team can help you work out the details.

Frequently asked questions

Is 4.5:1 contrast required for placeholder text?

Yes, if the placeholder conveys information. Many default placeholder greys fall short, which is another reason not to rely on placeholders instead of visible labels.

Do links need contrast against surrounding text?

If links are identified by colour alone, WCAG techniques suggest a 3:1 difference from the surrounding text plus another cue on hover or focus. An underline is the simpler solution.

Does dark mode need to meet the same ratios?

Yes. The ratios apply to whatever colours are displayed, so test the dark theme separately. Very bright text on pure black can also feel harsh, so moderate greys often work well.

Is WCAG 3 changing how contrast is measured?

Drafts of WCAG 3 have explored a different contrast method, but it is still a work in progress. WCAG 2.x ratios remain the standard to follow today.