Contrast
Contrast checker
Verify text and background contrast against accessibility standards, with automatic fixes.
One-click fix
Automatically adjust lightness while preserving hue until it passes.
Contrast ratio
—
| Type | AA | AAA |
|---|
APCA (WCAG 3 draft)
—APCA (Accessible Perceptual Contrast Algorithm) computes a perceptual contrast Lc value, distinguishing light-on-dark from dark-on-light — closer to real readability than the WCAG 2.1 ratio.
| Usage | Target Lc | Result |
|---|
Preview
Large heading sample
Half of design is choosing. The other half is making it legible.
This is a 14px body paragraph used to judge how small type actually reads against the current color pair.
Button sample
This is a link
WCAG quick reference
| Type | Contrast ratio | |
|---|---|---|
| AA normal text | ≥ 4.5 : 1 | Minimum for regular type (under 18pt / 14pt bold). The compliance baseline for most websites. |
| AA large text | ≥ 3 : 1 | Applies to text at 18pt (~24px) and above, or 14pt (~18.66px) bold. |
| AAA normal text | ≥ 7 : 1 | Enhanced level, expected for public-service sites serving low-vision users. |
| AAA large text | ≥ 4.5 : 1 | Enhanced requirement for large type. |
| Non-text elements | ≥ 3 : 1 | Minimum for button borders, icons and chart elements against adjacent colors. |
About this tool
📘Contrast check computes the WCAG 2.1 ratio between foreground and background, shows AA/AAA levels and suggests fixes to keep text readable.
- Choose a foreground and a background color; the ratio and pass level show live (body text ≥ 4.5:1, large text ≥ 3:1).
- If it fails, swap in a closer-but-stronger color; key button borders also need ≥ 3:1.
- Red/green can be hard to tell for color-blind users — re-check with Color Blindness before shipping.
Tips
💡- Pick foreground and background; the right side shows live contrast and WCAG level (AA/AAA).
- Body text needs ≥ 4.5:1 (AA), large text ≥ 3:1, and key button borders ≥ 3:1 too.
- Red-green pairs are hard for color-blind users — re-check readability with the simulator.