WCAG 1.4.1 Użycie koloru

Kryterium sukcesu 1.4.1 zapewnia, że informacja nie ginie dla osób, które widzą kolory inaczej albo wcale — osób z zaburzeniami widzenia barw, słabowidzących i każdego, kto korzysta z ekranu monochromatycznego lub trybu wysokiego kontrastu. To poziom A i część normy EN 301 549 (punkt 9.1.4.1); na tej normie opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Kolor nie może być jedynym wizualnym środkiem:

• przekazywania informacji („ceny promocyjne są czerwone”);
• wskazywania działania;
• zachęcania do reakcji;
• wyróżniania elementu wizualnego (np. linku wewnątrz akapitu).

Kolor nadal można stosować — potrzebna jest tylko druga wskazówka wizualna: tekst, ikona, podkreślenie, wzór lub kształt.

W przypadku linków w tekście dokument W3C Understanding uznaje różnicę jasności za dodatkową wskazówkę: jeśli kolor linku ma kontrast co najmniej 3:1 względem otaczającego tekstu (technika G183), link uważa się za rozróżnialny. Linki, które wizualnie w ogóle się nie wyróżniają, wykraczają poza zakres 1.4.1, choć trudno z nich korzystać.

Typowe błędy w sklepie internetowym

• linki w opisach produktów, regulaminach lub stopce pokazane tylko nieco innym kolorem, bez podkreślenia;
• błędne pola formularza oznaczone wyłącznie czerwonym obramowaniem;
• dostępność towaru pokazana jako zielona lub czerwona kropka bez tekstu („Dostępny”, „Niedostępny”);
• próbki kolorów bez nazw, przez co kupujący nie odróżni „granatowego” od „czarnego”;
• wykresy lub tabele rozmiarów, w których kategorie różnią się tylko kolorem;
• wybrany rozmiar lub bieżący krok pokazany tylko zmianą koloru.

Jak to sprawdzić

Automatycznie: nasz skaner oznacza linki wewnątrz bloku tekstu, które można odróżnić od otaczającego tekstu wyłącznie kolorem (reguła link w bloku tekstu). Innych zastosowań koloru — kropek statusu, stanów błędu, wykresów — nie da się ocenić automatycznie; potrzebna jest ręczna kontrola.

Ręcznie: obejrzeć stronę w skali szarości (rozszerzenie przeglądarki lub filtr kolorów systemu operacyjnego). Wszystko, czego nie da się już zrozumieć — co jest linkiem, które pole ma błąd, która opcja jest wybrana — nie spełnia kryterium. Sprawdzić stany po najechaniu, z fokusem, błędu i zaznaczenia.

Jak to naprawić

• Podkreślać linki w tekście, przynajmniej w treści głównej oraz po najechaniu i otrzymaniu fokusu.
• Dodawać tekst i ikonę do komunikatów o błędach i dostępności towaru.
• Pokazywać nazwę każdej próbki koloru, przynajmniej jako dostępną nazwę i po wybraniu.
• Na wykresach stosować oprócz koloru wzory, etykiety lub bezpośrednie opisy.
• Oznaczać wybraną opcję obramowaniem, znacznikiem lub pogrubieniem, a nie tylko nowym kolorem.

Powiązane kryteria

• 1.4.3 Kontrast (minimum) — 4,5:1 dla tekstu.
• 1.4.11 Kontrast elementów nietekstowych — 3:1 dla ikon i elementów sterujących.
• 1.3.3 Właściwości zmysłowe — instrukcje oparte na kolorze.

Najczęstsze pytania

Czy linki w tekście muszą być podkreślone?

Nie zawsze, ale sam kolor nie wystarcza, chyba że daje różnicę jasności co najmniej 3:1 względem otaczającego tekstu (technika W3C G183). Najprostsza i najpewniejsza opcja to podkreślenie.

Czy czerwone obramowanie błędnego pola wystarczy?

Nie. Należy dodać drugą wskazówkę niezależną od koloru, np. ikonę i komunikat o błędzie w formie tekstu. Kryterium 3.3.1 Identyfikacja błędu również wymaga opisania błędu tekstem.

Czy 1.4.1 zabrania kodowania kolorami?

Nie. Kolor jest dozwolony i pomocny; po prostu nie może być jedynym środkiem wizualnym. Obok niego należy dodać tekst, wzór, ikonę lub kształt.

Czy 1.4.1 dotyczy kontrastu?

Nie. Kontrast tekstu to 1.4.3, a ikon i elementów sterujących — 1.4.11. 1.4.1 dotyczy koloru jako jedynego sygnału, niezależnie od kontrastu.