WCAG Color Contrast: The 4.5:1 Rule for Readability

Why it exists

To ensure people with moderately low vision or impaired contrast perception can read digital text without needing special assistive technology. Many visual impairments reduce contrast sensitivity, so sufficient light-dark difference is crucial for readability for a wide range of users.

The mental model

Imagine you're viewing a website in grayscale. The contrast ratio is a mathematical measure of how much the text "pops" from its background based on brightness (luminance) alone. This is why the rules work for people with color blindness; the calculation intentionally minimizes the role of color hue, focusing only on the light-dark difference.

How it works

The standard defines two key thresholds. For normal-sized text, the contrast ratio between the text and its background must be at least 4.5:1. For "large text," the requirement is relaxed to 3:1. Large text is defined as 18 points (about 24px) or larger, or 14 points (about 18.5px) and bold. These ratios are absolute thresholds and should not be rounded up; a calculated 4.49:1 fails the 4.5:1 test. The check is performed on the specified colors in your code (CSS), not a screenshot, to avoid inaccuracies from font anti-aliasing.

When to use it

Apply these ratios to all text intended to convey information in your user interface. This includes body paragraphs, button labels, form field labels, and navigation links. It's a fundamental requirement for WCAG Level AA compliance, a common standard for public and commercial websites.

When not to use it

The contrast requirement is waived in specific cases. First, for text that is part of a logo or brand name. Second, for incidental text, such as text on a disabled button, text that is purely decorative (like words forming a background pattern), or text that is not visible to any user. Third, for text that appears inside a complex photograph, like a sign on a building in a street scene.

One canonical example

A website uses light gray text (#959595) on a white background (#FFFFFF) for its body copy. This has a contrast ratio of 3.0:1. While this would pass for a large headline, it fails the 4.5:1 requirement for standard body text, making it difficult for some users to read. To become compliant, the text color would need to be darkened to at least #767676 to achieve a ratio of 4.5:1 or higher.