WCAG Contrast Checker
Check whether text and background pass WCAG AA and AAA contrast ratios.
About WCAG Contrast Checker
WCAG Contrast Checker measures the contrast ratio between a foreground and a background color and reports whether the pair passes the WCAG accessibility guidelines at the AA and AAA levels, for both normal and large text. It is the check every designer should run before shipping a palette — text that does not meet the contrast bar is invisible to a meaningful slice of users and is a real accessibility violation under modern web regulations.
Worked example: dark gray text #555 on a white background gives a contrast ratio of about 7.5:1. That passes AA for normal text (which needs 4.5:1), AAA for normal text (7:1), and AA/AAA for large text (3:1 / 4.5:1). Lighten the gray to #999 and the same comparison drops to 2.85:1, which fails every level. The checker shows a sample of the text in the chosen colors alongside the numerical score so you can see the relationship between the visual difference and the math.
WCAG defines 'large text' as 18 point (24 px) regular or 14 point (18.66 px) bold — that is a genuine exception, but it does not extend to icons, decorative text, or anything in between. The contrast ratio formula uses relative luminance, not a simple lightness difference, which is why pairs of colors that look similar in saturation can produce very different ratios. The forthcoming WCAG 3 introduces a perceptually-tuned model (APCA) that better predicts readability — especially at the extremes — but until WCAG 3 is finalized, the AA/AAA ratios remain the standard most legal and accessibility audits use.
All measurements run in your browser. Nothing about your design choices is uploaded or stored.