The color contrast checker verifies whether the contrast ratio between a foreground color (text, icons) and a background color meets WCAG accessibility standards, displaying the ratio value and pass/fail status for AA and AAA levels. It's a standard tool in UI design reviews and accessibility audits.
WCAG thresholds that matter in practice
WCAG contrast ratios range from 1:1 (no contrast, like white on white) to 21:1 (black on white). The thresholds you'll check most often:
- AA normal text — ≥ 4.5:1: covers most website and app compliance requirements
- AA large text — ≥ 3:1: applies to text at 18 pt (≈ 24 px) or larger, or 14 pt (≈ 18.5 px) bold
- AAA normal text — ≥ 7:1: for body copy and high-accessibility contexts
- AAA large text — ≥ 4.5:1
The tool checks all three content categories independently: normal text, large text, and UI components (icons, button borders, chart elements).
Using the brightness slider to fix failing ratios
The brightness slider next to each color picker adjusts the lightness channel (L in HSL) while keeping hue and saturation unchanged. When a ratio falls short, dragging the text color slider upward (lighter) or the background color slider downward (darker) is the fastest path to compliance without picking a new color entirely.
For example, brand blue #3B82F6 on a white background gives a ratio of about 3.0:1, which fails AA for normal text. Darkening it to #1D4ED8 raises the ratio to about 5.3:1, which passes AA.
AA level (most contexts)
- Normal text: ≥ 4.5:1
- Large text (≥ 24 px or ≥ 18.5 px bold): ≥ 3:1
- UI components and icons: ≥ 3:1
- Covers WCAG 2.1 success criteria 1.4.3 and 1.4.11
AAA level (elevated requirements)
- Normal text: ≥ 7:1
- Large text: ≥ 4.5:1
- Appropriate for medical, government, and education contexts
- Not a universal target — constrains design flexibility
When passing contrast doesn't mean visually clear
Contrast calculation uses relative luminance. Some pairs — like pure red #FF0000 on black — hit the ratio threshold but are hard to read for people with color vision deficiency because the hue difference is insufficient. Always check the live preview alongside the number, not just the pass/fail badge.
Recommended targets by content type
Body copy benefits from reaching AAA (7:1) for comfortable extended reading. Navigation links and button labels at AA (4.5:1) are sufficient. Large headings can use the AA large-text standard (3:1). Pure decorative elements are exempt from WCAG contrast requirements entirely. Extremely high contrast — like 21:1 pure black on white — can cause eye fatigue over large areas; choose the lowest ratio that satisfies the standard and looks comfortable.