Guide

What is color contrast ratio?

Contrast ratio measures how distinct two colors are in brightness. Here is how it’s calculated and what to aim for.

The scale

Contrast ratio runs from 1:1 (identical) to 21:1 (black on white). Higher is easier to read.

How it’s measured

It compares the relative luminance of two colors using the WCAG formula, then divides the lighter value by the darker one (plus a small offset). Hue doesn’t matter — only brightness.

What to aim for

Normal text: 4.5:1 (AA), 7:1 (AAA)
Large text (≈24px, or 18.66px bold): 3:1 (AA), 4.5:1 (AAA)
UI components and graphics: 3:1

Measure any pairing with the contrast checker.

Frequently asked questions

What is a good contrast ratio?

At least 4.5:1 for body text and 3:1 for large text and UI under WCAG AA. Aim for 7:1 where you can.

Does contrast depend on hue?

No — contrast ratio is based on relative luminance (brightness), not hue. Two colors with similar brightness will have low contrast regardless of hue.