M&DMICHAEL & DiVIP STUDIO
077 206 88 88
24 Hoholia Street, Bucha, Ukraine
24/7 · Around the clock
← Back to journal

VIP STUDIO MICHAEL & Di · 25.10.2026

Color is not the only signal

Abstract colored interface tiles paired with distinct geometric shapes.
Original AI-generated conceptual illustration; not a photograph of the studio or a client project.

Give meaning a second route

Color can create a mood before a visitor reads a word. It can also quietly take on a second job: explaining whether a request succeeded, which option is selected, or which line belongs to which series. Those two jobs deserve different treatment. A decorative blue glow can remain decorative. A colored dot that determines the next action needs a readable companion. Our design starting point is simple: write down the message first, then decide which visual signals will carry it.

Name the state, not the paint

WCAG 2.2 criterion 1.4.1 says that color must not be the only visual means of communicating information. For a status badge, that suggests a practical edit: replace an unexplained amber dot with a label such as “Awaiting review”, perhaps accompanied by a clock symbol. The label tells the story; color helps scanning. Avoid instructions like “choose the green item”. Name the item or its purpose instead. A monochrome view should not turn a meaningful list into a guessing game.

Make errors useful at the field

Imagine a contact form whose email field acquires a red border after submission. The visitor still has to discover what went wrong. Add a nearby message such as “Enter an email address including @”, keep the existing input, and connect the message to its field in the implementation. A visible warning symbol can reinforce the message without replacing it. Treat visible communication and assistive-technology communication as separate checks: a hidden announcement does not supply a visible alternative to color, and a visible label does not automatically describe a dynamic change to a screen reader.

Let charts explain themselves

For a small project schedule, put a short series label near each line rather than forcing repeated journeys to a distant color legend. Combine line styles or point shapes where they remain legible. For a dense chart, simplify the comparison before adding more patterns; visual redundancy should not become visual noise. If exact values matter, provide a clearly labeled table alongside the chart. Ask a concrete question during review: can someone identify the delayed phase without knowing which line was drawn in orange?

Do not confuse distinction with visibility

A triangle and a circle are different, but both can disappear when drawn too faintly. WCAG 1.4.11 separately addresses contrast for essential control and graphic information, generally requiring 3:1 against adjacent colors, with defined exceptions. Contrast and meaningful differentiation therefore need their own checks. Making red and green darker is not enough when the instruction still depends on recognizing which is red. Likewise, a generous label cannot rescue an unreadable icon if that icon alone identifies a control.

Review the complete journey

As a quick design exercise, inspect a grayscale version and explain each state aloud without naming any colors. This can reveal dependencies, but it is not a WCAG conformance test or a simulation of every person’s vision. Then check actual contrast, keyboard focus, selected and error states, and how updates are exposed to assistive technology. Include the narrow layout: a helpful label can become useless if it is hidden on mobile. The objective is not to remove color. It is to let color support an interface whose meaning survives without it.

Continue with keyboard navigation and visible focus

Sources

Read next

Downloads without surprises: explain the file before the click