17 · Icon, word and color: always all three
Clinical states and semantics
In a medical schedule, confusing “confirmed” with “to be confirmed” has consequences. A state never depends on color: it is read by its icon, by its word and, in addition, by its color.
Each state has its own icon shape (circle with a mark, clock, triangle, circle with a dash, octagon). The icons stay distinct even in grayscale or with color blindness. Try the filters.
ConfirmedThe patient confirmed she will attend.
To confirmThe reminder has not been answered yet.
Needs attentionTwo appointments overlap at 10:00 a.m.
CanceledThe appointment was canceled. The time slot is free.
Could not saveCheck your connection and try again.
Rules
- Three signals
- Each state combines icon, word and color. If someone sees only one of the three, they still understand.
- No yellow
- The brand yellow does not code any state. “Needs attention” uses burnt orange with a triangle.
- No red by default
- Red only for what could not be done. A canceled appointment is gray: it is a fact, not a failure.
- Text always visible
- The state word is on screen, not only as accessible information. Icons carry an equivalent text.
- Glowness and contrast
- Each color passes 4.5:1 on its background in both themes. The values are in the table below.
- Language
- No capitals, no exclamation marks and no dramatic words: “Needs attention”, not “ALERT!”.
State colors
| State | Icon | Light | Dark |
|---|---|---|---|
| Confirmed | #1f7a5c | #4fc79b | |
| To confirm | #2563a8 | #6aa6f0 | |
| Needs attention | #a8480a | #ff9a4d | |
| Canceled | #5b5441 | #a3a3ad | |
| Could not save | #b3261e | #ff6b61 |
Labels and chips
ConfirmedTo confirmNeeds attentionCanceledCould not save
Labels are at least 24 px high (the WCAG 2.2 minimum target) and 44 px if they can be tapped.
Do
- Icon + word + color, always
- Burnt orange with a triangle for “Needs attention”
- Gray for what is canceled or inactive
- Test the screen in grayscale before publishing it
Don't
- A color dot alone
- Solar yellow as a warning
- Red for a canceled appointment
- Green and red as the only contrast between two states
- Capitals or exclamation marks in the message