Contrast Ratio Explained: Why It Matters for Comfortable Reading

Contrast ratio measures the difference in brightness between text and its background. It's one of the biggest factors in whether text is comfortable to read, and it's how accessibility guidelines judge whether text is readable for people with low vision.

How it's measured

The ratio compares the relative brightness of two colors, from 1:1 (no difference, such as white on white) to 21:1 (black on white). Hue doesn't count directly: red and green of the same brightness have a low ratio, which is also why they're hard to tell apart for many colorblind people.

The WCAG levels

• AA, normal text: at least 4.5:1.
• AA, large text (about 24 pixels, or 19 pixels bold): at least 3:1.
• AAA: 7:1 for normal text and 4.5:1 for large text.
• Buttons, icons and form borders: at least 3:1 against what's next to them.

Most laws and policies that reference accessibility guidelines expect AA. See a WCAG contrast guide.

Too little contrast

Light grey text on white is a common design choice that fails many readers. Low contrast makes people lean in, squint and slow down, and it gets worse in bright sunlight, on cheap screens and as eyes age.

Too much contrast

Pure white text on pure black can also be uncomfortable for some people, especially those with astigmatism, for whom bright text may seem to blur or glow at the edges. Many dark themes use off-white text on dark grey for this reason. See accessible dark mode.

Beyond the ratio

• Font size and weight: thin, small text needs more contrast than bold, large text.
• Newer methods: drafts of the next version of the guidelines explore a method called APCA, which accounts for font size, weight and whether text is light on dark or dark on light.
• Your surroundings: the same screen looks different in a dark room and in sunlight.

How to check contrast

• The contrast checker gives the ratio for any two colors and shows which levels they pass.
• In Chrome DevTools, the color picker for any text color shows its contrast ratio against the background.
• See contrast tools in Chrome.

Adjusting it as a reader

• Modern Dark Mode darkens websites, with brightness and contrast sliders so you can find a comfortable level.
• Windows contrast themes and macOS's Increase contrast setting raise contrast across your computer.
• Reader view usually gives clean, high-contrast text.
• In the evening, Blue Light Filter warms web pages, which softens bright white backgrounds.