ColorCheckerColorContrast

WCAG AAA Contrast Checker

Test your colors against the strictest WCAG AAA contrast requirements (7:1 for normal text). AAA is the gold standard for web accessibility — achieve the highest level of readability and compliance with our free, browser-based checker.

How to Test WCAG AAA Contrast

1. Set your foreground (text) and background colors using the pickers or by typing hex codes.

2. Look at the AAA Normal badge — it requires 7:1. For large text (18px+ or 14px+ bold), check AAA Large which requires 4.5:1.

3. If your colors fail AAA, click any alternative suggestion below the results — each one is guaranteed to pass AAA while keeping your original hue. Click to apply it and see the updated ratio instantly.

4. Most brand palettes won't pass AAA at default sizes — use the preview tab to check at heading sizes where the 4.5:1 threshold applies, or consider AAA only for body text on high-traffic pages.

WCAG AAA Contrast Standards

LevelRatioApplies ToReal-World Scope
WCAG AA (baseline)4.5:1 / 3:1All text contentRequired by ADA, Section 508, EAA
WCAG AAA (enhanced)7:1 / 4.5:1Enhanced contrastAspirational — low vision, elderly users

AAA is not legally mandated but is strongly recommended for government sites, healthcare platforms, and any service serving older adults or users with low vision. The 7:1 ratio ensures readability even under challenging conditions like screen glare or low brightness.

Contrast Ratio

21:1
AA Normal
AA Large
AAA Normal
AAA Large

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.

Contact Us

Frequently Asked Questions

What contrast ratio is required for WCAG AAA?
WCAG AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (18px+ or 14px+ bold). This is significantly stricter than AA (which requires 4.5:1 and 3:1 respectively). AAA is the highest level of WCAG conformance.
Should I aim for WCAG AAA on my website?
AAA is aspirational — it's excellent for readability and future-proofs your design, but it's not legally required. Many brands find it difficult to achieve AAA with their existing color palette. Our recommendation: target AA as your baseline, AAA for body text and high-traffic pages, and use our AI suggestions to find AAA-compliant alternatives that stay close to your brand colors.
Why is AAA so much harder to achieve than AA?
The 7:1 ratio is mathematically demanding — you need very light colors on very dark backgrounds, or vice versa. This limits your design palette significantly. For example, a medium blue (#4A90D9) on white only achieves ~4.0:1 (fails AA), and you'd need to go to approximately #1A56A0 (a much darker blue) to hit 7:1 for AAA.
Does WCAG AAA matter for SEO?
Google doesn't directly factor WCAG AAA into rankings, but accessibility best practices (readable text, good UX, semantic structure) correlate strongly with positive ranking signals. Sites that are easier to read tend to have lower bounce rates and higher engagement — both of which do affect SEO indirectly.
Can I meet AAA with a dark mode design?
Yes — dark mode can actually make AAA easier to achieve. White text (#FFFFFF) on a dark background like #1A1A2E achieves approximately 15:1 contrast, far exceeding the 7:1 AAA threshold. However, be careful with muted foreground colors (like grayed-out secondary text) — these often fail even AA on dark backgrounds. Our tool checks all combinations in real time.

Related Tools

WCAG AA CheckerWCAG Contrast CheckerAPCA CalculatorBrand Color Checker