Design Without Relying on Color Alone

Color can support meaning without carrying it alone

WCAG’s Use of Color criterion says color should not be the only visual means used to convey information, indicate an action, prompt a response, or distinguish a visual element. The design response is not “stop using color.” It is to add another cue that remains available when the color difference is missed.

Where color-only designs fail most often

Compact interfaces encourage teams to remove labels and let color do more work. Common examples include green/red availability dots, links differentiated only by hue, required fields indicated only by red labels, heat maps with no numeric values, and focus states that change only color. These patterns can also fail on low-quality displays, under glare, in screenshots, or when printed.

Do not use simulation as a diagnosis

A color-vision-deficiency simulator can expose fragile relationships, but it cannot reproduce exactly how every individual perceives a screen and it is not a medical diagnostic tool. Use simulation as one design review technique alongside contrast checks, semantic markup, labels, keyboard testing, and human review.

Colorrow’s Color Blindness Simulator compares original and simulated colors, palettes, and images. Treat any discovered ambiguity as a prompt to add redundant cues rather than as a prediction of one person’s vision.

Build redundancy into components

It is easier to solve color dependence in the component system than screen by screen. Define how links look in body copy, how errors are labeled, how selected controls differ from unselected controls, and how focus is shown. When the component already carries a second cue, product teams do not need to remember the accessibility rule every time they reuse it.

Contrast and color dependence are different questions

A red and green pair can have enough luminance difference to be distinguishable and still be a poor choice if the interface expects users to memorize what each hue means. Conversely, two colors may be easily named but fail text-contrast requirements. Review both questions: can the element be perceived, and can its meaning be understood without color alone?

A practical review pass

1. Temporarily remove or desaturate color and look for lost states or categories.
2. Keyboard through the page and verify focus is clearly visible.
3. Run the palette through a color-vision-deficiency simulation.
4. Check text and essential UI contrast separately.
5. Add labels, icons, patterns, position, or shape where meaning is fragile.
6. Retest the actual interactive states, not only a static mockup.