Czerwona ramka oznacza błąd. Zielona kropka oznacza „aktywny”. Niebieski tekst jest linkiem. Na pierwszy rzut oka wszystko jest jasne – pod warunkiem, że użytkownik widzi te różnice tak samo jak projektant. WCAG nie zakazuje używania koloru. Wymaga tylko, żeby kolor nie był jedynym nośnikiem ważnej informacji.

Zasada jest prostsza, niż brzmi

Kryterium WCAG 2.2 1.4.1 „Use of Color” mówi, że koloru nie wolno używać jako jedynego wizualnego sposobu przekazywania informacji, wskazywania działania, wywoływania reakcji albo odróżniania elementu. W3C podaje banalnie znajome przykłady: wymagane pola oznaczone tylko czerwienią, błędy pokazane wyłącznie na czerwono czy serie danych rozróżnione wyłącznie kolorami.

Naprawa zwykle nie wymaga przebudowy designu. Najczęściej wystarczy dodać drugi sygnał: tekst, ikonę, kształt, wzór, podkreślenie albo inną wyraźną cechę wizualną. Kolor może zostać. Po prostu przestaje być jedyną instrukcją obsługi.

WebsiteGarage / Usługi

Sprawdź nasze usługi.

Formularz: czerwona ramka nie mówi, co się stało

To jeden z najbardziej praktycznych testów. Wyślij formularz z pustym wymaganym polem albo błędnym adresem e-mail. Jeśli jedyną zmianą jest czerwony obrys pola, komunikat zależy wyłącznie od percepcji koloru. Lepszy wzorzec łączy kolor z komunikatem tekstowym, na przykład „Podaj poprawny adres e-mail”, i poprawnie wiąże błąd z konkretnym polem.

Tak samo z oznaczeniem pól obowiązkowych. Sam czerwony kolor etykiety nie wystarczy. Gwiazdka z wyjaśnieniem, słowo „wymagane” albo inny czytelny wskaźnik daje informację niezależnie od tego, jak użytkownik widzi barwy.

Statusy: zielona kropka i czerwona kropka to za mało

Panele klienta, systemy rezerwacji, magazyny i dashboardy uwielbiają statusy w formie kropek. Zielona oznacza „OK”, czerwona „problem”, żółta „uwaga”. Taki system jest szybki wizualnie, ale nie powinien kończyć się na barwie. Dodanie tekstu „aktywny”, „błąd”, „oczekuje” albo odpowiedniej ikony sprawia, że status pozostaje zrozumiały także bez rozróżnienia kolorów.

Wykres: legenda w pięciu kolorach nie wystarczy

Na wykresach problem pojawia się szczególnie łatwo, bo kilka serii danych często różni się tylko odcieniem. Rozwiązaniem może być bezpośrednie podpisanie linii, zastosowanie różnych wzorów lub markerów albo inne kodowanie, które nie znika razem z kolorem. Wykres nadal może być kolorowy. Ma po prostu pozostać czytelny również wtedy, gdy barwy przestaną wykonywać całą pracę.

Linki: kolor nie zawsze jest wystarczającą wskazówką

Jeśli link wewnątrz akapitu od zwykłego tekstu różni się tylko kolorem, trzeba sprawdzić, czy zastosowane rozwiązanie faktycznie spełnia warunki WCAG. Najprostsza i najbardziej odporna na pomyłki metoda to nadal klasyczne podkreślenie albo inny widoczny sygnał, który nie zależy wyłącznie od odcienia.

To nie jest wojna z kolorem

W3C wprost zaznacza, że kolor jest ważnym narzędziem designu i może poprawiać użyteczność oraz dostępność. Problem zaczyna się dopiero wtedy, gdy po zabraniu koloru znika znaczenie. Dobrze zaprojektowany interfejs może używać zieleni, czerwieni, limonki i magenty do woli, o ile użytkownik nie musi rozpoznać konkretnej barwy, żeby zrozumieć, co ma zrobić.

Szybki test, który można zrobić bez audytu

  • spróbuj wysłać każdy formularz z błędem i sprawdź, czy komunikat istnieje także poza kolorem,
  • przejrzyj statusy, badge i alerty – czy zawierają tekst, symbol albo inny drugi sygnał,
  • sprawdź wykresy i legendy – czy serie da się rozróżnić bez odgadywania barwy,
  • sprawdź linki w ciągłym tekście – czy są widoczne także dla osoby, która nie rozpoznaje różnicy odcieni.

Włączenie skali szarości może być użytecznym testem orientacyjnym: szybko pokazuje miejsca, w których design opiera się prawie wyłącznie na barwie. Nie jest jednak symulatorem wszystkich rodzajów zaburzeń widzenia kolorów i nie zastępuje testu WCAG.

Komentarz WebsiteGarage

To jeden z tych problemów dostępności, które wyglądają na „specjalistyczne”, dopóki nie zobaczy się ich w normalnym formularzu kontaktowym. Potem okazuje się, że poprawka to często jedno zdanie obok czerwonej ramki albo jedna ikona przy statusie.

I właśnie dlatego warto to sprawdzać. Nie każdy błąd WCAG wymaga wielkiego projektu, przebudowy frontendu i tygodnia spotkań. Czasem wystarczy przestać oczekiwać, że kolor będzie jednocześnie dekoracją, komunikatem, instrukcją i systemem alarmowym.