WCAG Contrast Checker

About WCAG Contrast Checker

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. The tool accepts colors in hex, RGB, or HSL format, shows the computed contrast ratio, and provides a live preview of the foreground text on the background so you can visually assess readability alongside the numerical result.

Why use WCAG Contrast Checker

• Shows pass/fail for all four WCAG 2.1 contrast scenarios simultaneously.
• Accepts colors in hex, RGB, and HSL — no format conversion needed.
• Live preview pane shows actual text appearance at the chosen colors.
• Instant calculation — no submit button needed.
• Shows pass/fail for all four WCAG 2.1 contrast scenarios simultaneously instead of a single ratio number.
• Accepts colors in hex, RGB, and HSL — no manual format conversion needed before checking.

How to use WCAG Contrast Checker

1. Enter the foreground (text) color in hex, RGB, or HSL format.
2. Enter the background color in the second field.
3. The contrast ratio and WCAG AA/AAA pass/fail status update instantly.
4. View the live preview pane to see how the colors look together.
5. Read the contrast ratio (e.g. 7.21:1) and the four pass/fail badges for AA normal, AA large, AAA normal, and AAA large.
6. View the live preview pane to see actual rendered text on the chosen background.
7. Tweak either color slightly (HSL lightness is the easiest dimension) until you cross the AA 4.5:1 threshold.

When to use WCAG Contrast Checker

• Verifying UI color choices meet WCAG 2.1 AA accessibility requirements.
• Auditing an existing color palette for contrast compliance.
• Designing accessible typography — checking text and background combinations.
• Meeting legal or contractual accessibility requirements (ADA, EN 301 549).
• 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.

Examples

Tips

• When a combination just fails AA, adjust the lighter color toward white or the darker color toward black in HSL space 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.
• Use HSL when iterating — adjusting lightness in HSL preserves hue identity better than nudging RGB channels.

Frequently Asked Questions

Explore the category

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.