Zasada 1: Postrzegalność 1.4 Rozróżnialność

1.4.3 Kontrast (minimum)

WCAG 1.4.3 Contrast (Minimum)

W skrócie

Tekst musi mieć kontrast z tłem co najmniej 4,5:1. Duży tekst (od 24 px, albo od ok. 18,7 px pogrubiony) – co najmniej 3:1.

Poziom
AA Standard, którego wymaga prawo – usuwa najczęstsze bariery.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Projektowanie UX/UI, Programowanie
Jak to wykryć
Wykrywalne automatycznie

Wyjaśnienie prostym językiem: Kontrast kolorów

Komu i dlaczego to pomaga

Za niski kontrast utrudnia czytanie osobom słabowidzącym i starszym, ale też każdemu w słońcu na telefonie. To jeden z najczęściej łamanych wymogów.

  • Osoby słabowidzące
  • Osoby z zaburzeniami widzenia barw
  • Seniorzy

Jak zrobić to dobrze

  • Ustal paletę kolorów z parami sprawdzonymi pod kątem kontrastu i trzymaj się jej.
  • Tekst na zdjęciach umieszczaj na półprzezroczystej ciemnej nakładce.
  • Wyjątki: logotypy, tekst nieaktywnych elementów i czysto dekoracyjny.

Najczęstsze błędy

  • Jasnoszary tekst na białym tle (np. #999 na #fff = 2,8:1).
  • Biały tekst na jasnozielonych lub pomarańczowych przyciskach.
  • Tekst na zdjęciu bez przyciemnienia.
  • Placeholdery w formularzach w bardzo jasnym kolorze.

Przykład w kodzie

Źle
<p style="color:#999; background:#fff">Tekst o kontraście 2,8:1</p>
Dobrze
<p style="color:#595959; background:#fff">Tekst o kontraście 7:1</p>

Jak to sprawdzić

  1. Sprawdź pary kolorów kalkulatorem kontrastu (poniżej na tej stronie).
  2. W Chrome DevTools najedź inspektorem na tekst – pokazuje współczynnik kontrastu.
  3. Przejrzyj stany: hover, disabled, focus, tekst na zdjęciach.

Wykrywalne automatycznie. Narzędzia automatyczne (np. axe, WAVE, Lighthouse) wyłapią większość problemów z tym kryterium.

Sprawdź kontrast swoich kolorów

Wpisz kolor w formacie szesnastkowym, np. #1a5fb4 albo #fff.

Zwykły tekst – przykład akapitu.

Duży tekst

Współczynnik kontrastu: –

Zwykły tekst, AA (1.4.3) – 4,5:1
Duży tekst, AA (1.4.3) – 3:1
Elementy interfejsu i grafiki (1.4.11) – 3:1
Zwykły tekst, AAA (1.4.6) – 7:1
Duży tekst, AAA (1.4.6) – 4,5:1

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu AA z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

1.4.6

Kontrast (wzmocniony)

Poziom AAA

Wyższy próg kontrastu: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego.

1.4.11

Kontrast elementów nietekstowych

Poziom AA Wymagane prawem

Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.

1.4.1

Użycie koloru

Poziom A Wymagane prawem

Kolor nie może być jedynym sposobem przekazania informacji – np. zaznaczenia błędu, wyróżnienia linku w tekście czy serii na wykresie.

Ostatnia aktualizacja: .
Źródło: Understanding SC 1.4.3: Contrast (Minimum) – oficjalne objaśnienie W3C (po angielsku).