WCAG 1.4.3 Kontrast (minimum)

Kryterium sukcesu 1.4.3 zapewnia, że tekst odczytają osoby, które słabiej widzą kontrast — starsi odwiedzający, osoby słabowidzące lub z zaburzeniami widzenia barw, a także każdy, kto patrzy na telefon w pełnym słońcu. To poziom AA, więc należy do wymagań, na których opierają się norma EN 301 549 i Europejski akt o dostępności (punkt 9.1.4.3); na EN 301 549 opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Współczynnik kontrastu między tekstem a tłem musi wynosić co najmniej:

• 4,5:1 dla zwykłego tekstu;
• 3:1 dla dużego tekstu — co najmniej 18 pt (24 px CSS) przy zwykłej grubości lub 14 pt (około 18,66 px CSS) pogrubiony.

Współczynnik oblicza się z luminancji względnej obu kolorów; mieści się w zakresie od 1:1 (ten sam kolor) do 21:1 (czarny na białym). Wymaganie obejmuje też obrazy tekstu, np. baner z hasłem wtopionym w grafikę.

Wyjątki:

• tekst w logotypie lub nazwie marki;
• tekst nieaktywnych elementów sterujących, np. wyłączonego przycisku;
• tekst dekoracyjny, którego nikt nie musi czytać, oraz tekst będący częścią zdjęcia z inną istotną treścią.

Typowe błędy w sklepie internetowym

• jasnoszary tekst zastępczy (placeholder) lub tekst pomocniczy w formularzach (np. #aaa na białym to około 2,3:1);
• stara cena, etykiety „wyprzedane” i drobny druk pod przyciskiem „Dodaj do koszyka”;
• biały tekst na banerze ze zdjęciem, gdy część zdjęcia jest jasna;
• kolor marki użyty dla linków lub przycisków, który dobrze wygląda na dużym ekranie, ale ma mniej niż 4,5:1;
• tekst, który ma niski kontrast dopiero po najechaniu kursorem lub otrzymaniu fokusu.

Jak to sprawdzić

Automatycznie: nasz skaner mierzy kontrast każdego widocznego elementu tekstowego (reguła kontrast kolorów) i pokazuje znalezione kolory oraz współczynnik. Nie zawsze potrafi ocenić tekst na obrazach lub gradientach — takie wyniki są oznaczone do ręcznego sprawdzenia.

Ręcznie: przy tekście na zdjęciach należy sprawdzić najjaśniejszą część obrazu pod tekstem. Warto sprawdzić też stany po najechaniu, z fokusem i z błędem, a nie tylko stan domyślny. Narzędzie do sprawdzania kontrastu poda dokładny współczynnik dla dwóch kolorów.

Jak to naprawić

• Przyciemnić tekst lub rozjaśnić tło, aż współczynnik wyniesie co najmniej 4,5:1; zwykle wystarczy niewielka zmiana jasności.
• Umieścić tekst na obrazach na jednolitym lub półprzezroczystym panelu tła.
• Nie używać tekstu zastępczego jako jedynej etykiety; jeśli zostaje, on też powinien być czytelny.
• Poprawić kolor raz, w ustawieniach motywu lub zmiennych CSS, zamiast strona po stronie.

Powiązane kryteria

• 1.4.11 Kontrast elementów nietekstowych — ikony, obramowania pól i wskaźniki fokusu (3:1).
• 1.4.1 Użycie koloru — kolor nie może być jedynym sposobem przekazania informacji.
• 1.4.4 Zmiana rozmiaru tekstu — tekst musi pozostać użyteczny przy powiększeniu 200 %.

Najczęstsze pytania

Jakiego współczynnika kontrastu wymaga WCAG na poziomie AA?

Co najmniej 4,5:1 między tekstem a tłem i co najmniej 3:1 dla dużego tekstu. Poziom AAA (1.4.6) wymaga 7:1 i 4,5:1.

Co WCAG uznaje za duży tekst?

Tekst o wielkości co najmniej 18 punktów (24 piksele CSS) przy zwykłej grubości lub co najmniej 14 punktów (około 18,66 piksela CSS) pogrubiony.

Czy 1.4.3 dotyczy logotypów i nieaktywnych przycisków?

Nie. Tekst będący częścią logotypu lub nazwy marki, tekst nieaktywnych (wyłączonych) elementów sterujących oraz tekst czysto dekoracyjny są zwolnione.

Czy 1.4.3 obejmuje ikony i obramowania pól?

Nie, 1.4.3 dotyczy tylko tekstu i obrazów tekstu. Ikony, obwódki fokusu i obramowania pól formularza podlegają kryterium 1.4.11 Kontrast elementów nietekstowych, które wymaga 3:1.