Color Contrast Ratio
The measured difference in luminance between text and its background, used to check legibility. WCAG asks for at least 4.5:1 for normal body text.
Why it matters
Low contrast is the most common accessibility failure on the web, and the least visible to the person who shipped it — they already know what the text says. Someone reading on a phone outdoors, on a dimmed screen, or with reduced contrast sensitivity loses the line entirely.
Try it live
Check any text and background pair against AA and AAA — in the browser, as you type.Open the contrast checkerThe numbers
- 4.5:1 — minimum for body text (WCAG AA)
- 3:1 — large text: 24px, or 18.66px bold
- 3:1 — UI components and graphical objects (SC 1.4.11)
Measured by the Figma plugin
Every text layer is measured against its real backdrop — actual WCAG maths with alpha compositing — and a failure comes with a computed passing ink, applied in one click.
Put the coach in your canvasRelated terms
Ask your assistant
Define "Color Contrast Ratio" using uxspot. Works in Claude, Cursor or any MCP client — connect the uxspot MCP.
Think it stuck? A 20-second round of Spot Check will tell you.