Color Contrast Checker

Overview

Measures the WCAG contrast ratio between a text color and a background color and grades it against all four AA and AAA thresholds for normal and large text. A live preview renders your actual pair at three text sizes, so you see the combination exactly as your readers will.

How It Works

Set the foreground and background colors with the color pickers or by typing hex values — three-digit shorthand like #fff is accepted. The large ratio figure updates live, followed by four pass/fail badges: AA Normal at 4.5:1, AA Large at 3.0:1, AAA Normal at 7.0:1 and AAA Large at 4.5:1. The preview panel paints its sample text in your pair at large, body and small-print sizes, making failures visible rather than merely numeric. Invalid hex input shows an error line instead of a misleading score.

Step-by-Step Usage Guide

1. Enter or pick the text (foreground) color.
2. Enter or pick the background color; the ratio and badges update immediately.
3. Read the four badges: AA Normal 4.5:1, AA Large 3:1, AAA Normal 7:1, AAA Large 4.5:1.
4. Judge from the preview whether the failing sizes matter — body copy must pass AA Normal regardless of how good the headline looks.

Technical Specifications & Standards

The ratio is computed per WCAG 2.1 success criterion 1.4.3: each sRGB channel is linearised — values at or below 0.04045 divide by 12.92, others apply the ((c+0.055)/1.055)^2.4 curve — then combined with the perceptual weights 0.2126 red, 0.7152 green, 0.0722 blue into relative luminance, and the ratio is (lighter luminance + 0.05) / (darker + 0.05). The 0.05 offset prevents division by zero and models ambient glare; the result spans 1:1 (same color) to 21:1 (black on white). The thresholds encode WCAG's large-text definition: at least 18pt (24 CSS px) regular or 14pt (about 18.66 px) bold, which earn the relaxed 3:1 AA and 4.5:1 AAA targets, while body text needs 4.5:1 for AA and 7:1 for AAA. The preview's three sizes map to those categories deliberately — the smallest line failing while the headline passes is the classic large-text-only palette. One scope note: this checks text contrast only; WCAG 1.4.11's separate 3:1 requirement for UI graphics and control boundaries is covered by the site's WCAG Contrast and Accessibility Matrix tool.

Targeted Use Cases

• Checking brand color on white before committing to it for buttons, links or headings.
• Verifying a dark-theme text/background pair passes 4.5:1 where users actually read paragraphs.
• Deciding whether a muted caption color qualifies under the large-text exemption at its real size.
• Documenting accessibility conformance with exact ratios for each text style in a design system.

Notes & Gotchas

• Hold body copy to 4.5:1 no matter what; the large-text relaxation needs 24px regular or 18.66px bold.
• Fix failures by moving lightness in one direction — darkening text on light backgrounds moves the ratio fastest.
• Test the pair in the preview at its real rendered size, not only the headline size.
• Check both pickers actually changed: identical hex values yield the minimum 1:1 ratio.

Frequently Asked Questions