Free WCAG Color Contrast Checker Online
Test foreground and background color pairs against WCAG 2.2 AA and AAA accessibility standards. Instant ratio calculation, live preview, and pass/fail verdicts for every text size.
Contrast Ratio
15.43:1
AA Normal Text
≥ 4.5 · 14pt regular or smaller
AA Large Text
≥ 3.0 · 18pt regular or 14pt bold+
AAA Normal Text
≥ 7.0 · Highest accessibility level
AAA Large Text
≥ 4.5 · Highest accessibility level
UI Components & Graphics
≥ 3.0 · WCAG 1.4.11 (icons, borders, focus)
Live Preview
Large heading sample
Subheading sample text
Regular paragraph text. This is what 16px body copy looks like with the selected foreground on the selected background.
Small caption text — 14px regular.
Quick Presets
WCAG 2.2 Compliance
Check both AA (≥4.5:1) and AAA (≥7.0:1) thresholds for normal and large text, plus the 3:1 rule for UI components and graphical objects.
Live Side-By-Side Preview
See exactly how your color pair renders on real headings, paragraphs, captions, and buttons before shipping it to production.
Native HEX + Picker
Type a HEX value directly, paste from your design tokens, or use the native color picker. Short HEX (#abc) is auto-expanded.
100% Client-Side
No upload, no API call, no tracking. The contrast formula runs entirely in your browser — your color tokens never leave your machine.
The Definitive WCAG 2.2 Color Contrast Checker for Accessible Design
Accessibility is no longer optional. Under regulations like the European Accessibility Act (enforced June 2025), the ADA Title III, and Section 508, color contrast failures are now legally actionable. Our Free Online WCAG Color Contrast Checker gives designers, frontend engineers, and product managers a frictionless way to validate every color pair in their design system against the official W3C formula — directly in the browser, with zero data leaving the device.
Pair this tool with our Color Converter to translate failing tokens into accessible HSL adjustments, and the Color Palette Generator to rebuild your scale from a fully-compliant foundation.
WCAG 2.2 Contrast Thresholds Explained
| Conformance Level | Normal Text | Large Text | UI & Graphics |
|---|---|---|---|
| WCAG AA (Required) | ≥ 4.5 : 1 | ≥ 3.0 : 1 | ≥ 3.0 : 1 |
| WCAG AAA (Enhanced) | ≥ 7.0 : 1 | ≥ 4.5 : 1 | ≥ 3.0 : 1 |
Large text = 18pt (24px) regular, or 14pt (18.66px) bold and above. WCAG 1.4.11 covers non-text contrast for icons, form borders, focus indicators, and chart elements.
Common Color Contrast Failures (and How to Fix Them)
Mid-Tone Gray on White
A common pattern: #999999 on #FFFFFF is only 2.85:1 — a failure at every level. Darken to #767676 for the AA minimum.
Brand Color on Brand Color
Tone-on-tone hero cards may pass visually but fail technically. Always validate the primary CTA text against its filled background, not just the page background.
Placeholder Text in Inputs
Default browser placeholder colors (typically #A9A9A9) fall below 3:1 on white. Override with a darker neutral and add a visible label.
Focus Rings Below 3:1
Default browser focus styles can fall short of WCAG 1.4.11. Build a custom 2px ring with a high-contrast color from your accessible palette.
A Reproducible Accessibility-First Color Workflow
Generate a Palette
Start with a harmonious scale from our Color Palette Generator.
Validate Every Pair
Run each text/background pair through this checker — surface tokens are first-class citizens.
Convert Failing Tokens
Use the Color Converter to nudge lightness in HSL without losing hue.
Lock in the Design System
Commit accessible tokens to your design tokens file and validate the rendered CSS with our CSS Beautifier.