Color Contrast Checker for WCAG 2.2: Accessibility Compliance Guide 2026

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:

1. Run axe-core or Deque's automated scanner to identify obvious failures
2. Export all text/background color pairs from your design tokens
3. Batch-check all token pairs using the contrast checker
4. Manually verify interactive states (hover, focus, active, disabled) for all interactive components
5. 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.