Color Contrast: 4 Simple Ways to Pass WCAG in 2026

Color contrast is where a lot of good-looking design quietly fails. The brand palette is approved, the mockups look elegant, and then someone runs an accessibility check and half the interface is unreadable to a substantial number of people. It is fixable, and fixing it does not require abandoning the palette.

Written September 2026. Ratios below follow WCAG 2.2, which is the standard referenced by accessibility law in the UK, EU and US.

The numbers you actually need

Contrast is expressed as a ratio between the lighter and darker of two colors, from 1:1 (identical) to 21:1 (black on white). The thresholds are:

• 4.5:1 for normal body text at AA, the level nearly all legislation and procurement requires.
• 3:1 for large text, meaning 24px and above, or 18.66px and above if bold.
• 3:1 for meaningful non-text elements: icons that carry information, input borders, focus rings, chart segments you must distinguish.
• 7:1 for body text at AAA, which is worth targeting for long reading but is not usually mandatory.

Note what is not on that list. Decorative graphics, disabled controls and logos are exempt. That exemption is narrower than people hope: if a user needs to read it or interact with it, it counts.

Why palettes fail, and the fix that keeps them

Most brand palettes were designed for print, or for a logo on white. The mid-tone brand color that looks confident on a business card is usually the problem: mid-tones sit too close to both white and dark backgrounds, so they fail against both.

The fix is almost never to change the brand color. It is to build a scale from it. Take the brand hue and generate a range of lightness steps, then use the mid-tone for large display elements where 3:1 applies, and a darker step for body text and small UI where 4.5:1 applies. The brand stays recognisable because the hue is unchanged, and the interface becomes readable because the lightness does the work.

This is the same discipline behind a proper design token system: one brand hue, many roles, each role tested where it is used. Our guide to brand identity elements covers how those roles get defined in the first place.

Do not judge color contrast by eye

Perceived contrast and calculated contrast diverge badly, particularly for yellows, oranges and light greens, which read as vivid but score poorly against white. Two colors can look strikingly different and still fail. Measure, always.

A practical workflow

1. Define the pairs you actually ship: body text on background, body on surface, link on background, button label on button, placeholder on input. This is usually a list of eight to fifteen pairs, not hundreds.
2. Test each pair against the threshold that applies to its size and role.
3. Fix failures by adjusting lightness first, saturation second, hue last. Hue changes are what make a brand stop looking like itself.
4. Check the same pairs in dark mode. A palette that passes in light frequently fails inverted, because the relationship is not symmetrical.
5. Record the approved pairs as tokens so the next person does not have to rediscover them.

Do not rely on color alone

Contrast is only half of the accessibility question. Roughly one in twelve men has some form of color vision deficiency, so any information carried purely by hue is invisible to a meaningful share of your audience.

• Errors need an icon or text, not just a red border.
• Links in body copy need underlines or another non-color cue. A colored word among black words is a color-only signal.
• Charts need labels, patterns or direct annotation, not a colored key alone. Red and green adjacent segments are the classic failure.
• Status indicators need shape or text. A green dot and a red dot are the same dot to a lot of people.

Tools for checking color contrast

Browser developer tools in Chrome and Firefox show the contrast ratio when you inspect text, which is the fastest check while building. The WebAIM Contrast Checker is the standard reference for individual pairs. Figma and other design tools have contrast plugins that check a whole frame at once.

Automated checks catch roughly a third of accessibility problems, which is worth having and is not the same as being accessible. Contrast happens to be one of the things automation catches reliably, so there is no excuse for shipping a failure here. If your work goes to print as well as screen, note that these ratios are a screen standard: our notes on CMYK versus RGB cover why the same color behaves differently once it is ink.

The places contrast quietly fails

Certain patterns fail so reliably that they are worth checking first on any existing interface. In review after review, the same handful come up.

• Placeholder text in form fields. Almost always too light, and often carrying instructions the user needs. If it matters, it is not decoration.
• Text over photographs. Contrast changes across the image, so a headline that passes over the dark corner fails over the bright middle. A scrim or a solid panel behind the text is the reliable fix.
• Disabled states. Technically exempt, genuinely confusing. Exempt does not mean unreadable is fine.
• Focus rings. These need 3:1 against the background, and the default browser ring is often replaced with something prettier and weaker. Keyboard users depend on it.
• Brand color on brand color. A button in the brand tint with a label in the brand shade looks cohesive and frequently fails.
• Charts and data. Adjacent segments in similar tints, with a colored key as the only way to tell them apart.

Getting a failing palette over the line

When a pair fails and the color cannot change, you have three moves before anyone has to renegotiate the brand. Increase the text size, since 24px only needs 3:1 rather than 4.5:1. Add weight, because bold text at 18.66px also qualifies as large. Or change the background rather than the text, which is usually the least contentious edit and often the one nobody thought of.

Common questions

What contrast ratio do I need for body text? 4.5:1 against its background for WCAG AA, which is the level most legislation and public sector procurement requires. Large text, meaning 24px or 18.66px bold and above, needs 3:1.

Do logos need to meet contrast requirements? No. Logos and purely decorative graphics are explicitly exempt under WCAG. Anything a user must read or interact with is not exempt, which includes wordmarks used as page headings.

Why does my palette pass in light mode but fail in dark mode? Contrast is not symmetrical. A mid-tone that sits far from white may sit close to a dark surface. Dark mode needs its own tested pairs rather than an inversion of the light ones.

Is color contrast a legal requirement? In many contexts yes. Public sector bodies in the UK and EU are required to meet WCAG AA, and equivalent obligations apply widely elsewhere, so it is usually a compliance question rather than a design preference.

Sources and further reading

Where the figures and rules above come from, so you can check them:

• The contrast requirements themselves: W3C WCAG 2.2
• Checking individual color pairs: WebAIM Contrast Checker

Exporting your designs? Our guide to PNG vs JPG explains which format keeps text and colours sharp.