Color Accessibility & Semantic Systems

This isn't a taste problem. It's a system problem - and system problems have system solutions.

Color Rules

Color rules are the decisions you make once so you don't have to make them a hundred times again. Which blue is the primary action color. What contrast ratio text needs to meet. How error states look. What surfaces do in dark mode.

Done well, rules are invisible. Users don't notice that every CTA is the same color, that every error state has both a red icon and a text label, that light mode and dark mode feel like the same product. They just notice that the product feels consistent, reliable, and polished.

Done badly - or skipped entirely - rules turn into archaeology. Every decision buried somewhere in a Figma file, recreated from memory by whoever's working that week, slightly wrong each time.

The other thing rules do is protect users who experience color differently from the rest of us. About 8% of men have some form of color vision deficiency. Low contrast text slows reading for everyone and makes it impossible for some. These aren't edge cases - they're a significant portion of your users, and ignoring them because "it looks fine on my monitor" is a choice with consequences.

Contrast & Legibility

Light gray text on a white background is one of design's most persistent bad habits. It photographs beautifully in portfolio mockups. It looks sophisticated in Dribbble shots. It also makes text difficult or impossible to read for a substantial chunk of your users. That includes people in bright sunlight, people on older or cheaper screens, people older than 40 whose contrast sensitivity has declined, and people with any number of visual conditions.

The answer isn't to abandon subtlety. It's to understand what contrast actually is, what the numbers mean, and how to use them without making everything look like a government website from 2003.

What Contrast Ratio Means

Contrast ratio measures the difference in luminance between two colors - how much light one reflects compared to the other. The scale runs from 1:1 (identical, no contrast at all) to 21:1 (black on white, the maximum possible).

The formula involves the relative luminance of each color - a measure that accounts for the fact that the eye doesn't perceive all wavelengths equally. Green contributes more to perceived brightness than blue does. So the math isn't just "how dark is this color" - it's a weighted calculation that matches human perception.

In practice, you don't calculate this by hand. You put two HEX values into a contrast checker and read the number.

The WCAG Standards

WCAG (Web Content Accessibility Guidelines) is the standard most design teams use. It defines two levels:

AA is the standard most products aim for. It requires:

• 4.5:1 for normal text (under 18pt regular, or under 14pt bold)
• 3:1 for large text (18pt regular or 14pt bold and above)
• 3:1 for UI components and graphical objects (button borders, input outlines, icons that carry meaning)

AAA is the enhanced level, stricter and harder to achieve:

• 7:1 for normal text
• 4.5:1 for large text

AA is the minimum worth aiming for. AAA is worth pursuing for body text-heavy products - reading apps, editorial sites, anything users spend serious time with.

To put those numbers in context: that light gray text on a white background you liked? It's probably sitting around 2:1 or 3:1. A ratio that feels like "good enough to squint through" and misses the standard by a significant margin.

Three Types of Contrast - and Which One Matters Most

Contrast in color comes in three flavors, and they do different things.

Value contrast (light vs dark) is the one that carries legibility. It's what survives when you desaturate to grayscale, what works for colorblind users, what holds up in bright light and on low-quality screens. This is the contrast the WCAG numbers measure. When in doubt, value contrast is the one to get right first.

Hue contrast (different colors) creates visual interest and helps differentiation, but it's unreliable as the only form of contrast. Red text on green background looks different to most people - but not to someone with red-green color blindness, and not when printed on a black-and-white printer. Hue contrast is a supplement, not a foundation.

Saturation contrast (vivid vs muted) works well for hierarchy and focus - a bright accent in a muted palette jumps out - but like hue contrast, it doesn't carry legibility on its own.

Design for value contrast first. Layer in hue and saturation contrast for richness and meaning. This ordering also means your design will work in grayscale, which is a useful quick test.

APCA - the Emerging Alternative

WCAG's contrast formula has been the standard since 2008, and it has a known problem: it measures contrast the same way regardless of text size, weight, font, and context. A thin light typeface at 14px and a bold heavy typeface at 14px get the same minimum ratio requirement - even though the thin one is dramatically harder to read.

APCA (Advanced Perceptual Contrast Algorithm) is the method being developed for WCAG 3.0. It accounts for text size and weight, produces different minimum thresholds depending on usage, and more accurately reflects how humans actually experience contrast. It's not yet an official standard, but it's worth knowing about - and some teams are already using it alongside WCAG AA.

For most projects right now: meet WCAG AA, aim for AAA on text, and watch APCA's progress.

Pro tip: The fastest way to check contrast in your workflow is the Contrast plugin for Figma (or Stark, if you also want color blindness simulation). Select two colors and get the ratio instantly. Build the habit of checking as you go - catching a contrast problem at the end of a project is much more painful than catching it while you're still choosing colors.