WCAG (Web Content Accessibility Guidelines) sets the legal and professional standard for color contrast on the web. If you're building websites, apps, or digital products, you need to meet these ratios. Here's the practical breakdown — no jargon, just the numbers and how to hit them.
The Three Contrast Rules
WCAG defines contrast requirements across three success criteria. These ratios have been consistent since WCAG 2.1 and remain unchanged in WCAG 2.2:
| Criterion | Level | What It Covers | Ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text (18pt+ or 14pt bold+) | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components & graphical objects | 3:1 |
What counts as "large text"?
Large text is defined as 18pt (24px) and above for regular weight, or 14pt (approximately 18.66px) and above for bold weight. This is important — large text only needs a 3:1 ratio for AA instead of 4.5:1.
What Changed from WCAG 2.1 to 2.2?
Here's what most articles get wrong: the core color contrast ratios did not change between WCAG 2.1 and 2.2. The numbers for text contrast (1.4.3, 1.4.6) and non-text contrast (1.4.11) are identical.
What WCAG 2.2 did add are new criteria related to focus indicators — how clearly you can see which element has keyboard focus:
2.4.11 Focus Not Obscured (Minimum) — Level AA
When a UI component receives keyboard focus, it must not be entirely hidden by other page content (like sticky headers, cookie banners, or modals).
2.4.12 Focus Not Obscured (Enhanced) — Level AAA
Stronger version: no part of the focused component can be hidden by author-created content.
2.4.13 Focus Appearance — Level AAA
The focus indicator must be at least as large as a 2-pixel-thick perimeter of the unfocused component, and must have a 3:1 contrast ratio between the focused and unfocused states.
Bottom line: if you were already meeting WCAG 2.1 contrast requirements, your text and UI contrast is still compliant. But you may need to audit your focus indicators.
Non-Text Contrast (1.4.11) — The Rule Designers Miss
Most designers know about text contrast. Fewer know about 1.4.11 Non-text Contrast, which requires a 3:1 ratio for UI components and meaningful graphics against adjacent colors. This applies to:
Must meet 3:1
- • Button borders and backgrounds
- • Form input borders
- • Checkbox and radio button outlines
- • Icons conveying information
- • Chart data points and lines
- • Focus indicators
- • Toggle switch states
Exceptions
- • Disabled/inactive components
- • Browser-default styling (unmodified)
- • Decorative graphics
- • Logos and brand marks
- • Photographs
- • Components where appearance is "essential"
5 Most Common Contrast Failures
Use at least #767676 on white for AA compliance (4.5:1). Better: #595959 or darker.
Placeholder text is still text. If users need to read it, it needs 4.5:1 contrast. Many designs use #999 on white (2.85:1) — that fails.
A light gray input on a white background needs a visible border with at least 3:1 contrast. Borderless inputs on white often fail 1.4.11.
Red text for errors is fine, but the red must meet 4.5:1 against the background. Many "error reds" on white actually fail. Also add an icon or text label — don't rely on color alone (1.4.1).
Each data series in a chart needs 3:1 contrast against the background and should be distinguishable without relying only on color. Use patterns, labels, or direct annotations.
How to Test Your Contrast
Testing contrast is straightforward. You need two things: the foreground color and the background color. Here are the tools that work:
RGBlind WCAG Contrast Checker
Enter any two colors and instantly check AA/AAA compliance for text, large text, and UI components. Free, no registration.
Check your contrast →RGBlind Color Blindness Simulator
Upload your designs or screenshots and see how they look to users with different types of color vision deficiency. Great for catching issues that contrast ratios alone won't reveal.
Try the simulator →WebAIM Contrast Checker
Enter two hex colors and get instant AA/AAA pass/fail results. The most widely used online contrast checker.
Browser DevTools
Chrome and Firefox both show contrast ratios in the element inspector. Hover over a color value to see the ratio and WCAG compliance level.
Figma Plugins
Plugins like Stark, A11y, and Contrast check contrast directly in your design files. Essential for catching issues before development.
Contrast Ratios vs. Color Blindness
Meeting WCAG contrast ratios is necessary but not sufficient for color blind users. A design can pass all contrast checks and still be unusable for someone with deuteranopia if it relies on red/green color coding without additional cues.
WCAG addresses this separately in 1.4.1 Use of Color: color must not be the only visual means of conveying information. Always pair color with text labels, icons, patterns, or position. For practical implementation, see our design guide for color blind users.
Common Questions
Do I need AA or AAA?
AA is the legal and professional minimum. Most accessibility laws (ADA, EN 301 549, Section 508) reference WCAG AA. AAA is aspirational — aim for it where possible, but AA is what you'll be measured against.
Does WCAG apply to mobile apps?
Yes. WCAG is technology-agnostic. The same contrast ratios apply to web, iOS, Android, desktop software, and any digital interface. Many app stores and legal frameworks now explicitly require WCAG compliance for mobile apps.
What about dark mode?
The same ratios apply. White text on a dark background must meet 4.5:1 for normal text. The common mistake in dark mode is using pure white (#fff) on pure black (#000) — while that's 21:1 contrast, it can cause eye strain. Consider off-white (#e0e0e0) on near-black (#1a1a1a) which is still 13:1 and more comfortable.
Are decorative elements exempt?
Yes — purely decorative graphics, logos, and brand marks are exempt from 1.4.11. But if an icon conveys meaning (like a warning icon or a navigation icon), it needs 3:1 contrast.
What happens if I fail a WCAG audit?
Depends on your jurisdiction. In the US, WCAG violations can lead to ADA lawsuits. In the EU, the European Accessibility Act (EAA) requires compliance starting June 2025. Remediation typically involves updating color values in your CSS — it's usually a quick fix once identified.
Test Your Design for Color Accessibility
Contrast ratios are just the start. See how your designs look to the 300 million people with color vision deficiency worldwide.