1.4.1 Użycie koloru

Kolor nie może być jedynym sygnałem, który mówi, co coś znaczy, co trzeba zrobić albo czym jeden element różni się od drugiego.

/ Czego wymaga

Kolor bywa najszybszą wskazówką na stronie: czerwona ramka przy polu z błędem, zielona kropka przy usłudze, która działa, niebieskie słowo, które okazuje się linkiem. Kryterium wymaga, żeby taka wskazówka nigdy nie stała sama. Wszędzie tam, gdzie kolor przekazuje informację, wskazuje działanie, skłania do reakcji albo odróżnia jeden element od drugiego, to samo musi mówić coś jeszcze, co widać: tekst, ikona, wzór, podkreślenie, zmiana kształtu. Chroni to osoby z zaburzeniami widzenia barw, osoby słabowidzące i wiele starszych osób, które słabo rozróżniają kolory, a także każdego, kto korzysta z ekranu monochromatycznego lub o ograniczonej palecie.

Wymaganie dotyczy wzroku, a nie technologii wspomagających. Tekst alternatywny odczytywany przez czytnik ekranu go nie spełnia, bo widząca osoba, która nie odróżnia czerwieni od zieleni, nigdy go nie usłyszy. Dwa kolory, które różnią się też jasnością i mają między sobą współczynnik kontrastu co najmniej 3:1, liczą się jako druga wskazówka wizualna, więc link wyraźnie ciemniejszy od otaczającego tekstu może przejść. Nie pomaga to tam, gdzie trzeba rozpoznać konkretny odcień, na przykład zielony dla poprawnego i czerwony dla błędnego. Samo użycie koloru nigdy nie jest błędem, a W3C zaznacza, że linki odwiedzone i nieodwiedzone odróżnione tylko kolorem nie naruszają kryterium, bo stan odwiedzenia autor może ostylować wyłącznie kolorem.

/ Jak strony go nie spełniają

Linki w akapicie mają odcień niebieskiego tylko trochę inny niż tekst, nie są podkreślone i osiągają wobec tego tekstu kontrast poniżej 3:1.
Pola wymagane oznaczono wyłącznie czerwoną etykietą, bez gwiazdki i bez słowa, że są wymagane.
Formularz pokazuje błędne pole tylko czerwoną ramką i obok nie pojawia się żaden komunikat tekstowy.
Wykres liniowy rozróżnia serie danych tylko kolorem, z legendą z kolorowych kwadratów i bez etykiet, znaczników czy linii przerywanych.
Kolumna statusu pokazuje zielone, żółte i czerwone kropki bez słowa i bez odrębnej ikony, więc stanu serwera albo zamówienia nie da się odczytać bez rozróżniania kolorów.

/ Jak sprawdzić samodzielnie

Wypisz wszystkie miejsca, w których kolor wydaje się coś znaczyć: linki w tekście, pola wymagane i błędne, serie na wykresach, plakietki statusu, wybraną kartę albo pozycję menu, legendy map.
Obejrzyj stronę bez koloru. W narzędziach deweloperskich Chrome otwórz panel Rendering, znajdź Emulate vision deficiencies i wybierz Achromatopsia, a potem powtórz z Protanopia i Deuteranopia.
Przy każdej pozycji z listy sprawdź, czy znaczenie przetrwało: podkreślenie albo ikona przy linkach, gwiazdka lub słowo „wymagane” przy polach, komunikat błędu w słowach, etykiety albo wzory na wykresie.
Tam, gdzie linki w tekście różnią się tylko jasnością, zmierz kolor linku względem koloru otaczającego tekstu w narzędziu do kontrastu. Wynik musi sięgać 3:1, a oba kolory nadal potrzebują 4,5:1 względem tła zgodnie z 1.4.3.
Wyślij formularz z błędami i sprawdź, czy każdy błąd jest opisany tekstem, a nie tylko zmianą koloru.

/ Jak to naprawić

Zostaw text-decoration: underline na linkach w treści albo daj im inną widoczną wskazówkę, na przykład większe font-weight. Jeśli podkreślenie znika, utrzymaj co najmniej 3:1 między kolorem linku a kolorem tekstu.
Oznacz pola wymagane gwiazdką albo słowem „wymagane” w samej etykiecie, objaśnij gwiazdkę na początku formularza i ustaw na polu atrybut required.
Każdy błąd walidacji pokaż jako tekst przy jego polu, z ikoną, jeśli projekt jej chce, i połącz komunikat z polem atrybutem aria-describedby.
Na wykresach podpisz linie bezpośrednio, nadaj każdej serii własny kształt znacznika albo wzór linii (stroke-dasharray w SVG) i podaj wartości w tabeli.
W każdej plakietce statusu obok kolorowej kropki umieść słowo, na przykład Działa, Spowolnienie albo Awaria, a bieżącą pozycję nawigacji oznacz aria-current="page" i widocznym podkreśleniem lub paskiem.

/ Co sprawdza nasz skaner

W naszym skanie nic nie zgłasza błędów pod 1.4.1. Kryterium pyta, czy kolor jest jedyną wskazówką, czyli o to, co widzi człowiek, a żadna z naszych reguł nie porównuje linku, stanu pola ani serii na wykresie z sąsiadami w poszukiwaniu drugiego sygnału wizualnego. HTML_CodeSniffer zgłasza przy 1.4.1 tylko przypomnienie, a skan zachowuje wyłącznie błędy. Audyt ręczny sprawdza to kryterium na stronie pokazanej w odcieniach szarości.

/ Kto je łamie, według naszych pomiarów

Cotygodniowy indeks nie ma danych dla tego kryterium, bo żaden test uruchamiany przez skan witryny go nie sprawdza. Ocenia je człowiek i do tego służy audyt ręczny.

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

Czy linki muszą być podkreślone, żeby spełnić WCAG 1.4.1?

Nie, ale link w tekście potrzebuje jakiejś wskazówki poza samym odcieniem. Podkreślenie jest najprostsze. Bez niego kolor linku musi różnić się od otaczającego tekstu współczynnikiem kontrastu co najmniej 3:1, co liczy się jako różnica jasności, a nie samego koloru. W3C zaznacza też, że link wyglądający dokładnie jak otaczający tekst nie narusza 1.4.1, bo do jego oznaczenia nie użyto koloru, choć trudno go znaleźć każdemu.

Czy 1.4.1 dotyczy wykresów, map i obrazów?

Tak. Kryterium obejmuje każdy wizualny sposób przekazywania informacji, więc wykres, mapa albo schemat, którego znaczenie opiera się tylko na kolorze, je narusza. Rozwiązaniem są podpisy, znaczniki, wzory albo liczby obok kolorów. To samo musi zawierać tekst alternatywny: W3C uznaje opis pomijający to, co oznaczały kolory, za błąd zarówno 1.1.1, jak i 1.4.1.

Czy użycie koloru to to samo co kontrast?

Nie. 1.4.1 należy do poziomu A i wymaga tylko, by kolor nigdy nie był jedyną wskazówką. Kontrast mierzy się w 1.4.3 dla tekstu, 4,5:1 dla zwykłego tekstu, oraz w 1.4.11 dla komponentów interfejsu i grafik, 3:1, oba na poziomie AA. Strona może przejść wszystkie testy kontrastu i mimo to naruszać 1.4.1, na przykład z ciemnoczerwonymi i ciemnozielonymi kropkami statusu, które obie dobrze odcinają się od bieli.

Zmierz własną stronę Wszystkie zmierzone bariery