Postrzegalność · Poziom A

1.4.1 Użycie koloru

Kolor nie może być jedynym sposobem przekazania informacji. Trzeba dodać inny sygnał wizualny, na przykład ikonę, etykietę tekstową, podkreślenie, kształt albo wzór.

Krótko

Nie przekazuj ważnej informacji wyłącznie kolorem. Użytkownik musi zrozumieć treść także wtedy, gdy nie widzi koloru albo widzi go inaczej.

Problem w praktyce

Na stronie formularz pokazuje błędne pola tylko na czerwono, wykres rozróżnia dane wyłącznie kolorami, a aktywna zakładka różni się tylko odcieniem. Użytkownik, który nie rozróżnia kolorów albo korzysta z innego sposobu odbioru treści, może nie wiedzieć, co jest błędem, co jest aktywne i co oznaczają dane.

To kryterium nie mówi przede wszystkim o kontraście tekstu. Mówi o tym, że kolor nie może być jedynym nośnikiem informacji, wskazania działania, prośby o reakcję ani wyróżnienia elementu wizualnego.

Kogo to dotyczy

  • Osób z zaburzeniami rozpoznawania barw, które mogą nie odróżniać czerwieni, zieleni, niebieskiego albo subtelnych odcieni.
  • Osób słabowidzących, dla których drobna różnica koloru może być niewidoczna.
  • Osób korzystających z ekranów o słabej jakości, niskiej jasności albo ograniczonej palecie kolorów.
  • Osób korzystających ze strony w słońcu, przy złym oświetleniu albo na małym ekranie telefonu.
  • Osób korzystających z technologii wspomagających, które nie zawsze przekazują informację zapisaną wyłącznie kolorem.
  • Użytkowników mobilnych, którzy często działają szybko i w trudniejszych warunkach odbioru.

Dobry przykład

  • Błędne pole formularza ma czerwone obramowanie oraz tekst „To pole jest wymagane”.
  • Wykres ma legendę, etykiety danych albo wzory, a nie tylko kolorowe serie.
  • Aktywna zakładka ma kolor oraz dodatkowo podkreślenie, obramowanie albo tekst „aktywny”.
  • Link w treści jest podkreślony, a nie wyróżniony wyłącznie kolorem.
  • Komunikat sukcesu ma kolor, ikonę i tekst, na przykład „Zapisano zmiany”.

Zły przykład

  • Instrukcja „Pola oznaczone na czerwono są wymagane” bez żadnego innego oznaczenia.
  • Wykres, w którym serie danych różnią się wyłącznie kolorem.
  • Aktywny element menu oznaczony tylko innym kolorem tekstu.
  • Linki w akapicie różniące się od zwykłego tekstu tylko kolorem.
  • Status „dostępne” i „niedostępne” pokazany wyłącznie zielonym i czerwonym kolorem.
  • Błąd formularza pokazany tylko czerwonym obramowaniem pola.

Przykłady kodu

Dobry przykład błędu formularza

Kolor może wspierać komunikat, ale informacja o błędzie musi być też tekstowa i powiązana z polem.

Kod — HTML

<label for="email">Adres e-mail</label>
<input
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<p id="email-error">
  Wpisz adres e-mail w formacie nazwa@example.com.
</p>

Jak to działa

Użytkownik dostaje jasny tekst błędu. Czerwony kolor może pomóc wzrokowo, ale nie jest jedyną informacją.

Zły przykład: sam kolor

Czerwone obramowanie samo w sobie nie mówi wszystkim użytkownikom, że pole zawiera błąd.

Kod — HTML

<label for="email">Adres e-mail</label>
<input
  id="email"
  name="email"
  class="field-error"
>

.field-error {
  border-color: red;
}

Jak to działa

Osoba, która nie zauważy czerwieni albo nie zna jej znaczenia w tym kontekście, nie dostaje informacji, co trzeba poprawić.

Dobry przykład linku w treści

Link jest rozpoznawalny nie tylko przez kolor, ale też przez podkreślenie, pogrubienie i widoczny fokus.

Kod — CSS

.article-content a {
  color: #5F28B4;
  font-weight: 700;
  text-decoration: underline;
}

.article-content a:focus-visible {
  outline: 3px solid #FA9632;
  outline-offset: 3px;
}

Jak to działa

Użytkownik widzi, że element jest linkiem nawet wtedy, gdy sam kolor tekstu nie wystarcza.

Przykład graficzny

To jest statyczne demo edukacyjne. Pokazuje różnicę między informacją oznaczoną samym kolorem a informacją oznaczoną kolorem, tekstem i kształtem.

Źle

Statusy różnią się tylko kolorem. Bez rozpoznania barwy nie wiadomo, co oznaczają.

  • Pakiet A
  • Pakiet B

Problem: znaczenie zielonego i czerwonego koloru nie jest opisane tekstem.

Dobrze

Statusy mają kolor, ikonę tekstową i opis. Informacja nie znika, gdy kolor jest niewidoczny.

  • Dostępne: Pakiet A
  • Niedostępne: Pakiet B

Kolor pomaga, ale tekst i symbol przekazują tę samą informację innym sposobem.

Porównanie pokazuje, że kolor może być dodatkiem, ale nie powinien być jedynym sposobem oznaczania statusu.

Jak sprawdzić

  1. Przejrzyj stronę i znajdź miejsca, w których kolor coś oznacza.
  2. Sprawdź formularze, komunikaty, wykresy, statusy, linki, menu i zakładki.
  3. Zadaj pytanie: czy ta informacja byłaby zrozumiała bez koloru?
  4. Sprawdź, czy błąd, sukces, aktywny stan albo status mają tekst, ikonę, kształt, wzór, podkreślenie albo inne oznaczenie.
  5. W formularzach sprawdź, czy komunikaty błędów są tekstowe.
  6. W wykresach sprawdź, czy dane mają etykiety, legendę, wzory albo inne oznaczenia poza kolorem.
  7. W linkach sprawdź, czy są rozpoznawalne nie tylko kolorem.
  8. Przetestuj stronę narzędziem symulującym zaburzenia widzenia barw, na przykład w DevTools albo rozszerzeniu przeglądarki.
  9. Nie kończ oceny na automacie. W tym kryterium wymagana jest ocena manualna.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • Część problemów z kontrastem.
  • Część pól formularza bez etykiet.
  • Niektóre problemy z linkami i stanami fokusu.
  • Część błędów strukturalnych.

Automat nie oceni pewnie

  • Czy kolor jest jedynym nośnikiem informacji.
  • Czy wykres jest zrozumiały bez rozróżniania kolorów.
  • Czy użytkownik rozpozna aktywny element menu.
  • Czy komunikat błędu jest zrozumiały bez czerwonego koloru.
  • Czy statusy zielony i czerwony są opisane tekstowo.

Typowe błędy

  • Instrukcja „pola na czerwono są wymagane”.
  • Czerwony i zielony jako jedyne oznaczenie statusu.
  • Wykresy bez etykiet i bez wzorów.
  • Linki wyróżnione tylko kolorem.
  • Aktywna zakładka oznaczona tylko innym odcieniem.
  • Komunikaty sukcesu i błędu różniące się tylko kolorem.
  • Mapy i infografiki, w których legenda opiera się wyłącznie na kolorze.