Accessibility Color Contrast Checker (2026): Free WCAG AA & AAA Test

What Is an Accessibility Color Contrast Checker?

An accessibility color contrast checker is a free tool that takes two hex colors (a foreground and a background), computes the relative luminance of each per the WCAG 2.1 formula, and outputs the contrast ratio — the single number (for example 4.5:1 or 7:1) that determines whether the combination meets the AA or AAA threshold. Toolzie's free accessibility checker does this in your browser in real time, with no signup, and supports WCAG 2.0, 2.1, 2.2, and 3.0 (APCA) — see the WCAG Color Contrast Guide for the full developer-auditor workflow.

The tool is the most-used accessibility test on the web for a reason: color contrast is the single largest source of WCAG 2.1 failures. axe-core (the de-facto accessibility audit engine) reports that roughly 70% of audited pages have at least one color-contrast failure, and contrast issues appear in the top 3 most-flagged issues on virtually every public report. The fix is also the cheapest accessibility win: change a hex value, re-test, deploy. No redesign, no new component, no JavaScript — just two numbers.

Color contrast matters because roughly 8% of men and 0.5% of women have some form of color vision deficiency (the color blindness simulator shows what each type sees), and an additional large group has low vision, age-related contrast loss, or is reading in poor lighting. WCAG 2.1 SC 1.4.3 (Contrast Minimum, Level AA) is the legal floor in the US (ADA Title III), Canada (AODA in Ontario, Accessible Canada Act federally), the EU (EN 301 549), and the US federal sector (Section 508).

The WCAG 2.1 Contrast Ratio: 4.5:1 vs 7:1 (AA vs AAA)

WCAG 2.1 specifies four contrast thresholds, depending on text size and the conformance level you're targeting:

AA is the legal minimum in virtually every jurisdiction that has codified accessibility. AAA is the recommended best-practice target for body text on public-facing content, especially government, healthcare, and education sites. Most design systems target AA (4.5:1) as a non-negotiable floor and AAA (7:1) as the goal for body text.

The WCAG 2.1 Contrast Formula (Step by Step)

The contrast ratio is computed in three steps per the WCAG 2.1 spec. The math is reproducible — any checker that follows the spec gives the same answer for the same input pair.

Step 1: sRGB → linear-light. For each color channel R, G, B (0-255), normalize to 0-1 (divide by 255) and apply the piecewise function: if the value is ≤ 0.03928, the linear value is the normalized value divided by 12.92. Otherwise, the linear value is ((normalized + 0.055) / 1.055) ^ 2.4. The ^ 2.4 is the sRGB gamma curve — it's why "50% gray" (#808080) is not the midpoint of contrast.

Step 2: relative luminance. L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where R, G, B are the linear values from step 1. The weights are not equal — green contributes 71.5% of perceived luminance, red 21.3%, blue 7.2%. This is why a "bright blue" can pass contrast even when a "bright red" at the same lightness fails.

