WCAG 2.1. – kryterium 1.4.11 – kontrast elementów nietekstowych (poziom AA)

Dziś wracamy do Was po raz kolejny z kontrastem, jednakże tym razem zwrócimy uwagę na elementy nietekstowe. Zaczynamy!

Kryterium 1.4.11 – kontrast elementów nietekstowych – zasada jest prosta. Kontrast elementów interfejsu Użytkowników musi wynosić co najmniej 3:1 w stosunku do otaczającego go tła. Kryterium to jest więc nieco łagodniejsze niż w przypadku tekstu, w którym (zasada ogólna) kontrast powinien wynosić 4.5:1.

O czym myślimy mówiąc o ‘elementach interfejsu’?

O przyciskach, wszelkich strzałkach, kropkach, kreskach… a także polach formularza, listach rozwijanych… czyli tak zwanych elementach “sterujących”. Możemy dzięki nim coś zrobić, wykonać jakąś akcję, a nawet jesteśmy do tego zobligowani. Ciekawostka – przyciski w stanie ‘disabled’, których Użytkownik (intencjonalnie) nie może obsłużyć, nie muszą posiadać kontrastu.

Należy pamiętać również o kontraście fokusu, który ma duże znaczenie dla osób używających na co dzień tylko klawiatury.

Ciekawym zagadnieniem są również wykresy kołowe. Kiedy o nich myślimy, widzimy oczyma wyobraźni przepiękne kolory… często niespełniające właśnie kontrastu. Polecamy, by w takich przypadkach wyróżnić każdy z kawałków “tortu” jakimś dodatkowym oznaczeniem/symbolem – na przykład kropkami, wykreśleniem – do wyboru, do koloru (z kontrastem 3:1 oczywiście ).

Są inne wyjątki? Jasne, że tak!

– Loga firm, a także flagi – nie jesteśmy w stanie ich zmienić, a są takie, jakie je ktoś kiedyś stworzył… Piękna flaga Argentyny, której kolory nie spełniają kontrastu 3:1… Uśmiechnięte słoneczko ratuje sytuację!
– Zdjęcia – czasami nie mamy wpływu na to, na jakim tle staniemy, a różnie bywa. Uważajcie na fotki w różowym kartonie Barbie!
– Zrzuty ekranu pokazujące jak kiedyś wyglądała dana aplikacja, grafiki przedstawiające mapy cieplne i inne treści, których nie jesteśmy w stanie przedstawić inaczej niż wyglądają w rzeczywistości.

Profity spełnienia

tego kryterium są dość oczywiste. Jeśli nasza strona będzie posiadała odpowiedni kontrast, to więcej osób będzie mogło z niej korzystać. Im więcej osób może z niej skorzystać, tym więcej potencjalnych klientów mamy…

Dla kogo kontrast jest szczególnie ważny? Oczywiście chodzi o osoby słabowidzące oraz o osoby między innymi ze ślepotą barw (potocznie zwaną daltonizmem). Zapewnijmy wszystkim tym osobom dostęp do tych samych treści. 🙂

Referencja do WCAG: https://lnkd.in/g3Zu3PzF