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.