Kontrast elementów nietekstowych

Czego wymaga kryterium

Reguła kontrastu w 1.4.3 dotyczy wyłącznie tekstu; 1.4.11 rozszerza jej słabszą wersję (3:1 zamiast 4,5:1) na dwie dodatkowe kategorie. Po pierwsze, wizualne wskaźniki elementów interfejsu — to, co informuje, że dany element jest przyciskiem, gdzie znajduje się pierścień fokusa, gdzie przebiega granica pola formularza — muszą osiągać 3:1 względem sąsiedniej powierzchni. Po drugie, części znaczących grafik, które użytkownik musi rozpoznać — słupki na wykresach, ikony wskazujące stan, punkty wskaźnikowe — muszą osiągać 3:1.

Jak spełnić kryterium

• Każde pole formularza powinno mieć widoczne obramowanie z minimalnym kontrastem 3:1 względem tła strony.
• Wskaźniki fokusa (kontur :focus-visible) należy stylizować z minimalnym kontrastem 3:1 zarówno względem komponentu, jak i strony.
• W przypadku przycisków-widm (ghost buttons) samo obramowanie musi osiągać 3:1 względem tła strony.
• W przypadku przełączników (toggle switches) pozycja „włączono/wyłączono” — ścieżka i suwak — muszą mieć kontrast 3:1 w miejscu, gdzie się stykają.
• W przypadku ikon niosących znaczenie (informacja „i”, trójkąt ostrzeżenia, znacznik wyboru) linie ikony muszą osiągać 3:1 względem ich tła.
• W przypadku serii na wykresach kolory stosowane do rozróżnienia słupków / linii muszą różnić się od siebie o 3:1 lub być uzupełnione wzorem albo teksturą.

Częste błędy

• Pola formularzy bez widocznego obramowania lub z obramowaniem #e5e5e5 na #fff przy stosunku 1,3:1 — niewidoczne dla osób słabowidzących.
• Domyślny kontur fokusa przeglądarki nadpisany przez outline: none bez zastępczego rozwiązania.
• Przyciski-widma z białym tekstem na przezroczystym tle i 1px szarym obramowaniem — przycisk jest praktycznie niewidoczny.
• Przełączniki z ledwo widocznym suwakiem na niemal identycznej ścieżce w pozycji „wyłączono”.
• Ikony stanu w rogu karty (zielony znacznik, czerwony x), których kolor ledwo kontrastuje z tłem karty.
• Wykres kołowy z kolorami wycinków różniącymi się o 2:1 — widzący użytkownicy widzą granice z trudem; osoby słabowidzące widzą jednolitą plamę.

Dlaczego to jest ważne

Kryterium 1.4.11 zostało dodane w WCAG 2.1 i regularnie zaskakuje zespoły — większość sprawdzania kontrastu obejmuje wyłącznie tekst. Obramowania pól formularzy, pierścienie fokusa i przyciski-widma to kanoniczne wzorce niespełnienia kryterium. Narzędzia takie jak axe i Stark sprawdzają już kontrast elementów nietekstowych, jednak projektanci nadal pomijają ten aspekt na etapie projektowania, gdyż dominujące przekonanie brzmi: „kontrast = kontrast tekstu”. Naprawa zazwyczaj oznacza pogrubienie obramowań i przyciemnienie szarości w systemie projektowym.