Most UIs fail WCAG 2.2 color contrast requirements. The failure rate among audited production applications in 2026 sits at over 60% — and the most common violation is also the easiest to fix once you know the rule.
Color contrast is not a nice-to-have. It is a legal requirement under ADA and Section 508 in the US, the European Accessibility Act in the EU, and analogous legislation across dozens of jurisdictions. Beyond compliance, it is the single accessibility fix with the broadest reach: contrast issues affect users with low vision, color blindness, users in bright sunlight, and users on cheap displays. That is not an edge case — it is a substantial fraction of your audience.
This guide covers what WCAG 2.2 actually requires, what changed from 2.1, how to use a color contrast checker correctly, and the common mistakes teams make when they think they are compliant but are not. Use our free color contrast checker tool to test your specific color pairs as you read through the requirements.
Try it yourself: Free Color Contrast Checker — free, no signup, runs in your browser.
What WCAG 2.2 Requires for Color Contrast
WCAG 2.2, finalized in October 2023, retains the core contrast requirements from WCAG 2.1 but adds new success criteria for non-text elements and focus indicators. The contrast requirements apply at two conformance levels:
Level AA (minimum legal standard):
Normal text (under 18pt / 14pt bold): 4.5:1 contrast ratio
Large text (18pt+ / 14pt+ bold): 3:1 contrast ratio
UI components and graphical objects: 3:1 against adjacent colors
Focus indicators (new in 2.2): at least 3:1 contrast between focused and unfocused states
Level AAA (enhanced):
Normal text: 7:1 contrast ratio
Large text: 4.5:1 contrast ratio
The contrast ratio is calculated using the relative luminance formula defined in the WCAG spec. Relative luminance is a measure of how much light a color emits, ranging from 0 (pure black) to 1 (pure white). The ratio between the lighter color and the darker color determines contrast. A 21:1 ratio (black on white) is the maximum; 1:1 (identical colors) is the minimum.
What Changed in WCAG 2.2
WCAG 2.2 introduced three changes relevant to contrast compliance that many teams have not yet caught up with.
Success Criterion 2.4.11 — Focus Appearance (Minimum): Focus indicators must have a minimum area (the perimeter of the focus target × 2 CSS pixels) and sufficient contrast. This is new. Prior to 2.2, developers could satisfy focus requirements with a nearly invisible outline. In 2.2, the focus ring must be visually distinct at 3:1 contrast. Many custom component libraries fail this criterion out of the box.
Success Criterion 2.4.12 — Focus Appearance (Enhanced) [AAA]: At AAA, the focus indicator must enclose the entire component and have a 4.5:1 contrast ratio. Most design systems aiming for full AAA compliance need an audit of their focus state implementations.
Removal of 4.1.3 (Status Messages): Not a contrast issue directly, but a removed criterion from the final WCAG 2.2 spec that may affect how you interpret older compliance reports.
The practical takeaway: if your accessibility audit was done before October 2023, it did not evaluate 2.4.11 or 2.4.12. Your focus indicators may be out of compliance even if every other contrast check passed.
How to Use a Color Contrast Checker Correctly
The most common mistake is checking colors in isolation rather than in context. Here is the correct workflow:
Step 1: Identify the actual rendered colors. Use your browser's DevTools color picker or a screenshot tool to capture the exact computed color values, not the design system tokens. CSS variables, opacity stacking, and background blending can produce a rendered color that differs significantly from the source value. A button with color: #fff on a background: rgba(0,0,255,0.5) over a white parent renders as white on a medium blue — but the computed background-color on the element is not pure blue. Measure what renders, not what the code says.
Step 2: Enter the foreground and background hex or RGB values into the checker. Use our color contrast checker to get the ratio. The tool shows the WCAG AA and AAA pass/fail status, the relative luminance of each color, and the calculated ratio. It also shows the closest compliant color if your current pair fails.
Step 3: Check all states. A button's default state may pass. Its hover, disabled, and focus states may not. Each state is a separate color pair that must be checked independently. Disabled states have an exception in WCAG — decorative or inactive UI components are exempt — but the exemption applies only to genuinely disabled controls, not to low-priority elements where you just want a lighter color.
Step 4: Check against all possible backgrounds. If your text appears over images, gradients, or user-generated backgrounds, you must either guarantee sufficient contrast against all possible backgrounds or provide a solid text shadow or overlay. Cards displayed over variable product images are a common failure point.
Common Contrast Failures in Production UIs
Gray-on-white placeholder text. The classic failure. #999999 on white is 2.85:1 — well below the 4.5:1 requirement. Many UI frameworks use exactly this color for placeholder text. Fix: use #767676 on white (4.54:1, just passing) or darker.
Light blue links on white. A link color of #1a73e8 (Google blue) on white is 3.97:1 — it fails AA for normal text. Many developers assume brand blues are compliant because they look vivid. They often are not.
White text on medium-saturation backgrounds. Buttons using brand colors in the midrange of the value scale often fail. A medium-orange button #f57c00 with white text is 2.96:1 — failing. Moving to a darker orange #e65100 gives 4.52:1 — passing.
Focus indicators that disappear on colored backgrounds. A default browser focus ring (usually blue or black) visible on white may be invisible on a dark navy header. Any component that can receive focus on a dark background must have its focus ring validated against that background.
Automated vs Manual Contrast Testing
Automated tools catch approximately 30-40% of accessibility issues. Contrast checking is one of the areas where automation works well — ratios are mathematically deterministic — but automation has blind spots that manual checking covers.
Automated tools miss: text over gradient backgrounds (they sample a single background pixel), text over images, pseudo-element content, dynamically rendered text colors, and states only visible on hover or focus. Run automated tooling for batch coverage, then manually verify the edge cases.
Recommended workflow for a component library audit:
Run axe-core or Deque's automated scanner to identify obvious failures
Export all text/background color pairs from your design tokens
Batch-check all token pairs using the contrast checker
Manually verify interactive states (hover, focus, active, disabled) for all interactive components
Screenshot test components on all background variants
WCAG 3.0 and APCA: What Is Coming
WCAG 3.0 is still in draft as of 2026 but introduces a new contrast algorithm: APCA (Advanced Perceptual Contrast Algorithm). APCA produces different recommendations than the WCAG 2.x luminance-ratio algorithm — some color pairs that fail WCAG 2.x pass APCA, and vice versa. The key difference is that APCA accounts for spatial frequency (font size and weight) in the contrast calculation, where WCAG 2.x applies the same ratio threshold to all text regardless of size.
For 2026 compliance purposes, WCAG 2.2 is the legally enforceable standard. APCA is relevant for teams building design systems that want to future-proof their token choices. Our contrast checker includes an APCA mode for teams planning ahead.
People Also Ask
What is the minimum contrast ratio for WCAG 2.2 AA compliance?
4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphical elements also require 3:1 against adjacent colors.
Does WCAG 2.2 have new contrast requirements compared to 2.1?
WCAG 2.2 added Success Criterion 2.4.11 (Focus Appearance, Minimum) at Level AA, requiring focus indicators to have at least 3:1 contrast between focused and unfocused states and a minimum focus indicator area. This was not in WCAG 2.1.
How do I check if my website passes WCAG contrast requirements?
Use a color contrast checker tool to verify the ratio between your text color and background color. Check all interactive states (default, hover, focus, disabled) and verify text on all possible backgrounds including images and gradients.
Is white text on a colored button accessible?
It depends on the specific background color. White on dark colors (navy, dark green, dark red) typically passes. White on medium-saturation brand colors often fails. Always verify the specific hex value against white using a contrast checker.
What contrast ratio does gray placeholder text require?
Placeholder text is not exempt from contrast requirements. It must meet the same 4.5:1 ratio as normal text. The commonly used #999999 on white is only 2.85:1 and fails. Use #767676 or darker.
For more developer tools that help you build accessible, production-ready interfaces, browse the full WOWHOW tools catalog — every tool is free and requires no signup.
Originally published at wowhow.cloud
Top comments (0)