Free Color Contrast Checker — WCAG AA/AAA Accessibility Compliance

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. An estimated 2.2 billion people globally have a near or distance vision impairment. When your website's text does not have enough contrast against its background, a significant portion of your audience literally cannot read it.

Our free color contrast checker tests any foreground-background color combination against WCAG 2.1 standards. Enter your colors, see the exact contrast ratio, and know immediately whether you pass AA, AAA, or fail. No signup, no limits, instant results.

What Color Contrast Ratios Mean

A contrast ratio measures the difference in luminance (perceived brightness) between two colors. The ratio is expressed as X:1, where 1:1 means no contrast (identical colors) and 21:1 means maximum contrast (pure black on pure white).

The human eye needs a certain minimum contrast to distinguish text from its background comfortably. In ideal conditions — perfect vision, clean screen, good lighting — you can read low-contrast text with effort. But real conditions include older eyes, screen glare, mobile phones in sunlight, and dirty screens. Contrast requirements exist to ensure readability across real-world conditions.

The contrast ratio formula uses relative luminance values of each color, accounting for how the human eye perceives different wavelengths. Green light appears brighter to us than blue light at the same physical intensity, so the formula weights color channels differently: 0.2126 for red, 0.7152 for green, 0.0722 for blue.

WCAG AA vs. AAA — Which Do You Need?

Level	Normal Text	Large Text	Who Should Target This
AA	4.5:1	3:1	All websites and applications
AAA	7:1	4.5:1	Government, healthcare, high-accessibility needs

"Large text" means 18pt (24px) and above, or 14pt (18.66px) bold and above. Everything smaller is "normal text" and needs the higher contrast ratio.

AA is the standard target for most organizations. It provides good readability for the vast majority of users, including those with moderately impaired vision. Most accessibility lawsuits reference WCAG AA as the expected standard.

AAA is the gold standard — recommended for government websites, healthcare portals, banking applications, and any content where readability is critical. Meeting AAA everywhere is difficult (especially with brand colors), but meeting it for body text and critical UI elements is achievable and worthwhile.

Sell Custom Apparel — We Handle Printing & Free Shipping

Legal Requirements — ADA and Section 508

Web accessibility is not just good practice — it carries legal weight:

• ADA (Americans with Disabilities Act): Courts have ruled that websites of businesses open to the public are "places of public accommodation" under the ADA. Over 4,000 web accessibility lawsuits were filed in 2025 alone. Targets include e-commerce sites, restaurants, healthcare providers, and SaaS companies.
• Section 508: Federal agencies and their contractors must meet WCAG 2.0 AA standards. This applies to all digital content — websites, documents, software, and multimedia.
• European Accessibility Act (EAA): Takes effect in June 2025, requiring digital products and services sold in the EU to meet accessibility standards. This affects any company with European customers.
• AODA (Canada): Ontario's accessibility law requires organizations with 50+ employees to make their websites WCAG 2.0 AA compliant.

Color contrast is one of the most commonly cited accessibility failures in audits and lawsuits. It is also one of the easiest to fix — you just need to check your colors and adjust where they fail. Our tool makes that process take seconds.

How to Fix Failing Contrast

When a color combination fails contrast requirements, you have three options:

• Darken the dark color: For text on a light background, make the text darker. Gray text (#999999) on white has a ratio of 2.85:1 (fails AA). Darkening to #767676 gives you 4.54:1 (passes AA). Darkening to #595959 gives you 7.0:1 (passes AAA).
• Lighten the light color: For text on a dark background, make the background darker or the text lighter. Light gray text (#8b8b8b) on a dark background (#1a1a1a) may fail. Lightening the text to #a0a0a0 can push you over the threshold.
• Increase text size: Large text (18pt+) only needs a 3:1 ratio for AA instead of 4.5:1. If your brand colors fail at body text size, they might pass for headings and button text.

The key insight: small color adjustments have large contrast impacts. You rarely need to redesign your entire color scheme. A shift of 2 to 3 shades darker or lighter is usually enough to pass while keeping your brand recognizable.

Contrast Tips for Designers

• Check contrast during design, not after launch. Building contrast checking into your design process is far cheaper than retrofitting a launched product.
• Do not rely on color alone to convey information. Error states should use text labels and icons, not just red color. Success states should use checkmarks, not just green. This helps colorblind users and passes WCAG 1.4.1.
• Test with real content. A contrast ratio that works for a bold heading may fail for fine print or placeholder text at the same colors. Test all text sizes you will actually use.
• Consider dark mode. If your site offers a dark theme, check contrast ratios for both themes. Colors that pass on white backgrounds may fail on dark backgrounds and vice versa.

Frequently Asked Questions

What is the minimum contrast ratio for WCAG AA?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These are the most commonly referenced requirements and the standard most organizations target for accessibility compliance.

What is the difference between WCAG AA and AAA?

AA is the standard compliance level — 4.5:1 for normal text, 3:1 for large text. AAA is the enhanced level — 7:1 for normal text, 4.5:1 for large text. Most organizations aim for AA compliance. AAA is recommended for content targeting users with significant visual impairments, government sites, and healthcare applications, but is not required by most legal standards.

Can I get sued for poor color contrast on my website?

Yes. Under the Americans with Disabilities Act (ADA), websites of businesses open to the public must be accessible. Thousands of lawsuits are filed annually over web accessibility issues. Courts increasingly reference WCAG 2.1 AA as the standard. Government websites (Section 508) have even stricter requirements. Ensuring proper contrast ratios is one of the easiest accessibility fixes and reduces legal risk.

How do I fix a color combination that fails contrast requirements?

Darken the darker color or lighten the lighter color until the ratio passes. For text on a light background, use a darker text color. For text on a dark background, use a lighter text color. Small adjustments often work — going from #767676 to #595959 for gray text on white changes the ratio from 4.5:1 to 7:1. Our tool shows the ratio in real time as you adjust colors.