ColorCheckerColorContrast

WCAG AA Contrast Checker

Check if your text and background colors meet WCAG AA contrast standards. AA is the minimum legal compliance level — ensure your content is readable for users with visual impairments with instant, private, browser-based testing.

How to Check WCAG AA Contrast

1. Enter your text color (foreground) — use the color picker, type a hex code like #333333, or paste an RGB/HSL value.

2. Enter your background color — the tool auto-computes the contrast ratio and checks all four WCAG thresholds simultaneously.

3. Check the results: green dots mean the pair passes that level. Red means it fails — use the AI-powered suggestions below to find accessible alternatives that keep your hue.

4. For large text (18px+ bold or 24px+ regular), the AA requirement drops to just 3:1 — toggle the preview tab to see how your colors look at body vs heading sizes.

WCAG AA Contrast Requirements

Element TypeMinimum RatioWCAG CriterionExamples
Normal text (<18px)4.5:11.4.3 Contrast (Minimum)Body copy, labels, menus, buttons
Large text (≥18px or ≥14px bold)3:11.4.3 Contrast (Minimum)Headings, hero titles, pull quotes
UI components & graphics3:11.4.11 Non-Text ContrastIcons, form borders, focus rings

WCAG AA is the minimum standard referenced by the ADA, Section 508, and the European Accessibility Act (EAA). Most lawsuits and demand letters allege AA violations — making AA compliance the practical baseline for any public-facing website or app.

Contrast Ratio

12.6: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 do I need for WCAG AA?
For WCAG AA compliance, normal text (under 18px or under 14px bold) needs a contrast ratio of at least 4.5:1 against its background. Large text (18px+ or 14px+ bold) needs at least 3:1. Non-text UI components and graphical objects also need at least 3:1 under SC 1.4.11.
Is WCAG AA enough for legal compliance?
Yes, WCAG AA is the standard required by most accessibility laws including the Americans with Disabilities Act (ADA), Section 508, and the European Accessibility Act (EAA). Courts and regulators consistently reference WCAG 2.1 AA as the benchmark for reasonable accessibility.
How can I make my colors pass WCAG AA?
If your color combination fails AA, you have several options: darken the foreground color while keeping its hue, lighten or darken the background, or increase the font size to qualify for the 'large text' threshold. Our AI-powered suggestions and alternative color finder can automatically recommend passing colors that stay close to your original design.
Does every single element on my page need to pass AA?
Text content that conveys information must pass AA. Incidental text (like inactive UI elements), logotypes, and purely decorative elements are exempt. However, best practice is to make everything pass — it's easier than auditing every element individually.
How long does it take to check AA contrast across an entire website?
With our URL Contrast Checker, you can scan an entire webpage in seconds — it crawls every visible text element, computes contrast ratios, and flags violations. For large sites, scan representative page templates (homepage, article, product, checkout) rather than every page. Most teams fix contrast issues in under an hour once they know which color pairs are failing.

Related Tools

WCAG AAA CheckerWCAG Contrast CheckerText Contrast CheckerButton Contrast Checker