Wróć do wszystkich kryteriów

1.4.1 Użycie koloru (ang.) Use of Color

Specjalizacje:

  • Content Creator
  • Designer

Elementy:

  • Formularze
  • Tekst i treść
  • Wykresy i diagramy

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    W projektowaniu cyfrowym kolor pełni funkcję potężnego narzędzia, jednak należy pamiętać, że nie każdy użytkownik odbiera go w identyczny sposób. Fundamentem tej wytycznej jest zasada, według której barwa nie może być jedynym sposobem na przekazywanie kluczowych informacji, wskazywanie interakcji czy odróżnianie od siebie elementów interfejsu.

    W praktyce oznacza to, że projektując statusy (np. błąd, sukces) lub wyróżniając linki, należy zawsze zapewnić dodatkową, niekolorową wskazówkę wizualną. Dzięki takiemu podejściu treść pozostaje w pełni czytelna i zrozumiała nawet wtedy, gdy kolory zostaną całkowicie usunięte lub błędnie zinterpretowane przez odbiorcę.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#use-of-color

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#uzycie-koloru

    Słownik pojęć

    Alternatywa wizualna
    –

    Dodatkowy znacznik (np. etykieta tekstowa, ikona, wzór graficzny lub podkreślenie), który dubluje informację przekazywaną barwą.

    Kontrast luminancji
    –

    Różnica w jasności między kolorami, która – jeśli wynosi co najmniej 3:1 – może być uznana za dodatkowy wyróżnik wizualny (np. ciemna czerwień i jasna zieleń).

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby z daltonizmem: Użytkownicy z protanopią czy deuteranopią mogą nie odróżnić czerwonego komunikatu o błędzie od zielonego potwierdzenia.
    • Osoby słabowidzące oraz starsze: Dla nich subtelne różnice w odcieniach mogą być całkowicie niewidoczne.
    • Użytkownicy urządzeń monochromatycznych: Osoby korzystające z czytników e-booków z ekranami E-ink widzą jedynie stopnie szarości.
    • Osoby pracujące w trudnych warunkach: Wyobraź sobie kogoś używającego smartfona w pełnym słońcu – kontrast barw drastycznie spada, a kolorowe wskaźniki stają się nieczytelne.
    • Osoby z zaburzeniami poznawczymi: Dodatkowe symbole (np. ikona wykrzyknika przy błędzie) pomagają szybciej zrozumieć kontekst bez analizowania znaczenia barw.

    Zasady wdrażania i wymagania techniczne

    • Wiadomości i statusy: Informacje takie jak „wymagane pola są czerwone” muszą być uzupełnione o tekst (np. słowo „wymagane”) lub ikonę.
    • Wykresy i grafiki: Dane prezentowane w formie kolorowych linii lub słupków powinny posiadać wzory, tekstowe etykiety bezpośrednio przy danych lub numeryczne oznaczenia.
    • Linki w tekście: Jeśli link różni się od tekstu tylko kolorem, musi on zachować kontrast 3:1 względem otaczającej treści oraz posiadać dodatkowy wyróżnik (np. podkreślenie) pojawiający się przynajmniej po najechaniu myszą lub ustawieniu fokusu.
    • Pola formularzy: Podświetlenie błędnego pola kolorem musi iść w parze z komunikatem tekstowym opisującym błąd. Dla pól wymaganych zaleca się użycia atrybutu aria-required="true".

    Wyjątki i sytuacje szczególne

    • Status „odwiedzony” ((ang.) visited): Ze względu na ograniczenia techniczne i prywatność, autorzy nie są odpowiedzialni za zapewnienie dodatkowego wyróżnika dla linków odwiedzonych  :visited, jeśli różnią się one tylko kolorem.
    • Elementy dekoracyjne: Kryterium nie dotyczy grafik i zdjęć, które nie pełnią funkcji informacyjnej.

    Przykłady implementacji

    Najczęstsze błędy

    • Stosowanie wyłącznie koloru do oznaczania pól wymaganych lub błędnie wypełnionych.
    • Instrukcje odwołujące się tylko do barw (np. „Kliknij zielony przycisk, aby kontynuować”).
    • Zmiana koloru ikony (np. serduszka „polubienie”) jako jedyny sygnał potwierdzający wykonanie akcji.
    • Wykresy, w których legenda opiera się wyłącznie na kolorowych kwadratach bez przypisanych wzorów lub etykiet.
    • Przekazywanie statusu w tabelach wyłącznie poprzez zmianę koloru tła komórki.
    • Oznaczanie obszarów na mapach obrazów ((ang.) Image Maps) tylko za pomocą różnych kolorów.

    Najlepsze praktyki

    • Zasada redundancji: Stosuj zawsze co najmniej dwie metody przekazu: kolor + kształt, kolor + tekst lub kolor + wzór.
    • Wyraźny fokus klawiatury: Upewnij się, że wskaźnik fokusu jest dobrze widoczny i nie polega wyłącznie na subtelnej zmianie odcienia.
    • Dostosowanie do trybu wysokiego kontrastu: Projektuj interfejs tak, aby pozostał czytelny w systemowych trybach wysokiego kontrastu, które mogą nadpisywać kolory autora. Więcej informacji o kontraście znajdziesz w kryteriach:
    • Atrybuty ARIA: Wspieraj wizualne wskazówki semantyką kodu (np. aria-invalid="true" dla błędów).

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Wykorzystaj funkcję symulacji wad wzroku (np. w Chrome), aby sprawdzić, czy interfejs pozostaje zrozumiały w trybie achromatopsji.
    • (ang.) WCAG Color contrast checker: Zweryfikuj, czy różnica w jasności między kolorem linku a tekstu statycznego wynosi co najmniej 3:1.
    • NVDA: Uruchom czytnik ekranu i sprawdź, czy informacje zakodowane wizualnie barwą są dostępne w formie komunikatów głosowych.
    • Testowanie manualne: Wyłącz kolory w przeglądarce lub ustaw monitor w tryb czarno-biały i sprawdź, czy nadal potrafisz poprawnie wypełnić wszystkie formularze.

    Sprawdź swoją wiedzę

    Poniżej znajduje się 5 elementów interfejsu. Twoim zadaniem jest ocena, czy informacje są przekazywane w sposób dostępny dla osób, które nie rozróżniają kolorów (np. daltonistów).

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Wskazówka: Wyobraź sobie te przykłady w skali szarości (czarno-białe). Czy nadal wiesz, co oznaczają?
    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools, (ang.) WCAG Color contrast checker, NVDA.

    Link: https://pdc.ambiscale.com/training/wcag-1-4-1/

    #1 BŁĄD

    Problem: Segmenty wykresu są rozróżnione wyłącznie kolorem.
    Dlaczego: Osoba z daltonizmem może widzieć te kolory jako podobne odcienie szarości i nie będzie w stanie powiązać ich z legendą.
    Naprawa: Dodać wzory (szrafowanie) do segmentów lub linie łączące etykiety bezpośrednio z wykresem.

    #2 BŁĄD

    Problem: Linki w tekście różnią się od reszty tylko kolorem (niebieski vs czarny), bez podkreślenia.
    Dlaczego: Przy słabym kontraście lub w trybie monochromatycznym linki są nieodróżnialne od zwykłego tekstu.
    Naprawa: Dodać text-decoration: underline.

    #3 DOBRZE

    Dlaczego: Stan przycisku jest sygnalizowany potrójnie: zmianą koloru (zielony/biały), ikoną (/⭕) oraz tekstem („Włączony”/”Wyłączony”). Informacja nie zależy tylko od barwy.

    #4 DOBRZE

    Dlaczego: Błąd walidacji jest oznaczony nie tylko czerwonym obramowaniem, ale również ikoną ostrzegawczą i jawnym komunikatem tekstowym „Błędny format”.

    #5 BŁĄD

    Problem: Trasy metra są rozróżnione tylko kolorami linii (Czerwona/Zielona).
    Dlaczego: Dla osoby z deuteranopią (nierozpoznawanie zieleni) obie linie mogą wyglądać na ciemnożółte/brązowe.
    Naprawa: Dodać etykiety tekstowe bezpośrednio na liniach lub zastosować różne style linii (ciągła vs przerywana).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów