Colour Contrast for Accessibility: The Complete Guide (WCAG 1.4.3, 1.4.6 and 1.4.11)

Low-contrast text is the single most common accessibility failure on the web. WebAIM’s annual analysis of the top one million home pages has found it on the large majority of sites every year it has run the study. As a low vision professional, it is also the barrier I personally run into most often: pale grey text on white, placeholder text that disappears, and buttons whose borders vanish on a laptop screen in daylight.

Contrast is also one of the easiest problems to fix, because it can be measured. This guide explains what the WCAG requirements actually say, where teams usually go wrong and how to fix contrast without abandoning your brand.

Key takeaways

• Normal text needs a contrast ratio of at least 4.5:1 against its background; large text needs 3:1 (WCAG 1.4.3, Level AA).
• Icons, input borders, focus indicators and other meaningful graphics need at least 3:1 against adjacent colours (WCAG 1.4.11).
• Contrast applies to every state: hover, focus, disabled-looking-but-active, error and placeholder text.
• Text over images and gradients must be checked at its worst point, not its best.
• Fix contrast in your design tokens once, and every component inherits it.

What is a contrast ratio?

A contrast ratio compares the relative luminance (perceived brightness) of two colours. It ranges from 1:1 (identical colours) to 21:1 (black on white). The formula is defined in WCAG, so every reliable tool gives the same answer for the same pair of colours.

Some reference points:

The lesson from that table: the “elegant” light greys that appear in so many designs usually fail.

The three WCAG contrast criteria

1.4.3 Contrast (Minimum), Level AA

This is the one most laws point to:

• Normal text: at least 4.5:1.
• Large text: at least 3:1. Large means at least 18 point (24 CSS pixels) regular, or 14 point (about 18.66 CSS pixels) bold.

Exceptions include purely decorative text, text in logos, and text in inactive (truly disabled) controls.

1.4.6 Contrast (Enhanced), Level AAA

A stricter version: 7:1 for normal text and 4.5:1 for large text. It is not usually legally required, but it is a good target for body text in long-form reading, documentation and products used by older audiences.

1.4.11 Non-text Contrast, Level AA

This criterion is frequently overlooked. Visual information needed to identify user interface components and states, and meaningful graphics, need at least 3:1 against adjacent colours. In practice that covers:

• Text input borders (if the border is the only thing showing where the field is)
• Checkbox and radio button outlines
• Icons that convey meaning without a text label
• Focus indicators
• Chart lines, segments and data points that carry information

A search field with a very light grey border on white is one of the most common 1.4.11 failures: sighted users with low vision simply cannot find the field.

The most common contrast traps

These come up again and again in audits:

1. Placeholder text. Browser default placeholder grey is often below 4.5:1, and if the placeholder is acting as a label, that is a failure.
2. Text on images and gradients. White text over a photo may pass over the dark sky and fail over the bright clouds. Test the lightest point behind the text, or add a solid or semi-transparent overlay.
3. Hover and focus states. The default state passes, then the hover colour drops to 2.5:1. Every state needs checking.
4. Brand colours on buttons. Mid-tone brand colours such as orange, light green and sky blue often fail with white text. Darken the button shade or use dark text.
5. “Disabled-looking” active controls. Greying out a button to suggest “not ready yet” while it is still clickable means it must meet contrast.
6. Thin fonts. A light-weight font at 14px technically meets the same ratio as a regular weight, but it is much harder to read. Ratios assume reasonable font weights.
7. Dark mode. Pure white text on pure black can cause halation for some readers, and mid-grey text on dark grey often fails. Dark themes need their own checks.

Tools for checking contrast

You do not need to calculate anything by hand. Useful tools include:

• WebAIM Contrast Checker: paste two hex values and get the ratio and pass/fail for each level.
• TPGi Colour Contrast Analyser (CCA): a free desktop app with an eyedropper, ideal for text on images and for checking real rendered colours.
• Browser developer tools: Chrome and Firefox show the contrast ratio when you inspect a text element’s colour.
• Automated checkers such as axe DevTools and WAVE: good for catching text contrast at scale, but they cannot reliably judge text over images or non-text contrast.
• Design tool plugins for Figma and similar tools: check contrast before anything gets built.

My workflow in audits: run an automated scan to find obvious text failures across a page, then use an eyedropper tool for images, gradients, icons, borders and focus states, which is where automated tools miss things.

How to fix contrast without losing your brand

Designers sometimes worry that accessible contrast means a dull, black-and-white site. It doesn’t. Some practical approaches:

• Create accessible tints of brand colours. Keep your brand hue, adjust lightness until it meets 4.5:1 for text use. Many brands end up with a “text-safe” version of each colour.
• Use brand colours for large elements and accents, and a darker neutral for body text.
• Fix it in design tokens. Define colour roles (text-primary, text-secondary, border-input, focus-ring) with ratios already checked. Every component then inherits passing values.
• Add overlays behind text on images, or move text off the image onto a solid band.
• Don’t rely on colour alone. Even with good contrast, colour should never be the only way to show meaning (WCAG 1.4.1). Pair colours with text, icons or patterns.

Contrast and users who customise their display

Contrast requirements are a baseline, not the whole story. Many people adjust their display: Windows contrast themes, browser zoom, OS-level dark mode, or increased contrast settings. Make sure your site:

• Still shows focus indicators and borders in Windows contrast themes (don’t remove outlines and replace them with box-shadow only)
• Respects prefers-color-scheme if you offer dark mode
• Doesn’t lock text colours inside images

Focus indicators need contrast too; my guide to keyboard accessibility and focus management shows a pattern that works.

Quick contrast checklist

• Body text at least 4.5:1 (aim for 7:1 for long reading)
• Large headings at least 3:1
• Links distinguishable from surrounding text, not by colour alone
• Placeholder and helper text at least 4.5:1
• Input borders, checkboxes and icons at least 3:1
• Focus indicator at least 3:1 against adjacent colours
• Hover, active and error states checked
• Text over images checked at the lightest point
• Dark mode checked separately

Conclusion

Contrast is measurable, fixable and visible to every user who has ever squinted at a screen. Get your text and UI colours into a passing set of design tokens, check every state, and give special attention to images, placeholders and focus rings. It is one of the cheapest accessibility improvements you can make, and one of the most noticeable.

Further reading

• Accessible Forms: Labels, Errors and Validation
• What Is Digital Accessibility? A Practical Guide to WCAG, POUR and Testing
• W3C: Understanding 1.4.3 Contrast (Minimum)
• W3C: Understanding 1.4.11 Non-text Contrast