Color Contrast Checker

Your designer sends you #767676 text on white. You think it looks fine — but is it legally compliant? The answer is yes for AA normal text (4.54:1), but change it to #777777 and you’ve just dropped below the 4.5:1 threshold. One hex digit is the difference between passing an accessibility audit and failing one. You shouldn’t have to do luminance math in your head to know that.

Why This Checker (Not WebAIM or Browser DevTools)

WebAIM’s contrast checker is the standard reference — and it works. But it only shows pass/fail for two levels (AA/AAA) and doesn’t suggest alternatives when you fail. Chrome DevTools shows contrast in the color picker, but only for the element you’ve selected, and it can’t compare arbitrary colors you haven’t yet applied.

This tool calculates the ratio instantly as you type, shows pass/fail across all five WCAG thresholds (AA normal, AA large, AA UI, AAA normal, AAA large), and generates accessible alternatives when your combination fails — sorted by visual similarity to your original choice. It also runs entirely in your browser, so you’re not sending your color palette to a third-party server.

What Is a Color Contrast Checker?

A color contrast checker measures the luminance difference between a foreground color (text, icon) and its background, then compares that ratio against the Web Content Accessibility Guidelines (WCAG 2.1). Poor contrast makes text hard to read for anyone — especially users with low vision, color blindness, or those viewing screens in bright sunlight.

This tool accepts any color in hex (#hex), rgb(), or hsl() format, instantly calculates the WCAG contrast ratio, and reports AA and AAA pass/fail results for normal text, large text, and UI components. When a combination fails, accessible alternatives are suggested.

How to Use This Tool

1. Enter the foreground color (text, icon, or element color) — type a hex code, rgb(), or hsl() value, or use the color picker.
2. Enter the background color in the same way.
3. Read the contrast ratio (e.g. 7.53:1) and the rating (Poor / Marginal / Good / Excellent).
4. Check the WCAG 2.1 Compliance table — Pass/Fail for AA Normal, AA Large, AA UI, AAA Normal, and AAA Large.
5. See the Live Preview to visually confirm how text looks at normal, large, and heading sizes.
6. If any check fails, use the Accessible Alternatives suggestions — click “Use” to apply immediately.

WCAG 2.1 Contrast Requirements

WCAG 2.1 defines contrast requirements under Success Criterion 1.4.3 (Minimum Contrast) at Level AA and SC 1.4.6 (Enhanced Contrast) at Level AAA:

Large text is defined as at least 18 point (24px at 96 dpi) for regular weight, or 14 point (≈18.67px) for bold. Because large characters are easier to read at lower contrast, the threshold is lower.

Level AAA is the enhanced standard. Not all content can meet AAA — WCAG notes it as a goal for “certain portions of content.” Most accessibility audits require AA as the baseline.

How the Contrast Ratio Is Calculated

The WCAG 2.1 formula uses relative luminance, which accounts for the non-linear way human vision perceives brightness:

Step 1 — Linearize each channel

For each RGB channel value C (0–255):

Cs = C / 255

if Cs ≤ 0.03928:
    Clinear = Cs / 12.92
else:
    Clinear = ((Cs + 0.055) / 1.055) ^ 2.4

This removes the gamma encoding applied by sRGB displays.

Step 2 — Compute relative luminance

L = 0.2126 × Rlinear + 0.7152 × Glinear + 0.0722 × Blinear

The weights reflect the luminous efficiency of each primary color as perceived by the human eye (green contributes most, blue least).

Step 3 — Compute contrast ratio

Contrast = (Llighter + 0.05) / (Ldarker + 0.05)

The 0.05 offset prevents division by zero (absolute black has luminance 0). The ratio ranges from 1:1 (identical colors) to 21:1 (black on white).

Reference Values

Some common pairs and their contrast ratios:

Why Contrast Matters

• 1 in 12 men and 1 in 200 women have some form of color vision deficiency.
• Low contrast text is the most common accessibility failure on the web, found on over 80% of tested homepages in the WebAIM Million report.
• Legal compliance: WCAG AA is mandated or referenced by EN 301 549 (EU), ADA (US), Section 508 (US federal), and AODA (Canada).
• SEO benefit: Accessible pages reduce bounce rates and increase time on page, which indirectly supports search rankings.
• Mobile readability: Even users with perfect vision struggle with low-contrast text on mobile in bright sunlight.

Tips for Choosing Accessible Colors

• Adjust lightness before changing hue. Lightening or darkening a color preserves brand identity while improving contrast.
• Don’t rely on color alone. Pair color contrast with sufficient font size, weight, and spacing.
• Test at the intended size. A 4.5:1 ratio at 12px may look harder to read than 3:1 at 24px because letterform detail is also important.
• Check against all background colors. Text on gradient backgrounds may have good contrast at the lightest part but fail at the darkest.
• Focus indicators need 3:1. Keyboard focus rings must contrast at least 3:1 against adjacent colors (WCAG 2.2 SC 1.4.11 and 2.4.11).

Frequently Asked Questions

Does this tool work with WCAG 2.2?

WCAG 2.2 (published October 2023) did not change the contrast ratio requirements for text (SC 1.4.3 and SC 1.4.6) or UI components (SC 1.4.11). The formulas and thresholds are identical to WCAG 2.1. This tool is fully applicable to WCAG 2.2 contrast requirements.

What is APCA and is it different from WCAG contrast?

APCA (Accessible Perceptual Contrast Algorithm) is a newer model being developed for a potential WCAG 3.0. It accounts for spatial frequency (font size and weight) and uses a different scale. At present, WCAG 2.1/2.2’s relative luminance ratio remains the legal standard. APCA is not yet a normative requirement.

Should I use AA or AAA as my target?

AA is the minimum legal requirement in most contexts. Target AAA for body copy if possible, especially in high-information contexts like documentation, forms, or articles. UI components need only reach 3:1 (AA). Decorative text (logos, inactive menu items) is exempt under WCAG.

Why do my colors pass the ratio check but still look hard to read?

Contrast ratio is a mathematical measure of luminance difference. It does not account for font size, weight, letter spacing, anti-aliasing, or color blindness simulations. A ratio of 4.5:1 at 11px light-weight text may still be harder to read than the same ratio at 16px regular weight. Consider using WCAG as a floor, not a ceiling.

Can I check contrast for text on an image?

This tool requires a solid background color. For text on images or gradients, identify the lightest and darkest regions of the background and check the foreground against both. Use the most challenging region for compliance.