Creating Accessible Text Colors: Design System Guide

Colors are a big part of the experience when designing accessible products. At the same time, they're often the part of the brand hardest to compromise on. Many designers fear accessibility requirements will limit their creativity.

The truth? A well-designed color system that meets WCAG actually looks better than one that doesn't. Contrast creates visual hierarchy. Clear color differences make interfaces easier to understand for everyone.

In this guide, we show how to build a color system that meets legal requirements while strengthening your brand.

Start with a color inventory

Before you can improve anything, you need to know what you have. Collect all colors used in the product today and sort them by use:

Then test contrast on your primary combinations. Use tools like WebAIM Contrast Checker or Stark plugin for Figma. Document results in a table – you'll need it later.

Build color scales with built-in contrast

The smartest solution for accessible colors is building scales from the start. Instead of having a single blue color, create a scale from 50 (lightest) to 900 (darkest).

The key is designing scales so certain combinations always work. For example:

Tools like Tailwind CSS already have color scales with this in mind. Use them as starting point and adapt to your brand.

A color system with built-in contrast rules eliminates guessing and makes it impossible for the team to choose inaccessible combinations.

Maintain brand tonality

'But our primary color doesn't meet 4.5:1!' – This is a common objection, but it has solutions.

If your brand color is too light for text, use it differently:

Spotify is a good example. Their iconic green (#1DB954) has too low contrast for white text. Solution? They use black text on green buttons. Simple, effective, still recognizable.

Alternatively, create an 'accessible variant' of the color that's close to original but meets requirements. Often minimal saturation or lightness adjustment is enough.

Don't forget dark mode

Dark mode isn't just a trend – it's an accessibility requirement for many users with light sensitivity or migraines. But it introduces new challenges:

Test contrast in both modes. It's common for a combination that works in light theme to fail in dark – or vice versa.

Implementation in code

When the color system is defined, document it as design tokens. In CSS it might look like:

--color-text-primary: #1a1a1a;

--color-text-secondary: #666666;

--color-text-on-primary: #ffffff;

Use semantic names (text-primary, background-surface) instead of color names (black, gray-500). This makes theme switching easier and ensures the right color is always used in the right context.

Add linting rules that warn if someone uses hardcoded color values instead of tokens.