What Is Accessible Color Contrast? A WCAG Guide for Designers (2026)
A plain-English WCAG 2.2 guide to accessible colour contrast, with ratios, tools, and a step-by-step checking workflow.
Most designers pick colours by instinct: what looks good on the screen in front of them. But roughly one in twelve men has some form of colour blindness, and millions of users browse in bright sunlight, on dimmed screens, or with low vision. When text does not stand out enough from its background, those users do not see a design choice. They see nothing.
Accessible colour contrast is the measurable difference in brightness between text and background, expressed as a ratio. This guide explains the WCAG rules, a step-by-step checking workflow, the current tools that make it painless, and the mistakes designers keep repeating in 2026.
Accessible colour contrast means the brightness difference between text and its background is large enough for people with low vision or colour blindness to read comfortably. Under WCAG 2.2, normal text needs a contrast ratio of at least 4.5:1, large text and UI components need at least 3:1, and the enhanced AAA level raises those to 7:1 and 4.5:1. Check every colour pair with a contrast tool, not your eyes.
What accessible colour contrast actually measures
A contrast ratio is not a guess about which colours “go well” together. It is a calculation of relative luminance: how bright one colour appears compared to another, from 1:1 (identical colours, invisible text) to 21:1 (black on white, the maximum). The formula is defined in WCAG, the Web Content Accessibility Guidelines published by the W3C, and every contrast checker on the market implements the same maths.
That matters because “looks fine to me” is unreliable: a designer with perfect vision will happily approve light grey body text a user with mild low vision cannot read at all. The ratio removes subjectivity: either the pair passes 4.5:1 or it does not. The WebAIM Contrast Checker does the calculation instantly, and Stark brings the same check inside Figma where designers work.
The WCAG contrast ratios, explained
WCAG 2.2, which became a W3C Recommendation in October 2023 and remains the current standard in November 2026, defines two conformance levels for contrast. Level AA is the target for most websites; level AAA is the enhanced target used by sites that want to go further.
| Content type | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text (below 18pt, or below 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt and above, or 14pt bold and above) | 3:1 | 4.5:1 |
| UI components and meaningful graphics (borders, icons, focus indicators) | 3:1 | Not defined |
Two points trip people up. First, the 3:1 UI rule covers elements users interact with: input borders, checkbox outlines, focus rings. Decorative borders and logos are exempt. Second, AA is a legal reality now: the European Accessibility Act, in full effect since June 2025, requires digital accessibility for consumer-facing services across the EU, and US courts treat WCAG 2.x AA as the practical standard in ADA cases.
The scale of the problem
Contrast failures are not rare edge cases. WebAIM’s 2025 analysis of the top one million home pages found low-contrast text on about 79% of pages, making it one of the most common failures detected, alongside missing alternative text and empty links. Simpler pages tend to have fewer errors, which suggests contrast problems come from design choices, not technical limits.
The business argument is straightforward. If four in five home pages fail contrast checks, passing yours is a competitive differentiator, not just a compliance exercise. And retrofitting contrast fixes into a finished product is slow and expensive, because one changed colour ripples through buttons, badges, charts, and marketing assets. Getting the palette right at the start costs almost nothing.
How to check and fix contrast, step by step
Use this workflow for a new brand palette or an audit of an existing design system.
- List every text-on-background pair you actually use. Audit the combinations in your interface, not the palette in the abstract. Body text on the page background, headings, button labels on the button colour, placeholder text in inputs, muted helper text, captions on images, and badge text on badge backgrounds. Write each pair down with its hex values.
- Test each pair against the AA ratio. Paste each pair into the WebAIM Contrast Checker or a Figma contrast plugin and record the ratio. Flag every pair below 4.5:1 for normal text or below 3:1 for large text. Treat placeholder text as normal text: the “it is not real content” excuse is one of the most common ways inaccessible pages ship.
- Fix the failures by darkening or lightening, not by squinting. For each failing pair, adjust the lighter colour darker or the darker colour lighter until the checker shows a pass, then leave a small margin above the threshold for safety. Resist the urge to keep the brand colour exact: accessibility beats brand guidelines, and most brands have a darker approved variant already. Our colour theory for beginners guide covers how to shift tones without breaking a palette.
- Test the palette under colour blindness simulators. Stark’s simulator and browser extensions like Colorblindly show how your interface looks with the most common forms of colour vision deficiency. This step catches the failures ratios cannot: red-green error states that rely on colour alone, charts distinguished only by hue, and success messages that disappear for deuteranopia users.
- Never rely on colour alone for meaning. Contrast is only half of the colour accessibility story. Pair colours with icons, labels, or patterns: errors get an icon and text, required fields get an asterisk and a label, chart series get different shapes or patterns. This single habit fixes more real-world accessibility problems than any palette tweak.
Tools that make contrast checking painless in 2026
The WebAIM Contrast Checker remains the quickest way to verify a single pair: paste two hex values, get a ratio and a pass or fail against AA and AAA. For designers working in Figma, Stark is the most established option, bundling contrast checks with colour blindness simulation and a focus-order annotator in one plugin. Figma also ships several free community contrast plugins that run against your current selection.
For engineers, the browser is the audit surface. Chrome DevTools draws a contrast line in the colour picker showing which range of shades passes, and Lighthouse accessibility audits flag failing text across a whole page. The WhoCanUse site remains useful for empathy building, showing how a colour pair looks to people with different vision types. And note the future direction: WCAG 3.0, currently in draft, proposes APCA, a newer contrast method based on perceptual research. It is not the standard yet, so design to WCAG 2.2 ratios today and keep an eye on the drafts.
Common contrast failures and how to fix them
The same five failures appear on almost every audit. Placeholder text in form fields is usually too light, because designers want it to look “secondary”. Fix it by treating placeholder as real text at 4.5:1 or, better, replace it with visible labels above the field. Our full website accessibility checklist covers this and the other form patterns that fail most often.
Muted helper text and timestamps are the second repeat offender. “Grey it out to de-emphasise” directly produces failing ratios, so choose a darker grey or de-emphasise with size instead of colour. Third, text over images fails whenever the background image varies; the fix is a scrim, a semi-transparent dark overlay behind the text. Fourth, keep disabled buttons at 3:1 minimum even though WCAG’s disabled-component exception exists. Fifth, focus indicators need 3:1 against the adjacent background, which is easy to miss when the indicator is a thin outline.
Typography interacts with contrast in ways designers underestimate. Thin weights at small sizes read as lower contrast even when the ratio passes, which is why the font pairing guide recommends 400 weight minimum for body text. If your brand typeface only looks good in a light weight, increase the size rather than accepting a borderline ratio.
Frequently Asked Questions
What is the WCAG contrast ratio requirement?
WCAG 2.2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt and above, or 14pt bold and above). Interactive components and meaningful graphics also need 3:1 against adjacent colours. Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. AA is the practical target for most sites.
How do I check colour contrast on my website?
Paste each text-and-background colour pair into the WebAIM Contrast Checker and note the ratio against AA. For whole pages, run a Lighthouse accessibility audit in Chrome DevTools or use an automated checker like axe. In design tools, Stark or a Figma contrast plugin checks the current selection. Always test the actual pairs in your interface, not the brand palette in the abstract.
Do logos and decorative images need to meet contrast ratios?
No. WCAG exempts logotypes, incidental text, and purely decorative elements from the contrast requirements. The rules apply to text that conveys information and to the UI components users interact with. That said, a logo with strong contrast still helps everyone, and any text inside a logo that doubles as the page’s main heading deserves to be readable.
What is the difference between WCAG AA and AAA?
AA is the minimum conformance level and the target most organisations aim for: 4.5:1 for normal text, 3:1 for large text. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text. AAA is worth pursuing for sites serving older audiences or people with low vision, but the W3C notes it is not applicable to all content, which is why AA remains the standard baseline.
Can I use light grey text on a white background?
Usually not for body text. Light greys like #999999 on white give a ratio around 2.8:1, well below the 4.5:1 minimum, so they fail AA. If you want a muted tone, darken the grey until the checker passes, or reduce the font size’s role and keep the colour darker. Grey text on grey backgrounds fails even faster, so check every combination, not just the obvious ones.
Conclusion
Accessible colour contrast is one of the few design problems with a right answer. The ratios are defined, the checkers are free, and the fix is usually a small nudge of a colour slider. Build contrast checking into the palette stage, simulate colour blindness before handoff, and never let colour carry meaning alone. The takeaway is simple: if every text pair on your site passes 4.5:1, you have already fixed the accessibility failure that affects four out of five home pages.
