WCAG 2.2 was published in October 2023. For contrast specifically, the core ratios from WCAG 2.1 didn’t change — but the scope expanded to cover UI components and graphical objects, and a new Focus Appearance criterion was added that has contrast implications. Here’s what actually changed and what you need to do about it.
What Changed from WCAG 2.1 to 2.2
WCAG 2.2 added nine new success criteria and deprecated one (4.1.1 Parsing, removed because modern browsers handle malformed HTML gracefully). The changes most relevant to contrast:
New: 2.4.11 Focus Appearance (AA) and 2.4.12 Focus Appearance Enhanced (AAA)
This is the substantive new addition for visual design. In WCAG 2.1, there were no numeric contrast requirements for focus indicators — just a vague requirement that keyboard focus be visible. WCAG 2.2 AA now specifies:
- The focus indicator must have an area of at least the perimeter of the unfocused component × 2 CSS pixels
- The focus indicator must have a contrast ratio of at least 3:1 between the focused and unfocused states
- The focus indicator must not be entirely hidden by author-created content
In practice, this means: if you’ve styled away browser default focus outlines (which many sites do for aesthetic reasons), your custom focus indicator now needs to pass a measurable contrast test. The default blue or black browser outlines typically pass. Custom focus rings — especially light-colored ones on light backgrounds — often don’t.
What Didn’t Change
The core text contrast requirements carried forward unchanged from WCAG 2.1:
- 1.4.3 Contrast (Minimum) — AA level text contrast: still 4.5:1 for normal text, 3:1 for large text
- 1.4.6 Contrast (Enhanced) — AAA level: still 7:1 for normal text, 4.5:1 for large text
- 1.4.11 Non-text Contrast — UI components and graphical objects: still 3:1 against adjacent colors
AA vs AAA: Which Applies to You
Most legal requirements and accessibility audits reference WCAG 2.1/2.2 Level AA. AAA is the highest conformance level and is generally not required by law, but it’s a useful target for high-traffic public services, healthcare, and financial products.
| Content type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18pt / 24px regular, or under 14pt / ~19px bold) | 4.5:1 | 7:1 |
| Large text (18pt / 24px+ regular, or 14pt / ~19px+ bold) | 3:1 | 4.5:1 |
| UI components (buttons, form inputs, checkboxes) | 3:1 | N/A |
| Graphical objects (icons, charts, informational graphics) | 3:1 | N/A |
| Focus indicators (WCAG 2.2 new requirement) | 3:1 | 4.5:1 |
| Decorative elements, logos, inactive UI components | Exempt | Exempt |
Common Contrast Failures
Light grey text on white backgrounds. #767676 on white (#ffffff) is the commonly cited minimum grey that passes AA at exactly 4.54:1 for normal text. Anything lighter fails. Many design systems use greys like #999999 or #aaaaaa for secondary text, both of which fail at 2.85:1 and 2.32:1 respectively.
Placeholder text. HTML placeholder attribute text is typically rendered at reduced opacity or lighter color to visually distinguish it from entered values. This is fine — placeholder text is exempt from contrast requirements under WCAG because it’s considered decorative. But if you’re using placeholder-styled text as a permanent label (no visible label, just placeholder text), that’s a different failure (missing label, not just contrast).
Disabled state contrast. Disabled form controls are explicitly exempt from contrast requirements under WCAG — the rationale is that users need to understand the control is unavailable, and low contrast communicates that. Be careful here: if you’re making something appear “disabled” that’s still functionally interactive, you don’t get the exemption.
Text on images or gradients. The contrast requirement applies between the text and the background directly behind each character. For text over a gradient, the worst-case point (where contrast is lowest) must still pass. Many hero sections with text over a photo fail in corners or areas where the image is light.
Icon-only buttons. A button that’s only an icon (no text label) has its icon treated as a graphical object requiring 3:1 contrast. A grey magnifying glass icon on a white background may fail. Add a visible text label or ensure the icon color passes 3:1 against its background.
Focus outline removed with outline: none. Still common in CSS resets. Under WCAG 2.2, removing the focus outline without providing an accessible replacement fails 2.4.11. The fix is either restoring the browser default (outline: revert) or implementing a custom focus style that passes 3:1 contrast.
How to Test Contrast
The free Color Contrast Checker on WebTools.engineer calculates the WCAG contrast ratio between any two colors and tells you which AA and AAA criteria it passes or fails. Enter your foreground and background hex codes and get an instant result.
For testing a live page rather than specific color values, browser DevTools are your best option:
- Chrome DevTools — inspect any text element, click the color swatch in the Styles panel, and the color picker shows the contrast ratio against the detected background and passes/fails indicators for AA and AAA
- Firefox Accessibility panel — the Accessibility tab in DevTools shows contrast ratios for inspected elements and can run an automated check across the page
- axe DevTools browser extension — automated WCAG audit that catches most contrast failures across the whole page in one run
Frequently Asked Questions
Does WCAG apply to my website?
WCAG is referenced by law in many jurisdictions. In the US, the ADA and Section 508 apply WCAG 2.1 AA to federal agencies and, increasingly via case law, to commercial websites. In the EU, the European Accessibility Act (EAA) applies to many commercial services from 2025. Private sector websites in most countries face increasing legal risk from non-compliance, particularly for e-commerce and public-facing services.
What’s the penalty for WCAG non-compliance?
In the US, ADA-related web accessibility lawsuits have resulted in settlements ranging from $25,000 to over $500,000. The legal risk is highest for e-commerce sites, healthcare providers, and businesses that serve the public. In the EU, EAA non-compliance can result in fines and mandatory remediation orders. Beyond legal risk, inaccessible sites exclude a significant portion of users — roughly 15% of the population has some form of disability.
Does dark mode need separate contrast testing?
Yes. Dark mode inverts the color relationship between text and background, which means a color combination that passes in light mode may fail in dark mode and vice versa. If your site supports a dark mode (either via CSS prefers-color-scheme or a manual toggle), you need to test contrast for both color schemes independently.
What is “large text” under WCAG?
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight. Large text has a lower contrast requirement (3:1 for AA) because it’s more readable at lower contrast ratios than small text.
Related Tools
- Color Contrast Checker — Test any foreground/background color pair against WCAG AA and AAA requirements
- Color Palette Generator — Generate accessible color palettes with built-in contrast scoring
- Schema Markup Generator — Add structured data to accessibility-focused content pages