Color Contrast Accessibility: WCAG Ratios and How to Fix Them

Color contrast accessibility is about making sure text, icons and controls stand out clearly from their background so that everyone can read them, including people with low vision, colour blindness, older eyes or a phone screen in bright sunlight. WCAG measures this with a contrast ratio from 1:1 (no contrast) to 21:1 (black on white). For most text you need at least 4.5:1, and for large text at least 3:1. Low contrast is one of the most common accessibility failures on the web, and it is also one of the easiest to fix.

This guide covers the exact WCAG requirements, how to test, how to fix failing colours without wrecking your brand, and how to handle dark mode and colour blindness.

WCAG color contrast requirements

Four WCAG success criteria deal with colour and contrast.

Most laws and policies point to Level AA, so 1.4.3, 1.4.11 and 1.4.1 are the ones to meet. Level AAA is a good target for long-form reading, but it is rarely required across a whole site.

What counts as large text?

WCAG defines large text as at least 18 point (about 24px) regular weight, or at least 14 point bold (about 18.66px). Everything smaller is "normal" text and needs 4.5:1. Body copy at 16px always counts as normal text, even if it is bold.

What does non-text contrast cover?

Criterion 1.4.11 requires a 3:1 ratio against adjacent colours for:

• Form field borders that identify the field, such as a text input outline.
• Buttons whose boundary is the only thing that identifies them.
• Icons that convey meaning, like a search or warning icon.
• Focus indicators and states such as checked checkboxes or selected toggles.
• Chart elements such as lines, bars and pie slices needed to understand the data.

A pale grey input border on a white background is a classic 1.4.11 failure.

Use of colour (1.4.1)

Even with perfect contrast, colour must not be the only way information is shown. Common examples:

• Links in body text distinguished only by colour. Add an underline.
• Form errors shown only by turning a border red. Add an icon and an error message.
• Charts where series are told apart only by colour. Add labels, patterns or direct annotations.
• "Required fields are in red." Use an asterisk and explain it, or write "required".

What is exempt?

Logos and brand names, purely decorative text, text in inactive (disabled) controls, and incidental text in photos are exempt from the contrast requirements. That said, disabled buttons that are unreadable can still confuse users, so don't make them invisible.

Contrast ratio examples

Here are some real colour pairs on a white background (#FFFFFF):

Notice how close the line is: #767676 just passes, while the slightly lighter #777777 just fails. Always test the exact values.

How to test color contrast accessibility

Single colour pairs

• WebAIM Contrast Checker — paste two hex values and see the ratio and pass/fail results.
• Colour Contrast Analyser (CCA) by TPGi — a free desktop app with an eyedropper, useful for images and gradients.
• Browser DevTools — Chrome, Edge and Firefox show contrast information when you inspect text colour.
• Design tools — Figma and other tools have contrast plugins so you can check before handoff.

Whole pages

Checking pair by pair is slow on a real site with dozens of states. An automated scan catches failing text across the page. The Openwise free accessibility checker runs in a real browser, so it measures the colours actually rendered, then lists failing elements with fix tips.

Automated tools struggle with text over images, gradients and hover or focus states, so check those manually.

Fixing contrast without ruining your design

Designers often worry that accessible colours mean a dull site. They don't. A few practical approaches:

1. Keep the brand colour, adjust the shade. Darken a light brand blue a few steps for text and buttons, and keep the original for large decorative areas, illustrations and backgrounds.
2. Build an accessible palette. For each brand colour, define tints and shades and note which ones pass on white and on your dark background. Put the ratios in your design system so nobody has to guess.
3. Swap text colour, not background. A bright yellow button often fails with white text but passes with near-black text.
4. Fix grey text first. Light grey placeholder text, captions, footers and "secondary" text are the most common failures. Moving from #999999 to #767676 or darker usually solves it.
5. Add overlays to text on images. Use a semi-transparent dark layer behind white text, or put the text in a solid box.
6. Mind the states. Hover, focus, visited, disabled and error states all need checking, not just the default.
7. Give inputs and buttons visible boundaries. A border with 3:1 contrast keeps forms usable and meets 1.4.11. See our accessible forms guide for more.
8. Make focus outlines strong. A thick outline in a contrasting colour helps keyboard users; our keyboard accessibility guide covers focus styles.

Dark mode and contrast

Dark themes need their own testing — don't assume that inverting colours works.

• Avoid pure white on pure black for long text; very high contrast can cause halation for some readers. Off-white on dark grey, such as #E0E0E0 on #121212 (about 14:1), still easily passes.
• Re-check brand colours. A dark blue that passes on white will probably fail on a dark background. You may need a lighter variant for dark mode.
• Test shadows and borders. Elevation shown with shadows can disappear on dark backgrounds, so use lighter surfaces or borders instead.
• Respect user preference with the prefers-color-scheme media query, and also respect a user's choice if they switch manually.

Designing for colour blindness

Colour vision deficiency affects how people tell certain hues apart, most commonly red and green. Contrast ratios measure lightness difference, which helps, but you should also:

• Never rely on red versus green alone for status, such as success and error.
• Use icons, text labels and patterns alongside colour.
• Preview designs with colour blindness simulators, available in Chrome DevTools rendering settings and in many design tools.

Visitor-side tools can help too. The Openwise widget lets visitors switch on high contrast, dark mode, invert colours or adjust saturation. These are useful personal adjustments, but they don't replace accessible default colours — your site should pass contrast before any widget is turned on. More on that in the truth about accessibility widgets.

Frequently asked questions

What is a good color contrast ratio for accessibility?

For WCAG Level AA, normal text needs at least 4.5:1 and large text at least 3:1. User interface components and meaningful graphics need 3:1. For Level AAA, normal text needs 7:1 and large text 4.5:1.

What font size counts as large text in WCAG?

Large text is at least 18 point (about 24px) at regular weight, or at least 14 point (about 18.66px) when bold. Text smaller than that must meet the 4.5:1 ratio at Level AA.

Do logos need to meet contrast requirements?

No. Text that is part of a logo or brand name is exempt from WCAG contrast requirements. However, it is still good practice to make your logo legible, especially in the header where users rely on it.

Does placeholder text need to meet contrast requirements?

Yes. Placeholder text is still text that users need to read, so it should meet 4.5:1. Better still, don't use placeholders as labels at all; use a visible label above the field.

Is 4.5:1 contrast enough for dark mode?

The same WCAG ratios apply in dark mode. Meeting 4.5:1 is the minimum, but check every colour again on the dark background, as brand colours that pass on white often fail on dark surfaces.

Conclusion

Color contrast accessibility is measurable, fixable and good design. Meet 4.5:1 for normal text, 3:1 for large text and UI components, never rely on colour alone, and test dark mode separately. Then make it part of your WCAG checklist so it stays fixed. Find your failing colours in seconds with our free accessibility checker.