Step 3: contrast ratio. (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminances and L2 is the darker. The 0.05 ambient-light term prevents infinite ratios. Black on white: L_black = 0, L_white = 1.0, ratio = 1.05 / 0.05 = 21:1 — the maximum possible. Body text #333 on white: L_#333 ≈ 0.0304, ratio = 1.05 / 0.0804 = 12.63:1. Blue link #2563eb on white: L_#2563eb ≈ 0.1432, ratio = 1.05 / 0.1932 = 5.17:1 — passes AA, fails AAA.

You can verify all of these on Toolzie's color contrast checker by entering the hex values directly. The relative-luminance calculator is built in.

13 Color Pairs That Pass WCAG AA (Verified by Math)

Below are 13 verified color pairs that pass WCAG 2.1 AA (4.5:1) for normal text. All ratios computed against the WCAG 2.1 formula and confirmed in the contrast checker:

Notice the pattern: white text on a mid-saturation color (red, blue, green, purple) almost always passes AA when the background is at the -600 or darker shade. White on a -500 shade (red-500, blue-500, green-500) usually fails — green-500 #10b981 on white scores only 2.54:1, well below 4.5:1. The Toolzie -500 brand color set, while visually appealing, fails AA for white text. The fix: use -700 for buttons (red-700, blue-700, green-700).

8 Color Pairs That FAIL WCAG AA (Avoid These)

Eight common color combinations that fail WCAG 2.1 AA. All ratios verified by direct math:

Three of the eight "FAIL" pairs pass the 3:1 large-text and non-text-UI threshold — meaning a button or large heading with that color is legal, but body text is not. The most common mistake is using these colors for body text or paragraph links where 4.5:1 is the requirement. Re-color to a -700 shade and the ratio jumps to 5-6:1, passing AA cleanly.

ADA, AODA, and Section 508: The Audit Checklist

If you're shipping a public-facing website in 2026, you're almost certainly subject to one of these. The audit checklist for color contrast:

1. Every text/background pair meets 4.5:1 (AA normal text)

Use the contrast checker on every text style in your design system: body, links, headings, captions, footnotes, error messages, form labels. The 4.5:1 threshold applies to all normal-weight text. Large text (18pt+ or 14pt+ bold) only needs 3:1. Logos and decorative text are exempt.

2. Non-text UI components meet 3:1 (SC 1.4.11)

Form-input borders, focus rings, radio-button outlines, checkbox borders, and icons that convey meaning (close, expand, play) must meet 3:1 against adjacent colors. This is the threshold most often missed — check the default browser focus ring against your background, and any custom checkbox or radio control.

3. Contrast holds in both light and dark mode

If you ship a dark mode, every text/background pair in dark mode must independently meet the same 4.5:1 / 3:1 thresholds. The most common dark-mode failure is a light-on-light "muted" text: #94a3b8 on a #f1f5f9 dark-mode "card" surface scores below 4.5:1 in many real-world themes. Verify with the accessibility checker set to your actual dark-mode colors.

4. Contrast holds on hover, focus, and active states

A button might pass at rest (white on blue-700 = 5.93:1) but fail on hover if your hover state lightens the background. The audit covers all interactive states. Tab through the entire page with a keyboard — every focused element must show a visible focus ring at 3:1 against the background.

5. Links are distinguishable from body text (not just by color)

WCAG 1.4.1 (Use of Color) requires that links be distinguishable by more than color alone — usually achieved with an underline. The contrast requirement is still 4.5:1 against the background, but the link must be identifiable to a color-blind user who can't see the color difference. The cheapest fix: text-decoration: underline on all <a> elements.

6. Errors and required-field indicators meet contrast

Red error text on a white background must meet 4.5:1. Red-500 #ef4444 on white scores 4.00:1 — fails. Use red-700 #b91c1c (6.07:1) or red-800 #991b1b (7.46:1) for error messages. The same applies to required-field asterisks, success-state greens, and warning-state yellows.

How to Fix a Failing Color Contrast

Four proven levers, in order of effort:

1. Darken the foreground one or two shades

The single highest-leverage fix. Moving from blue-600 #2563eb (5.17:1 on white) to blue-800 #1e40af (8.55:1) takes you from "AA only" to "AA + AAA" with one CSS variable change. The same pattern works for red (red-500 #ef4444 = 4.00:1 FAIL → red-600 #dc2626 = 4.83:1 PASS → red-700 #b91c1c = 6.07:1 PASS), green (green-500 #10b981 = 2.54:1 FAIL → green-700 #15803d = 5.02:1 PASS), and yellow (yellow-500 #eab308 = 1.43:1 FAIL → yellow-700 #a16207 = 5.36:1 PASS).

2. Lighten the background (if the design allows)

If the failing pair is text on a dark background, and the dark background is a design choice (e.g., a hero section with a dark image overlay), the fix is to darken the overlay further, not the text. Going from #1e293b to #0f172a pushes the ratio from 13.35:1 to 17.35:1 for #f1f5f9 text — clearly over the top for normal text but useful for ensuring AAA holds across the entire site.

3. Swap to an existing on-brand color that already passes

Most design systems have 3-5 AA-safe colors per role. Tailwind's text-blue-700, text-red-700, text-green-700, text-amber-700, and text-slate-700 all pass AA cleanly on white. The audit process is to find the design-system color that already meets the threshold and use it, rather than customizing.

4. Increase the text size or weight to drop the threshold to 3:1

If the design absolutely needs a specific color and darkening it is not an option, increase the text size to 18pt+ (or 14pt+ bold) to drop the requirement from 4.5:1 to 3:1. This is a code-side change, not a color change, and is the right move for accent text where the brand color is sacred. Re-verify the new pair with the contrast checker before deploying.

Color Blindness: The 8% You Don't See

About 8% of men and 0.5% of women have some form of color vision deficiency. The most common types:

• Deuteranopia (red-green, ~6% of men) — the most common. Reds and greens appear as similar browns/yellows.
• Protanopia (red-green, ~2% of men) — reds appear darker and less vibrant.
• Tritanopia (blue-yellow, <0.01% of men) — blues and greens appear similar; yellows appear pinkish.
• Achromatopsia (full color blindness, very rare) — sees only grayscale.

Color contrast ratios are designed to be independent of color perception — a 4.5:1 ratio looks like the same physical contrast to a person with deuteranopia as it does to someone with full color vision. That's why WCAG 2.1 measures luminance (a grayscale quantity), not "color difference." A pair that fails 4.5:1 is harder to read for someone with normal vision AND for someone with color blindness, but the impact is greater for the color-blind user because they have less compensating visual information.

For the most inclusive experience, supplement color with another visual cue: a red error message plus an error icon, a green success state plus a checkmark, a required-field asterisk in red plus bold weight. Use the color blindness simulator to see your own designs through 8 different vision types — protanopia, deuteranopia, tritanopia, achromatopsia, and 4 more.

Common Color Contrast Mistakes (and How to Avoid Them)

Five mistakes that show up in nearly every audit:

1. Using the brand's primary color for body text

Brand colors are usually chosen for visual impact at large sizes — not for body-text readability. The brand "blue" might be #3b82f6 (4.50:1 on white, borderline) when the actual link color needs to be #1d4ed8 (8.55:1). Define a separate "link color" and "button text color" that pass AA, distinct from the "brand color" used in headers and logos.

2. Trusting the visual, not the math

Two pairs that look "the same contrast" to the eye can differ by 50% in actual WCAG ratio. Always run the pair through the contrast checker — visual judgment fails for mid-saturation colors, especially reds and greens (where the WCAG luminance weights heavily favor green).

3. Forgetting hover and focus states

A button might pass at rest but fail on hover if the hover state lightens the background. Audit all four states: rest, hover, focus, active. The contrast ratio is measured against the immediate background in each state, not the default page background.

4. Light gray disabled text on white

The default browser disabled state is light gray on white — usually around 2.5:1, well below AA. If you have a custom disabled state, verify it meets at least 3:1 (the non-text/UI threshold) so disabled controls are still visible. Don't make disabled text invisible.

5. Icon-only buttons with no text label

An icon-only button (close ×, hamburger ☰, search 🔍) must meet 3:1 (SC 1.4.11) and have an aria-label. The icon color against the background is the contrast check, not the text color (there is no text). A white close icon on a light-gray modal background is a 1.5:1 FAIL — easy to miss without a checklist.

Accessibility Color Contrast Checklist: Your First Audit

A 10-step audit you can run on any page in under 30 minutes:

1. Open the page in a browser. Tab through every interactive element with the keyboard — verify a visible focus ring at 3:1+.
2. Identify the body text color and the page background. Check the pair meets 4.5:1.
3. Identify every heading size (h1-h6) and check each one against the background. Large headings need 3:1, body needs 4.5:1.
4. Find every link color. Check link-on-background (4.5:1) and visited-link-on-background (4.5:1).
5. Find every form input: label color, placeholder color, border color, focus-ring color. Check all meet 4.5:1 or 3:1 (UI).
6. Check error messages, success messages, warning messages, and info messages. Each color-state-on-background must meet 4.5:1.
7. Check all icons that convey meaning (close, expand, play, search) meet 3:1 against the background.
8. Toggle to dark mode (if your site has one). Re-run steps 2-7 with the dark-mode colors.
9. Run the accessibility checker on the top 5 most-used color pairs in your design system — verify each passes.
10. Document any failures and assign them to a sprint. The fix for most is a single CSS-variable change.

For the formal audit workflow (the developer/auditor version with the full formula and APCA comparison), see the WCAG Color Contrast Guide.