1.4.11 Kontrast elementów nietekstowych - poziom AA

To kryterium dotyczy rzeczy, które nie są tekstem, ale i tak muszą być widoczne, żeby użytkownik mógł korzystać ze strony:

obramowania pól,
ikony,
znaczniki stanu,
elementy wykresów,
wskaźnik fokusu.

O co chodzi w praktyce?

Najłatwiej to zrozumieć na przykładzie pól w formularzu:

Jeśli pole tekstowe jest zrobione tak, że jego obramowanie prawie nie odcina się od tła (np. bardzo jasna szarość na białym), to część użytkowników może nie zauważyć, że to w ogóle jest pole do wpisania.

Właśnie dlatego WCAG wymaga kontrastu minimum 3:1 dla informacji wizualnych potrzebnych do rozpoznania komponentu i jego stanu.

Co dokładnie podlega temu kontrastowi?

Komponenty interfejsu użytkownika

Chodzi o „informacje wizualne wymagane do identyfikacji komponentów interfejsu użytkownika i ich stanów”. WCAG od razu mówi o wyjątkach: nie dotyczy to elementów nieaktywnych ani sytuacji, gdy wygląd jest narzucony przez przeglądarkę i autor go nie modyfikuje. Czyli w praktyce będą to np.:

obramowanie pola formularza, jeśli bez niego nie widać pola,
ikonka w checkboxie (ptaszek) albo kropka w radio,
wskaźnik fokusu klawiatury, jeśli to on pokazuje, gdzie jesteś,
strzałka w rozwijanym select albo ikonki w przyciskach, jeśli przekazują one jakąś informację np. ikonka domku w aplikacji jako powrót do głównego widoku.

Obiekty graficzne

Tu chodzi o „części grafiki wymagane do zrozumienia treści”, z wyjątkiem sytuacji, gdy konkretna prezentacja grafiki ma istotne znaczenie (np. logo).

W praktyce kontrast 3:1 dotyczy:

elementów wykresu,
linii trendu,
znaczników,
legend w formie symboli,
elementów schematów.

Najczęstsze problemy z Kryterium sukcesu WCAG 1.4.11

Najczęściej problemem nie jest brak kontrastu na całej stronie, tylko drobne elementy, które nie spełniają kontrastu:

bardzo jasne obramowania pól (prawie niewidoczne),
focus widoczny tylko jako delikatna poświata, która ginie na tle,
ikony w szarościach na jasnym tle, które pełnią rolę informacji (np. kosz, lupka, filtr),
wykres, gdzie linie/słupki mają za mały kontrast do tła, przez co trudno je nie tylko prawidłowo odczytać, ale i zauważyć...

Pamiętaj, że 3:1 to sztywny próg i wartości nie możesz zaokrąglać, to znaczy, że 2,999:1 to nadal niewystarczający kontrast i niespełnione kryterium WCAG 1.4.11

Jak to szybko sprawdzić na stronie

Weź trzy miejsca, które prawie zawsze wychodzą najsłabiej:

pola formularzy (granice pól i stan błędu),
wskaźnik fokusu klawiatury,
ikony bez tekstu oraz elementy wykresów,

i sprawdź, czy element, który ma być widoczny, ma kontrast minimum 3:1 względem tła obok niego.

wcag

Pełny tekst kryterium 1.4.11 Kontrast elementów nietekstowych

Wizualna prezentacja następujących elementów ma współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów:

Komponenty interfejsu użytkownika - Informacje wizualne wymagane do identyfikacji komponentów interfejsu użytkownika i ich stanów, z wyjątkiem nieaktywnych składników lub gdy wygląd komponentu jest określony przez agenta użytkownika i nie jest modyfikowany przez autora;
Obiekty graficzne - Części grafiki wymagane do zrozumienia treści, z wyjątkiem sytuacji, gdy konkretna prezentacja grafiki ma istotne znaczenie dla przekazywanych informacji.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#kontrast-elementow-nietekstowych