Contrast Checker
WCAG AA/AAA contrast ratio for any two colors, with live preview.
The quick brown fox jumps over the lazy dog. 1234567890.
Small caption text at 13.6px is the toughest case for legibility.
Large bold headings sparkle.
Subhead at 20px regular.
How to use
- Pick or paste the foreground and background colors.
- The contrast ratio appears instantly along with WCAG pass or fail badges.
- Inspect the preview cards to see body, headline and button cases.
- Hit "Nudge text to AA" to push the foreground until it passes AA normal text.
- Copy the report to include in a design ticket or PR description.
Frequently asked questions
What ratios are required by WCAG?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1 for AA.
What counts as large text?
Bold text at 14pt (about 18.66 CSS pixels) or larger, or any text at 18pt (about 24 CSS pixels) or larger.
Why does dark mode fail my contrast?
Dark themes can have lower perceived contrast than expected, especially with grey text on a near-black background. Lighten foreground colors or deepen the background until the ratio reaches at least 4.5:1.
Is APCA contrast supported?
WCAG 2 ratio is the default because it is the current legal standard. APCA, the proposed successor in WCAG 3, will be added in a future update.
Advertisement