What Is WCAG Compliance Checker?
WCAG Compliance Checker audits your color combinations against Web Content Accessibility Guidelines. It tests foreground/background pairs for contrast ratios, reports whether each combination meets WCAG AA (4.5:1 for normal text) and AAA (7:1) standards, and flags failures so you can fix accessibility issues before launch.
How to Use This Tool
Enter your foreground and background colors using hex, RGB, or HSL values. The tool calculates the precise contrast ratio and shows pass/fail results for WCAG AA and AAA at both normal and large text sizes. Test multiple combinations, adjust colors with the built-in picker, and export a compliance report. Everything runs in your browser.
Why Use WCAG Compliance Checker?
Accessibility lawsuits are increasing and WCAG compliance is a legal requirement in many jurisdictions. This tool makes contrast checking fast and visual, so you can verify compliance during design rather than after development. It’s free, instant, and requires no browser extensions or account. For a detailed walkthrough, see our step-by-step guide.
See also: Tap target size is a separate WCAG criterion (2.5.8 in WCAG 2.2); check it with the Touch Target Checker.
Common Use Cases
Pre-launch audits on a marketing site where compliance with WCAG AA is a stakeholder requirement and someone needs to sign off on the actual numbers, not just "it looks fine." Reviewing a designer's color choices before they harden into the design system, where catching a 3.8:1 ratio at the comp stage is far cheaper than after engineering ships. Validating that brand colors passed down from a parent organization actually work in your context.
Auditing third-party components and widgets before integrating them into an accessibility-strict product. Documenting compliance evidence for a procurement questionnaire or a government RFP that requires a Voluntary Product Accessibility Template (VPAT). Spot-checking pages flagged by automated scanners to confirm a real violation rather than a false positive.
Worked example: why #777 fails and #767676 passes
WCAG contrast is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour. AA asks for at least 4.5:1 for normal text and 3:1 for large text (at least 18 pt, or 14 pt bold, roughly 24 px and 18.66 px). Grey on white shows how sharp the edge is:
| Colours | Ratio | AA normal text | AA large text |
|---|---|---|---|
| #777777 on white | 4.47:1 | Fails | Passes (≥ 3:1) |
| #767676 on white | 4.54:1 | Passes | Passes |
| #595959 on white | 7.00:1 | Passes (also AAA) | Passes |
| #949494 on white | 3.03:1 | Fails | Passes, just |
| White on #00FFD1 (bright teal) | 1.29:1 | Fails | Fails |
One shade of grey (#777777 to #767676) is the difference between failing and passing, which is why this checker compares the unrounded ratio and shows it truncated, never rounded: a ratio of 4.496:1 displays as 4.49:1 and fails, rather than appearing as 4.50:1. The last row is a common trap with bright accent colours: white text on a light, saturated background fails even when it looks vivid.
Sources, checked October 11, 2026: ratios computed with the WCAG formula; WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum); WCAG 2.2 definition of large-scale text.
Related tools
- Also useful: the Heading Hierarchy Checker to validate the H1-H6 outline structure that screen readers rely on.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools