Contrast Checker

Check foreground/background contrast against WCAG AA and AAA with a live preview.

WCAG contrast is a ratio between the relative luminance of two colours, computed after each sRGB channel is linearised — the gamma curve is undone before the channels are weighted, which is why the answer rarely matches what you would guess by eye. The scale runs from 1:1 for identical colours to 21:1 for black on white.

The thresholds are 4.5:1 for normal text at AA and 3:1 for large text, with AAA raising normal text to 7:1. "Large" has a specific meaning — around 18pt, or 14pt when bold — so bolding a heading can move it into the easier bracket without changing a colour.

The failure this catches most often is not a wild colour choice but grey-on-grey secondary text, the placeholder in a form field, and disabled states. Those are the elements designed to recede, and receding is exactly what pushes them under the threshold.