Zasada 08

Kolor nie działa solo

Około 8 procent mężczyzn myli czerwień z zielenią, a każdy użytkownik miewa ekran w pełnym słońcu. Kolor wzmacnia znaczenie, ale nie może go nieść w pojedynkę: obok zawsze stoi label, ikona albo wzór.

Status systemu na dwa sposoby

Włącz skalę szarości, czyli świat części daltonistów i ekranów w słońcu. Lewa kolumna traci znaczenie, prawa czyta się dalej.

Skala szarości

✕ Sam kolor

API produkcyjne
Kolejka raportów
Płatności

✓ Kolor, ikona i etykieta

API produkcyjneDziała
Kolejka raportówOpóźnienia
PłatnościAwaria

Reguły

Każdy status ma oprócz koloru etykietę tekstową albo ikonę o innym kształcie.
Tekst trzyma kontrast co najmniej 4.5:1, duże napisy i ikony co najmniej 3:1.
Interfejs przechodzi test w skali szarości bez utraty informacji.
Czerwień i zieleń nigdy nie są jedyną różnicą między successem a błędem.

Wzorzec w kodzie

Status niesie kolor, kształt ikony i słowo naraz

<Badge tone="danger">
  <IkonaAwarii aria-hidden className="mr-1.5 size-3.5" />
  Awaria
</Badge>

Test skali szarości, jedna linia w konsoli przeglądarki

document.documentElement.style.filter = "grayscale(1)";