Kontrast WCAG: wymagania 4,5:1 i 3:1, jak je sprawdzić i jak poprawić kolory marki

Kontrast to najczęstszy błąd dostępności na stronach firmowych i jednocześnie najłatwiejszy do zmierzenia. Wystarczą dwa kolory i kalkulator, żeby wiedzieć, czy tekst spełnia wymagania WCAG. Popularny jasnoszary #999999 na białym tle ma kontrast około 2,8:1, a poziom AA wymaga dla zwykłego tekstu co najmniej 4,5:1. Taki kolor wygląda elegancko na monitorze projektanta, a na telefonie w słońcu albo dla osoby słabowidzącej jest po prostu nieczytelny.

Wymagania kontrastu w WCAG

Duży tekst to w przeliczeniu na piksele mniej więcej 24 px zwykłym krojem albo około 18,7 px pogrubionym. Kryterium 1.4.11 dotyczy rzeczy, które nie są tekstem, a są potrzebne do obsługi strony: ramek pól formularza, ikon bez podpisu, wskaźnika fokusa, linii na wykresie. Kryteria i ich numerację omawiam w tekście o WCAG 2.1.

Czego kontrast nie dotyczy

• Logotypów i tekstu, który jest częścią logo.
• Elementów nieaktywnych, np. wyszarzonego przycisku, którego nie da się kliknąć.
• Tekstu czysto dekoracyjnego, który nie niesie informacji.
• Treści na zdjęciach, które nie są częścią interfejsu, np. napis na szyldzie w tle fotografii.

Jak sprawdzić kontrast

1. 1.W narzędziach deweloperskich przeglądarki: inspektor elementu pokazuje współczynnik kontrastu tekstu i informuje, czy spełnia AA i AAA.
2. 2.W kalkulatorze kontrastu: wpisujesz kolor tekstu i tła w formacie HEX i dostajesz wynik.
3. 3.W narzędziach automatycznych do audytu: wychwycą większość tekstów o złym kontraście na całej podstronie.
4. 4.Ręcznie przy tekstach na zdjęciach i gradientach: automaty mierzą jeden kolor tła, a liczy się najjaśniejszy fragment pod tekstem.

Pełny proces samodzielnego sprawdzenia strony opisuję w tekście o sprawdzaniu zgodności z WCAG.

Jak poprawić kontrast, nie zmieniając marki

Kolory marki rzadko trzeba wyrzucać. Zwykle wystarczy rozdzielić je na role. Kolor główny marki zostaje na dużych powierzchniach, ikonach i grafikach, a do tekstu i przycisków używa się jego ciemniejszego wariantu, który mieści się w 4,5:1. Przy jasnych kolorach marki, np. pastelowym zielonym, tekst na przycisku zmienia się z białego na ciemny. Taka zmiana zwykle mieści się w identyfikacji wizualnej i nie wymaga nowego logo. Warto przy tym pamiętać o stanach: kolor linku po najechaniu, przycisk wyłączony i komunikat o błędzie też potrzebują sprawdzonych par kolorów.

Najczęstsze błędy kontrastu w sklepach

• Szara cena przekreślona i jasna cena promocyjna obok siebie, obie poniżej progu.
• Placeholder w polu formularza jako jedyny opis pola, w jasnoszarym kolorze.
• Biały tekst na zdjęciu w banerze bez przyciemnienia tła.
• Ramki pól formularza tak jasne, że nie widać, gdzie kliknąć, co narusza kryterium 1.4.11.
• Link w treści odróżniony od tekstu tylko kolorem o niskim kontraście, bez podkreślenia.

Źródła: WCAG 2.2: kryterium 1.4.3 Kontrast (minimum) i kryterium 1.4.11 Kontrast elementów nietekstowych, W3C.