Color Contrast Checker — WCAG 2.1

Test if your text and background color combinations meet WCAG 2.1 Level AA and AAA contrast requirements. Minimum ratio: 4.5:1 for normal text, 3:1 for large text.

What Is WCAG Color Contrast and Why Does It Matter?

WCAG stands for Web Content Accessibility Guidelines, published by the W3C. The contrast ratio standard is the single most-checked accessibility criterion on the web — and the one most frequently violated.

The ratio is calculated from relative luminance: a formula that weights red, green, and blue channels according to how the human eye perceives them. A ratio of 1:1 means identical colors. A ratio of 21:1 is the theoretical maximum — pure black on pure white.

Around 300 million people globally have some form of color vision deficiency. Another 246 million have moderate to severe visual impairment. When you ship a light gray label on a white background, you are making your product unusable for a measurable portion of your audience.

The Contrast Ratio Formula

The formula compares relative luminance (L) of the lighter color to the darker one: (L1 + 0.05) / (L2 + 0.05). Each channel is linearized from its 0–255 sRGB value, then weighted: 0.2126×R + 0.7152×G + 0.0722×B. Two colors can look dramatically different to a sighted user yet still fail — perceived brightness and mathematical luminance do not always align.

WCAG AA vs AAA: Contrast Requirements Table

Two compliance levels matter: AA (the legal baseline for EAA, ADA, Section 508) and AAA (enhanced standard for users with moderate vision impairments).

Text Type	WCAG AA	WCAG AAA
Normal text (< 18pt)	4.5:1	7:1
Large text (18pt+ or 14pt bold)	3:1	4.5:1
UI components & graphics	3:1	Not specified
Decorative elements	No requirement	No requirement

How to Check Color Contrast: Step by Step

1. Identify your foreground (text) and background color as hex values.
2. Paste both colors into the checker above.
3. Read the contrast ratio and check the AA/AAA pass/fail indicators.
4. If the ratio fails, adjust the lighter or darker color until you reach at least 4.5:1 for normal text.
5. Verify both light mode and dark mode versions separately.
6. For a full site audit, run the URL scanner to flag every failing combination automatically.

Common Color Combinations That Fail WCAG

Light gray (#999) on white (#FFF) — ratio 2.85:1. The most common failure. Used for placeholders and secondary text on countless websites.

Blue links (#00F) on navy (#000080) — ratio 1.42:1. Looks different visually but luminance values are too close.

Yellow (#FF0) on white (#FFF) — ratio 1.07:1. Nearly invisible to users with deuteranopia (red-green color blindness).

Orange CTA (#F60) on white (#FFF) — ratio 3.04:1. Fails AA for normal text, passes only for large text. Many sites use orange CTAs with small label text.

Green on red — may pass luminance checks but indistinguishable for roughly 8% of men with red-green color deficiency. Shape and pattern matter alongside contrast.

Color Contrast Checker Tools Compared

WebAIM Contrast Checker is the reference most developers cite — accurate and trusted since 2005, but checks one color pair at a time. That workflow does not scale for design systems with dozens of combinations.

Coolors is primarily a palette generator. Useful when building a color system from scratch, less so when auditing existing interfaces.

axe DevTools is excellent for page-level audits during inspection. The full version is a paid enterprise product, and it only checks the current viewport.

What makes this tool different is the full-site scanner. Instead of checking one pair or one page, you point it at a URL and it returns every text/background combination across your entire domain, sorted by failure severity. For teams preparing for EAA or responding to an ADA demand letter, that is the workflow that actually moves the needle on compliance.

Legal Requirements: EAA, ADA, and Section 508

Color contrast — WCAG 2.1 criterion 1.4.3 — appears in virtually every accessibility audit and legal complaint. Over 4,000 ADA web accessibility lawsuits were filed in 2023 alone. The European Accessibility Act (EAA) enforcement started June 2025. Section 508 applies to all US federal agencies.

It is measurable, objective, and easy to document in litigation — making it the first thing auditors check and the last thing you want to overlook. Our EAA compliance checker maps issues directly to the relevant WCAG criteria and EAA articles.

Beyond Contrast Ratio: What This Tool Cannot Tell You

Two colors can have a 5:1 ratio and still be indistinguishable to someone with deuteranopia. Never rely on color alone to convey information — use icons, text labels, or different shapes alongside color indicators.

Contrast ratio does not account for typeface weight. A thin 300-weight font at 16px is harder to read at 4.5:1 than a bold 700-weight font at the same ratio. Non-text contrast (icons, form borders, chart elements) falls under WCAG 1.4.11, which requires 3:1 against adjacent colors.

Use a color contrast checker as your first filter, not your final answer. A full accessibility audit includes keyboard navigation testing, screen reader review, and cognitive load assessment.

Dark Mode and Dynamic Themes

Color pairs that pass in light mode frequently fail in dark mode. If your product ships both themes, check both. A white-on-dark-blue that passes might invert to dark-blue-on-white in your light theme — but if your dark mode uses a warm dark background instead of pure black, the ratio changes.

For design systems using CSS custom properties, run contrast checks as part of your CI pipeline. Several open-source tools integrate with Storybook or Playwright to automate this on every build.

Frequently Asked Questions

Check Your Entire Website for Accessibility Issues

Color contrast is just one of many WCAG requirements. Scan your website for all accessibility issues — free.

Free Full Accessibility Scan