WCAG Colour Contrast Checker — AA & AAA Compliance
Check WCAG 2.1 AA and AAA contrast ratios for text, large text, and UI components instantly. Enter foreground and background colours to see pass/fail badges, a live text preview in four sizes, and a CSS snippet — all running in your browser with no data sent to any server. Once you have your colours confirmed, use the generated CSS alongside your HTML markup or plug the values straight into your meta tags for consistent branding across your site.
Text Preview
How to Use the Contrast Checker
- Enter the Foreground (text) colour as a hex code or use the colour picker.
- Enter the Background colour the same way.
- The contrast ratio and five WCAG pass/fail badges update instantly.
- Check the Text Preview panel to see how your colour pair looks at 12px, 16px, 24px bold, and 32px bold.
- If the pair fails, click Fix for Me to automatically adjust the foreground to the nearest passing shade.
- Click Copy CSS Snippet to copy the ready-to-use CSS for your project.
Key Features
- WCAG 2.1 contrast ratio calculation — uses the official relative luminance formula.
- Five PASS/FAIL badges — Normal AA, Normal AAA, Large AA, Large AAA, and UI Components AA.
- Live text preview — see your colour pair rendered at four font sizes before using it.
- Auto-fix — "Fix for Me" adjusts the foreground colour to meet AA requirements automatically.
- CSS snippet copy — one-click copy of ready-to-paste color and background-color CSS.
- Swap colours — reverse foreground and background in one click to check both directions.
- Privacy-first — all calculation runs in your browser; no data is sent to any server.
Use Cases
Check Text Colour Contrast for WCAG AA Compliance
Most organisations and government websites are legally required to meet WCAG 2.1 Level AA under the ADA (US), EN 301 549 (EU), and equivalent laws worldwide. This tool lets you verify any text/background pair instantly and fix failing combinations with one click.
Verify Button and Icon Colour Accessibility
WCAG 2.1 Success Criterion 1.4.11 requires non-text content — including button borders, icons, and focus indicators — to have a contrast ratio of at least 3:1 against adjacent colours. The UI Components badge in this tool checks exactly that threshold.
Test Dark Mode Colour Pairs
Dark mode designs often fail accessibility checks because light-grey text on dark-grey backgrounds can fall below the 4.5:1 minimum. Enter your dark mode foreground and background colours to confirm they pass before shipping to production.
Find the Safest Grey Text for Minimalist Web Design
Light grey text on white is one of the most common accessibility failures in modern UI design. #999999 on #ffffff produces only 2.85:1 — well below the AA minimum. Use this checker to find the darkest grey that still feels light enough for your aesthetic while passing WCAG AA.
Audit a Design System Colour Palette
When building a design system, use this tool to pre-validate every text/background combination in your palette before publishing. Document the contrast ratios alongside your colour tokens so developers can select accessible pairs without manual checking. After finalising your palette, resize images to the correct dimensions and run them through image compression before embedding them in your design system documentation.
FAQ's
WCAG 2.1 Level AA — the minimum legal standard in most jurisdictions — requires at least 4.5:1 for normal body text (below 18pt or 14pt bold). Level AAA requires 7:1. Most well-designed websites target at least AA compliance.
WCAG defines large text as at least 18 point (approximately 24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. Large text requires a lower contrast ratio (3:1 for AA, 4.5:1 for AAA) because it is more legible at lower contrast.
Indirectly, yes. Poor contrast increases bounce rates and reduces time on page — engagement signals Google uses for quality assessment. Google's helpful content guidelines also consider accessibility as a factor in page quality evaluation.
The luminance formula (L = 0.2126R + 0.7152G + 0.0722B) reflects human eye sensitivity. Photoreceptors in the eye are most sensitive to green wavelengths, less so to red, and least to blue. This is why pure green appears brighter than pure red or blue at the same pixel intensity.
Light grey on white is one of the most common accessibility failures. #999999 on #ffffff gives only 2.85:1 — failing AA. You need at least #767676 on #ffffff (4.54:1) to pass AA. Use this checker to find the minimum safe shade for your design.
If your colour pair fails WCAG AA for normal text (below 4.5:1), clicking "Fix for Me" automatically adjusts the foreground colour — darkening it for light backgrounds or lightening it for dark backgrounds — until the pair reaches exactly 4.5:1 with the minimum possible change.
WCAG 2.1 SC 1.4.11 (Non-text Contrast) requires a minimum contrast ratio of 3:1 for graphical objects and UI components — including button borders, focus rings, form input outlines, and icons — against adjacent colours. The "UI Components AA" badge checks this threshold.
Yes. This tool implements the exact WCAG 2.1 relative luminance formula with proper gamma correction (linearisation) for each RGB channel before combining with the 0.2126R + 0.7152G + 0.0722B weightings. The results match those of axe, WAVE, and other professional accessibility audit tools.