Color Contrast Checker
Check the WCAG 2.2 contrast ratio between text and background colors, with AA/AAA results and the nearest passing color.
Frequently Asked Questions
What contrast ratio does WCAG require?
Level AA requires at least 4.5:1 for normal text and 3:1 for large text and for UI components such as input borders, focus indicators and meaningful icons. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 24px (18pt) in regular weight, or at least 18.66px (14pt) in bold. Everything smaller is normal text and needs the higher ratio.
Can I round 4.48:1 up to 4.5:1?
No. WCAG treats the thresholds as hard minimums, so this checker truncates the ratio instead of rounding it. 4.49:1 fails AA for normal text.
How are suggested colors chosen?
The checker keeps the hue and saturation of your color and searches for the smallest change in lightness that reaches the target ratio, trying both darker and lighter. It suggests changing the text first, and the background as an alternative.
How are transparent colors handled?
They are blended the way a browser draws them: a semi-transparent background over white, and semi-transparent text over the background, before the ratio is measured.
Does it support APCA?
Not yet. APCA is a proposed method for the future WCAG 3; laws and audits today reference the WCAG 2.x ratio this tool uses.