1.4.1 Użycie koloru - poziom A

Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji, wskazywania czynności do wykonania lub oczekiwania na odpowiedź, czy też wyróżniania elementów wizualnych.

O co tu chodzi w praktyce?

Jeśli jedyną wskazówką jest kolor, to część osób po prostu jej nie zauważy albo zinterpretuje inaczej. Dlatego informacja ma być dostępna również „bez koloru”, czyli przez coś dodatkowego: tekst, ikonę, wzór, podkreślenie, etykietę, komunikat.

W dokumentacji W3C to kryterium jest opisywane właśnie jako zasada: kolor może pomagać, ale nie może być jedynym nośnikiem znaczenia.

Gdzie to najczęściej się psuje?

Najczęstsze przypadki:

• W formularzu: pole z błędem jest tylko na czerwono, a użytkownik nie dostaje żadnej informacji tekstowej, co jest nie tak i gdzie.
• W formularzu: pola wymagane są oznaczone tylko kolorem (np. czerwony opis), bez jasnego oznaczenia w tekście.
• W treści: linki różnią się od zwykłego tekstu tylko kolorem.
• W wykresie lub legendzie: serie danych różnią się wyłącznie kolorem, bez wzorów, opisów albo innych rozróżników.

Jak pisać i publikować, żeby spełnić 1.4.1?

Najprościej: zostaw kolor jako wsparcie, ale dodaj drugi sygnał.

1. Jeśli coś jest błędem, dodaj komunikat tekstowy przy polu (a nie tylko czerwoną ramkę).
2. Jeśli coś jest wymagane, oznacz to również tekstowo (np. informacją wymagane).
3. Jeśli coś jest linkiem w tekście, zadbaj, żeby był rozpoznawalny także bez koloru (często rozwiązuje to podkreślenie).
4. Jeśli masz wykres, dopilnuj, żeby dało się rozróżnić elementy bez patrzenia na barwy (np. wzory, opisy, wartości).

Jak to szybko sprawdzić?

Najprostszy test jest bez narzędzi: przejrzyj stronę i zadaj sobie pytanie, czy użytkownik zrozumie komunikat, rozpozna link, odczyta błąd i rozróżni elementy jeśli nie widzi różnic kolorystycznych. Jeśli nie, to niespełnione kryterium 1.4.1. :(

Pełny tekst kryterium 1.4.1 Użycie koloru

Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji, wskazywania czynności do wykonania lub oczekiwania na odpowiedź, czy też wyróżniania elementów wizualnych.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#uzycie-koloru

Chcesz wiedzieć więcej?

• 1.1.1 Treść nietekstowa - poziom A
• 1.2.1 Tylko audio lub tylko wideo (nagranie) - poziom A
• 1.2.2 Napisy rozszerzone (nagranie) - poziom A
• 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Poziom A
• 1.2.4 Napisy rozszerzone (na żywo) - poziom AA
• 1.2.5 Audiodeskrypcja (nagranie) - poziom AA
• 1.2.6 Język migowy (nagranie) - poziom AAA
• 1.2.7 Rozszerzona audiodeskrypcja (nagranie) - poziom AAA
• 1.2.8 Alternatywa dla mediów (nagranie) - poziom AAA
• 1.2.9 Tylko audio (na żywo) - poziom AAA
• 1.3.1 Informacje i relacje - poziom A
• 1.3.2 Zrozumiała kolejność - poziom A
• 1.3.3 Właściwości zmysłowe - poziom A
• 1.3.4 Orientacja - poziom AA
• 1.3.5 Określenie pożądanej wartości - poziom AA
• 1.3.6 Określenie przeznaczenia - poziom AAA
• 1.4.1 Użycie koloru - poziom A
• 1.4.2 Kontrola odtwarzania dźwięku - poziom A
• 1.4.3 Kontrast (minimalny) - poziom AA
• 1.4.4 Zmiana rozmiaru tekstu - poziom AA
• 1.4.5 Obrazy tekstu - poziom AA
• 1.4.6 Kontrast (wzmocniony) - poziom AAA
• 1.4.7 Niska głośność lub bez dźwięków w tle - poziom AAA
• 1.4.8 Prezentacja wizualna - poziom AAA
• 1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA
• 1.4.10 Dopasowanie do ekranu - poziom AA
• 1.4.11 Kontrast elementów nietekstowych - poziom AA
• 1.4.12 Odstępy w tekście - poziom AA
• 1.4.13 Treść spod kursora lub fokusu - poziom AA