WCAG Contrast Checker

About this tool

The WCAG Contrast Checker calculates the luminance contrast ratio between any two colors and reports whether the combination passes the WCAG 2.1 AA and AAA accessibility guidelines for both normal text and large text. A contrast ratio of 4.5:1 is required for normal text (WCAG AA), and 3:1 for large text (18pt+ or 14pt+ bold). AAA compliance requires 7:1 for normal text and 4.5:1 for large text. Enter each color as a hex code (#rgb or #rrggbb, with or without the #) or pick it with the color swatch next to the field. The tool shows the contrast ratio to two decimals, four PASS/FAIL badges, and a live preview of sample text in the foreground color on the background so you can visually assess readability alongside the numerical result. Everything is calculated in your browser as you type.

Why use it

• Shows pass/fail for all four WCAG 2.1 contrast scenarios simultaneously instead of a single ratio number.

• Hex fields and native color pickers stay in sync, so you can type a brand code or pick visually.

• Live preview pane shows actual text appearance at the chosen colors.

• Instant calculation — no submit button needed.

• Runs locally in the browser, so unreleased brand colors stay on your machine.

How to use

1. Enter the foreground (text) color as a hex code such as #1a73e8, or click the swatch beside the field to pick it.
2. Enter or pick the background color in the second field.
3. Read the contrast ratio (e.g. 4.51:1), which updates as you type.
4. Check the four PASS/FAIL badges for AA normal, AA large, AAA normal, and AAA large text.
5. View the preview box to see sample text rendered in the chosen colors.
6. Tweak either color slightly (lightening the light color or darkening the dark one) until you cross the AA 4.5:1 threshold.

When it helps

• Verifying UI color choices meet WCAG 2.1 AA accessibility requirements before shipping a design system.
• Auditing an existing color palette for contrast compliance during a quarterly accessibility review.
• Designing accessible typography — checking text and background combinations.
• Meeting legal or contractual accessibility requirements (ADA, EN 301 549).

Examples

#000000 on #ffffff

21.00:1 — AA Normal PASS, AA Large PASS, AAA Normal PASS, AAA Large PASS.

#1a73e8 on #ffffff

4.51:1 — AA Normal PASS, AA Large PASS, AAA Normal FAIL, AAA Large PASS.

#aaaaaa on #ffffff

2.32:1 — AA Normal FAIL, AA Large FAIL, AAA Normal FAIL, AAA Large FAIL.

#4ade80 on #0d0d0d

11.15:1 — passes AA and AAA for normal and large text.

Tips

• When a combination just fails AA, adjust the lighter color toward white or the darker color toward black to gain ratio quickly.
• Aim for AA on body text and AAA on small UI labels — the extra contrast helps users with mild low-vision.
• Don't rely solely on contrast for state changes (focus, error). Pair color with iconography or text per WCAG 1.4.1.
• Test against pure white (#ffffff) and your darkest brand surface — those are the most common production extremes.
• Remember that disabled buttons are exempt from contrast requirements, but everything else interactive must meet 3:1 for non-text and 4.5:1 for text.
• If your colors are in RGB or HSL, convert them to hex first; this checker reads hex codes only.

Frequently Asked Questions

Glossary

Contrast ratio

The luminance ratio between two colors, expressed as N:1 where N ranges from 1 (no contrast) to 21 (black on white). Computed as (L1 + 0.05) / (L2 + 0.05).

Relative luminance

The brightness of a color normalized to 0 (darkest) - 1 (brightest), calculated from the sRGB channel values using the WCAG 2.1 formula with gamma correction.

WCAG AA

The middle conformance level of the Web Content Accessibility Guidelines. Requires 4.5:1 contrast for normal text and 3:1 for large text — the minimum legal target in most jurisdictions.

WCAG AAA

The highest conformance level. Requires 7:1 for normal text and 4.5:1 for large text. Recommended but not legally mandated; suitable for sites where readability is critical (gov, finance, health).

Large text

Per WCAG, text that is 18pt (24px) regular or 14pt (~18.67px) bold. Large text is allowed a lower contrast threshold because the strokes are wider and easier to read.

Non-text contrast

WCAG 2.1 Success Criterion 1.4.11. Requires 3:1 ratio for UI components such as form input borders, icons, and focus rings against adjacent colors.

sRGB

The standard RGB color space used on the web. WCAG luminance calculations assume sRGB and apply gamma correction (linearization) before computing brightness.

APCA

Advanced Perceptual Contrast Algorithm — a candidate replacement for the WCAG 2.x ratio formula in WCAG 3.0. Returns Lc values, not ratios; not yet a ratified standard.