Accessible Color Systems: A Practical Contrast Checklist for Brand and UI Assets
Beautiful palettes fail when they only work in a moodboard. A production color system has to survive buttons, charts, forms, disabled states, screenshots, PDFs, dark mode, and exported social graphics.
This guide gives designers a practical checklist for creating color assets that look good and remain readable.
The Short Answer
An accessible color system needs:
- a neutral text scale;
- tested foreground/background pairs;
- separate semantic colors for success, warning, danger, and information;
- chart colors that do not rely on hue alone;
- dark-mode values selected manually, not auto-inverted;
- documentation that tells designers what not to combine.
The goal is not to make every color work with every other color. The goal is to define safe combinations.
1. Start With Text, Not Accent Colors
Most palettes begin with a signature brand color. Accessibility begins with text.
Define:
| Token | Use |
|---|---|
| text-primary | Body copy and key labels |
| text-secondary | Supporting copy |
| text-muted | Metadata and placeholders |
| surface | Main background |
| surface-raised | Menus, cards, panels |
| border | Dividers and control outlines |
If these six values are weak, no accent color will save the interface.
2. Create Approved Pairings
Do not hand off a palette as loose swatches. Hand off pairings.
Example:
| Background | Approved foreground |
|---|---|
| Brand blue 700 | White |
| Brand blue 100 | Brand blue 900 |
| Warning amber 100 | Neutral 950 |
| Danger red 700 | White |
| Success green 100 | Green 950 |
This prevents a common mistake: using a medium accent as both text and background.
3. Test Real Components
Contrast is contextual. Test the palette in real components:
- primary button;
- secondary button;
- disabled button;
- text input;
- selected tab;
- alert banner;
- table row;
- chart legend;
- tooltip;
- small metadata label.
Small text, thin fonts, translucent overlays, and busy images all reduce practical readability.
4. Do Not Use Color Alone
Charts and status badges need shape, labels, patterns, or icons.
Weak pattern:
- green means approved;
- red means rejected.
Stronger pattern:
- approved uses green plus a check icon and the word "Approved";
- rejected uses red plus an X icon and the word "Rejected";
- pending uses amber plus a clock icon and the word "Pending."
This helps color-blind users and improves scanning for everyone.
5. Dark Mode Is a Separate Palette
Do not simply invert light-mode colors. Inverted palettes often create glowing text, muddy borders, and high-saturation accents that vibrate.
For dark mode:
- lower saturation on large surfaces;
- reserve bright colors for small active states;
- use softer borders;
- check focus rings;
- test charts on dark backgrounds;
- avoid pure black if long reading is required.
6. Export Rules for Asset Packs
If you are creating downloadable templates, include:
- color tokens;
- approved text/background combinations;
- chart palette order;
- do-not-use pairings;
- dark-mode variants;
- examples of accessible badges and buttons.
This turns a design asset into a usable system, not just a pretty file.
FAQ
Should every brand color meet contrast requirements?
No. Decorative colors can exist. But every color used for text, icons, controls, or data meaning needs tested pairings.
Are contrast checkers enough?
They are necessary but not sufficient. Also test font weight, size, line height, background complexity, and real component states.
What is the most common palette mistake?
Too many mid-tone colors. Mid-tones often fail as text and feel weak as backgrounds. Strong systems include clear light and dark values.
What to Read Next
For performance-sensitive assets, read our high performance visuals guide. For design systems, continue with the technical asset audit.