WCAG defines text contrast as a ratio between the relative luminance of two colors — a bigger ratio means more legible text. The thresholds most teams care about are 4.5:1 for normal body text (AA) and 3:1 for large text (18pt regular or 14pt bold). AAA bumps those to 7:1 and 4.5:1. Anything below 3:1 fails for everyone.
WCAG contrast checker
Contrast underpins readable text for many users and common accessibility audits.
WCAG contrast checker
Enter two sRGB hex colors. We use the same relative-luminance formula as WCAG 2.x (normal text 4.5:1 AA, 3:1 for large text; 7:1 / 4.5:1 for AAA).
Foreground
Background
Contrast ratio
10.94:1
- AA — normal text (4.5:1) Pass
- AA — large text (3:1) Pass
- AAA — normal text (7:1) Pass
- AAA — large text (4.5:1) Pass
Sample heading
Preview how body copy might look with this pair. Adjust colors above.
Common use cases
Auditing existing pairs
Drop your brand foreground and background in and see whether they clear AA before you ship. The fastest possible smoke test.
Picking a darker accent
When the ratio falls short, increment lightness in OKLCH until you cross 4.5:1. Keep the hue, fix the legibility.
Backing up a design call
When a stakeholder wants softer grey text, the WCAG number is the concrete evidence — not opinion, not preference.
How to use this tool
- 1 Paste two hex values into Foreground and Background — or use the swatch pickers.
- 2 Read the ratio in the panel. The four AA/AAA rows tell you exactly which thresholds you clear.
- 3 Use the live preview at the bottom to sanity-check the pair at real type sizes.
- 4 If a ratio fails, nudge lightness and re-test.
Frequently asked questions
Does this work for icons and graphics?
WCAG 2.1 adds a separate 3:1 requirement for non-text contrast — UI components and meaningful graphics. The math is identical; the threshold is lower.
What about translucent text on photos?
WCAG’s formula assumes solid colors. For text over imagery, sample the worst-case background or apply a guaranteed scrim.
Why not APCA?
APCA is the proposed successor, but WCAG 2.x remains the legal benchmark in most jurisdictions. We’ll add an APCA mode when the standard is ratified.