Contrast Ratio

Contrast ratio is a number that tells you how different two colors look in terms of brightness. The Web Content Accessibility Guidelines calculate it by comparing the relative luminance of two colors on a scale from 1:1 (same color, no contrast) to 21:1 (pure black on pure white, maximum contrast). The concept exists because "readable" is not a design opinion. It is a measurable physical property of light. For years, accessibility advocates pushed for a standard that removed subjectivity from readability, and WCAG 2.0 in 2008 delivered one.

Contrast ratio is not the same as color contrast. Those two terms get swapped constantly, even by senior designers, but they measure different things. Color contrast is a perceptual quality: red versus green looks high contrast to most people, but that combination is nearly invisible to someone with red-green color blindness. Contrast ratio measures luminance only. It is colorblind-agnostic by design. A dark olive green against a light lime green might score 4.7:1 even though both read as "green." The ratio does not care about hue. It cares about brightness.

It is also not a guarantee of good design. A 21:1 ratio on 10px serif type in a wall of text is technically perfect and practically painful to read. Contrast ratio is a floor, not a ceiling. Passing WCAG means you have not failed accessibility on the most basic measurable axis. It does not mean you are done thinking about legibility, spacing, or cognitive load.

WCAG 2.1 sets three thresholds. AA level requires 4.5:1 for normal text and 3:1 for large text, defined as 18pt regular or 14pt bold and above. AAA level requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects that carry meaning need 3:1 against their adjacent colors. These numbers were not arbitrary. The Web Accessibility Initiative published the luminance formula in 2001 and validated the thresholds against data from users with low vision and aging eyes.

In 2021, the W3C published the first working draft of WCAG 3.0, which will replace the current formula with APCA (Advanced Perceptual Contrast Algorithm), developed by Andrew Somers at Myndex Research. APCA accounts for font weight, polarity (dark text on light versus light on dark), and the spatial frequency of letterforms. The existing formula was built for CRT monitors. APCA is built for LCD, OLED, and HDR displays. Material Design 3, Google's current design system, references APCA in its accessibility guidance. The transition is ongoing, but the direction is not in question.

Checking ratios is not the hard part anymore. Tools like Stark for Figma, the WebAIM Contrast Checker, and Adobe Color return a pass-fail result in under three seconds for any pair of hex values. Figma added a native contrast checker to its Inspect panel in 2023. The tooling is free, embedded in the same panel where you already work, and faster than opening a new tab. The only reason to ship a failing ratio is not knowing you were supposed to check.

Use contrast ratio checks on every text element, every interactive control, and every icon that carries meaning. Run them in both light and dark modes. Run them on hover states, disabled states, and error states. Most teams check the default state and call it done. The disabled button sitting at 1.8:1 fails silently until someone with low vision tries to parse whether that control is active or ghosted out.

Where the standard has real limits: decorative elements, illustration, and photography are explicitly exempt from WCAG. A hero image with a low-contrast gradient is not a compliance failure if no meaningful text lives inside it without a sufficient overlay. A brand color that fails 4.5:1 against white can still work at 24px bold, on a darker surface, or as an accent sitting on a passing background. The rule protects communication. It does not mandate beige. Swap the context before you kill the color.

Contrast ratio is the speed limit: you are allowed to disagree with it, but you are not allowed to pretend it does not exist.