WCAG Color Contrast: A Readability Score, Not an Opinion
WCAG color contrast is a mathematical ratio ensuring text is readable for people with vision impairments. Use it for all text and UI elements. The footgun is only testing on a good monitor or forgetting that large text has a lower 3:1 requirement.
WHY IT EXISTS Many people have moderately low vision, color vision deficiencies, or are simply using a screen in bright sunlight. Without sufficient contrast between text and its background, content becomes difficult or impossible to read. WCAG provides objective standards to ensure content is perceivable by as many people as possible.
THE MENTAL MODEL Think of color contrast as a signal-to-noise ratio for your eyes. The text is the signal; the background is the noise. A high contrast ratio means the signal is strong and easy to pick out. WCAG defines the minimum ratio needed for text to be legible, turning a subjective design choice into a testable, objective measurement.
HOW IT WORKS Contrast is calculated from the relative luminance (perceived brightness) of the foreground and background colors, yielding a ratio from 1:1 (no contrast) to 21:1 (maximum contrast). There are two main conformance levels: AA (standard) and AAA (enhanced). For the common AA level, the rules are: normal-sized text requires a 4.5:1 ratio; large text (18pt and up, or 14pt bold and up) and important graphics (like icons and input borders) require a 3:1 ratio.
WHEN TO USE IT Apply contrast checks to all meaningful content. This includes body text, headlines, button labels, placeholder text in forms, icons that convey information, and borders of UI components like input fields. It is a fundamental requirement for any accessible web page or application.
WHEN NOT TO USE IT The rules do not apply to elements that are purely decorative and provide no information, or to text within a logo or brand name. However, be careful not to misclassify functional elements as decorative. If an icon is the only way to perform an action, it is not decorative and must meet contrast requirements.
ONE CANONICAL EXAMPLE A common failure is using light gray text on a white background for secondary information. For example, a designer might choose #808080 gray text on a #FFFFFF white background. This combination has a contrast ratio of 4.24:1. It feels readable to many, but it fails the 4.5:1 AA standard for normal text, making it difficult for users with low vision to read. A slightly darker gray, like #767676, passes with a ratio of 4.54:1.
Read the original → w3.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.