Een tabel met aanvragen. Groen: goedgekeurd. Rood: afgewezen. Oranje: in behandeling.
Jij ziet drie statussen. Iemand met kleurenblindheid ziet drie varianten bruin.
En er staat nergens tekst die de status aangeeft. Alleen kleur.
<!-- Niet doen: alleen kleur -->
<td style="background-color: green;">Goedgekeurd</td>
<td style="background-color: red;">Afgewezen</td>
<!-- Wel doen: kleur + tekst + icoon -->
<td style="background-color: green; color: white;">
✓ Goedgekeurd
</td>
<td style="background-color: red; color: white;">
✗ Afgewezen
</td>
Het verschil: de tekst “Goedgekeurd” en “Afgewezen” en de iconen ✓ en ✗ zijn leesbaar ongeacht of je kleuren kunt zien.
Dit speelt niet alleen bij tabellen. Bijvoorbeeld:
- Dashboards met gekleurde kaartjes
- Kalenders met gekleurde evenementen
- Kanban-borden met gekleurde labels
- Beschikbaarheidsindicatoren (groen bolletje = online)
Overal waar kleur de status communiceert, moet er een tweede indicator zijn.
De test: zet je scherm op grijstinten. Kun je nog steeds alle statussen onderscheiden?
