1.4.11 Kontrast elementów nietekstowych

/ Jak strony go nie spełniają

• Pola tekstowe mają obrys w bladym szarym, na przykład #cccccc na bieli, co daje około 1,6:1.
• Własne pole wyboru lub przycisk radio pokazuje stan zaznaczenia kolorem ledwie różnym od stanu niezaznaczonego.
• Wskaźnik fokusu został przestylowany na cienką, bladą linię, która nie osiąga 3:1 względem otaczającej powierzchni.
• Ikony działające jak przyciski bez etykiety tekstowej są narysowane jasnym odcieniem.
• Linie lub segmenty wykresu są zbyt zbliżone tonem do tła albo do siebie nawzajem, żeby je rozróżnić.

/ Jak sprawdzić samodzielnie

1. Pobierz kolor obramowania każdego elementu input, select i własnej kontrolki pipetą w narzędziach deweloperskich albo w Colour Contrast Analyser i porównaj go z kolorem tuż obok.
2. Przejdź stronę tabulatorem i zmierz obwódkę fokusu względem tła, na którym jest rysowana.
3. Włączaj i wyłączaj pola wyboru, przyciski radio, przełączniki i karty i mierz to, co oznacza stan zaznaczony.
4. Znajdź ikony stojące samodzielnie, bez tekstu, i zmierz każdą ikonę względem jej powierzchni.
5. Na wykresach zmierz każdą linię lub segment względem tła i sąsiadów, chyba że tę samą informację niosą etykiety.

/ Jak to naprawić

• Ustaw border-color elementów input, select i textarea na kolor o kontraście co najmniej 3:1 względem strony. Na bieli #949494 to mniej więcej najjaśniejszy szary, który go osiąga.
• Stan fokusu ostyluj właściwością outline, na przykład outline: 2px solid w kolorze osiągającym 3:1, i dodaj outline-offset, żeby obwódka nie przylegała do kontrolki.
• Stan zaznaczenia własnych pól wyboru i przełączników rysuj wypełnieniem i znakiem, które oba osiągają 3:1 względem otoczenia.
• Koloruj ikony przez fill lub stroke z wartością currentColor, w elemencie nadrzędnym, który ma już kolor o wystarczającym kontraście.
• Na wykresach oddzielaj segmenty obramowaniem w kolorze tła i opisuj dane bezpośrednio etykietami.

/ Co sprawdza nasz skaner

Skan na wyrenderowanej stronie bierze widoczne, aktywne pola formularzy, przyciski oraz elementy z rolą button, checkbox lub switch. Jeśli któryś rysuje obramowanie, skan nakłada kolor górnego obramowania na tło znajdujące się za nim i zgłasza wynik poniżej 3:1. Kontrolki leżące na obrazie lub gradiencie są pomijane. Nie mierzy ikon, wykresów, obwódek fokusu ani stanów zaznaczenia, a wypełniony przycisk z bladym obramowaniem może zostać zgłoszony.