A reservation form marks a field with a visible border, a field label, and a specific error message; focus remains prominent while the person corrects it.
Chapter 05 / 14
Use color to reinforce meaning
Build a color system that keeps actions and states clear across contexts.
Your goalChoose one success, one error, and one focus state. Write the text and visual cues that communicate each state, then check contrast.
01 / Begin with the task
The principle
Color can draw attention, connect related elements, and signal a state. Words, shape, and position carry the same message when a person sees color differently or uses another display mode.
- Semantic color
- A color role associated with an action or state, such as focus, success, or error.
- Contrast
- The visible difference between foreground and background that helps content remain perceivable.
- Redundant cue
- A second visible signal, such as text or an icon, that explains the same state.
Define a small set of color roles for text, links, focus, borders, surfaces, success, and errors. Apply each role consistently. Pair every consequential color change with a clear label or state message. The color then helps people scan while the text explains exactly what happened.
Check text and interface contrast against the relevant accessibility criteria. Also inspect the page in grayscale, at high zoom, and during keyboard navigation. These views reveal whether meaning and focus remain visible through more than one cue.
02 / Follow a method
Apply it in four steps
- Name color roles by purpose rather than by hue.
- Pair state colors with precise text and visible controls.
- Check contrast for text and interface elements.
- Review grayscale, focus, error, and success states.
03 / Compare outcomes
Strong and weak execution
A reservation form turns a field red and leaves the correction implicit, so the person searches for the reason and the next action.
Why the outcome changes
The strong state uses color to draw attention and text to explain the exact correction. The weak state puts the entire message in a color change. Review the same form in grayscale and by keyboard, then check whether the error, focus, and next action remain clear.
04 / Use the method
Practice on a real screen
Choose one success, one error, and one focus state. Write the text and visual cues that communicate each state, then check contrast.
Review your work
- Each consequential color has a matching text or shape cue.
- Focus and errors remain clear in grayscale.
- Text and interface elements meet the relevant contrast criteria.
Keep your observation, interpretation, and proposed change together. Use the related patterns to inspect complete interaction states.