Tworzenie dostępnych zasobów: Kolor i kontrast
Kolor i kontrast odgrywają kluczową rolę w tym, jak użytkownicy postrzegają Twoje treści i wchodzą z nimi w interakcję. Aby spełnić standardy dostępności, ważne jest, aby zapewnić wystarczający kontrast między tekstem a tłem, unikać polegania wyłącznie na kolorze w celu przekazania znaczenia i wybrać palety, które wspierają czytelność dla wszystkich użytkowników. Ten artykuł poprowadzi Cię przez najlepsze praktyki dotyczące używania kolorów i kontrastu w celu tworzenia integracyjnych, dostępnych doświadczeń internetowych.
Aby upewnić się, że Twoja witryna, strona docelowa, formularz lub wiadomość spełniają wymagania dostępności, skorzystaj z listy kontrolnej dostępnej tutaj.
Wymagania
- Mały tekst (poniżej 18 punktów zwykłej czcionki (24 piksele CSS) lub 14 punktów pogrubionej czcionki (19 pikseli CSS)) musi mieć współczynnik kontrastu co najmniej 4,5:1 z tłem.
- Duży tekst (o rozmiarze co najmniej 18 punktów lub 14 punktów pogrubienia) musi mieć współczynnik kontrastu co najmniej 3:1 z tłem.
- Zasada kontrastu dotyczy również obrazów tekstu, chociaż najlepiej jest unikać używania obrazów do tekstu.
- Kontrast elementów sterujących interfejsu użytkownika i elementów nietekstowych (takich jak przełącznik, pole wyboru itp.) w stosunku do tła musi wynosić 3:1.
- Kontrast wszystkich wizualnych wskaźników ostrości (np. najechanie kursorem na przycisk) w stosunku do tła musi wynosić 3:1.
- Obiekty graficzne, takie jak samodzielna ikona, wykres lub obraz, muszą mieć minimalny kontrast 3:1 między elementem a jego tłem.
- Wszelkie informacje wyświetlane w kolorze wymagają alternatywy tekstowej, którą program może zrozumieć.
- Zawsze zapewniaj widoczną alternatywę, taką jak tekst lub obraz, dla wszelkich informacji przekazywanych za pomocą koloru.
Najlepszym sposobem na sprawdzenie, czy układ jest niezależny od kolorów, jest test w skali szarości. Pozwoli ci to zweryfikować, czy wszystkie ważne elementy z punktu widzenia użytkownika są widoczne i czy wymagają dostosowania.
Przykłady
 | TAK: Ciemniejszy kontur oznacza bieżący krok użytkownika w przepływie. Patrząc na skalę szarości tego widoku, takie rozwiązanie pozwoliłoby osobie niewidomej na kolory uzyskać informacje o tym, gdzie znajduje się w procesie. |
  | TAK: Dane na wykresie można odróżnić od siebie, dodając kształty do linii. Patrząc na skalę szarości tego widoku, takie rozwiązanie pozwoliłoby osobie niewidomej na kolory uzyskać informacje o danych. |
  | TAK: Tekst powinien znajdować się na tle o współczynniku kontrastu 4,5:1. NIE: Nie używaj koloru tła dla tekstu poniżej współczynnika 4,5:1. |
