WCAG 1.4.11 Kontrast elementów nietekstowych

Kryterium sukcesu 1.4.11 zapewnia, że osoby słabowidzące widzą te części strony, których potrzebują do korzystania z niej i jej zrozumienia: gdzie jest pole formularza, co pokazuje ikona, która opcja jest wybrana, gdzie znajduje się fokus klawiatury. Kryterium dodano w WCAG 2.1, ma poziom AA i jest częścią normy EN 301 549 (punkt 9.1.4.11).

Czego wymaga kryterium

Wizualna prezentacja poniższych elementów musi mieć współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów:

• Komponenty interfejsu użytkownika: informacja wizualna potrzebna do rozpoznania komponentu i jego stanów — obramowanie pola tekstowego, kontur pola wyboru, sam znacznik zaznaczenia, wskaźnik wybranej karty, wskaźnik fokusu;
• Obiekty graficzne: części grafiki potrzebne do zrozumienia treści — linie i słupki wykresu, części ikony niosące znaczenie.

Wyjątki:

• komponenty nieaktywne (np. wyłączony przycisk);
• komponenty, których wygląd jest określony przez przeglądarkę i niezmieniony przez autora;
• grafiki, w których dana prezentacja jest niezbędna (np. zdjęcie lub mapa cieplna, gdzie zmiana kolorów zmieniłaby informację).

Tekst nie jest tu objęty — podlega kryterium 1.4.3.

Typowe błędy w sklepie internetowym

• jasnoszare obramowania pól (#ddd na białym jest znacznie poniżej 3:1) bez żadnej innej wskazówki;
• własne pola wyboru, przyciski opcji i selektory rozmiaru, których stan zaznaczenia to blady odcień;
• przyciski z samą ikoną (wyszukiwanie, koszyk, lista życzeń) w jasnym kolorze marki;
• własna obwódka fokusu w jasnym kolorze albo outline: none z ledwo widocznym zamiennikiem;
• oceny w gwiazdkach z bladymi pustymi gwiazdkami i tylko nieco ciemniejszymi pełnymi;
• linie wykresów w panelu konta, które są zbyt jasne względem tła.

Jak to sprawdzić

Automatycznie: w naszym skanerze żadna reguła automatyczna nie odpowiada temu kryterium. axe-core mierzy kontrast tekstu, ale nie potrafi ustalić, które obramowania, ikony lub stany są potrzebne do zrozumienia komponentu. Potrzebna jest ręczna kontrola.

Ręcznie: dla każdego pola formularza, przycisku, ikony i stanu (domyślny, po najechaniu, z fokusem, zaznaczony, błąd) wziąć kolor istotnej części i kolor obok niej i zmierzyć je w narzędziu do sprawdzania kontrastu. Współczynnik musi wynosić co najmniej 3:1. Przejść przez stronę klawiszem Tab, by sprawdzić każdy wskaźnik fokusu.

Jak to naprawić

• Przyciemnić w motywie obramowania pól i kolory ikon, aż osiągną 3:1 względem tła.
• Pokazywać stany zaznaczenia wyraźnym obramowaniem, znacznikiem lub wypełnieniem, a nie tylko bladym odcieniem.
• Stosować wskaźnik fokusu o kontraście co najmniej 3:1 względem sąsiednich kolorów, np. ciemny kontur 2 px z odsunięciem.
• Dodać do wykresów bezpośrednie etykiety lub wzory, jeśli nie wszystkie kolory mogą osiągnąć 3:1.

Powiązane kryteria

• 1.4.3 Kontrast (minimum) — 4,5:1 dla tekstu.
• 1.4.1 Użycie koloru — kolor nie może być jedyną wskazówką.
• Sprawdzanie kontrastu — pomiar dwóch kolorów.

Najczęstsze pytania

Czy obramowania pól formularza potrzebują kontrastu 3:1?

Jeśli obramowanie jest jedyną wizualną wskazówką, gdzie znajduje się pole — tak: potrzebuje 3:1 względem sąsiedniego koloru. Pole z wyraźnie kontrastującym wypełnieniem tła może zamiast tego opierać się na nim.

Czy nieaktywne przyciski potrzebują kontrastu 3:1?

Nie. Nieaktywne (wyłączone) komponenty interfejsu są zwolnione, podobnie jak elementy sterujące, których wygląd pochodzi z przeglądarki i nie został zmieniony przez autora.

Czy 1.4.11 dotyczy ikon?

Tak, jeśli ikona jest potrzebna do zrozumienia treści lub do rozpoznania elementu sterującego — np. ikona koszyka, wyszukiwania lub zamknięcia bez etykiety tekstowej. Ikony czysto dekoracyjne nie są objęte.

Czy narzędzie automatyczne sprawdzi kontrast elementów nietekstowych?

Nie w wiarygodny sposób. Nasz skaner mierzy kontrast tekstu, ale obramowania, ikony, obwódki fokusu i elementy wykresów trzeba sprawdzić ręcznie narzędziem do sprawdzania kontrastu.