Choosing Accessible Color Contrast

Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and everyone's eyes struggle with low-contrast text in bright sunlight or on a dim screen. Contrast is the single highest-impact accessibility decision you make when choosing colors — and unlike most design questions, it has an objective, measurable answer.

What a Contrast Ratio Actually Is

The Web Content Accessibility Guidelines (WCAG) define contrast as the ratio between the relative luminance — perceived brightness — of two colors. The scale runs from 1:1 (identical colors) to 21:1 (pure black on pure white). Importantly, luminance is not intuitive: a saturated red and a saturated green can look wildly different to most people yet have nearly identical luminance, which is exactly why they become indistinguishable to someone with red-green color blindness. You cannot eyeball a ratio; you have to measure it with a contrast checker.

The Thresholds That Apply to You

WCAG level AA — the standard most laws and contracts reference — requires a ratio of at least 4.5:1 for normal body text and 3:1 for large text (roughly 24px regular or 19px bold and above). Interface components like button borders, form field outlines, and meaningful icons need 3:1 against their surroundings. The stricter AAA level raises body text to 7:1, which is worth aiming for in long-form reading experiences. Decorative elements, disabled controls, and logos are exempt. As a practical anchor: mid-gray text (#767676) on white sits almost exactly at 4.5:1 — anything lighter than that fails for body text.

Where Designs Usually Fail

The recurring offenders are placeholder text in form fields, light gray captions and timestamps, white text on brand colors that are brighter than they look (orange, yellow-green, sky blue), and text layered over photos. Each of these tends to be chosen for subtlety — which is another word for low contrast. Text over images deserves special care because the background luminance varies across the photo: the usual fixes are a dark overlay, a solid text panel, or checking the ratio against the lightest area the text can touch.

A Practical Workflow

Start from your brand palette and test every text-on-background pair you actually use, not just the primary one. When a pair fails, adjust lightness rather than hue — darkening a brand blue by 10–15% usually preserves its character while clearing 4.5:1. Build the passing combinations into named design tokens so nobody has to re-derive them, and re-check whenever you introduce a dark mode: colors that pass on white frequently fail on dark backgrounds, and vice versa. If you are building a palette from scratch, a palette generator paired with a contrast checker lets you validate combinations as you go instead of retrofitting accessibility at the end.

Contrast is not a constraint on good design — some of the most striking interfaces ever made are nearly monochrome. It is simply the difference between a site that everyone can read and one that quietly excludes a slice of every audience. Check your pairs with the Fast Tools color tools, or browse the other guides.