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

1.4.11 Kontrast elementów nietekstowych

WCAG 1.4.11 Non-text Contrast

W skrócie

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.

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ć
Częściowo automatyczne

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

Komu i dlaczego to pomaga

Osoba słabowidząca musi widzieć, gdzie jest pole formularza i gdzie kliknąć. Jasnoszara ramka pola na białym tle znika.

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

Jak zrobić to dobrze

  • Nadaj polom formularzy ramki min. 3:1 (np. #767676 na białym).
  • Ikony informacyjne zawsze podpisuj albo przyciemnij.

Najczęstsze błędy

  • Pola formularza z ramką #ddd na białym tle.
  • Checkboxy i przełączniki w pastelowych kolorach.
  • Ikony bez podpisów w zbyt jasnym kolorze.
  • Słabo widoczny wskaźnik fokusu.

Jak to sprawdzić

  1. Sprawdź kalkulatorem kontrastu (poniżej) kolory ramek pól, ikon i linii wykresów względem tła – próg 3:1.
  2. Przejdź po stronie klawiszem Tab i oceń, czy fokus jest wyraźnie widoczny.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

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.3

Kontrast (minimum)

Poziom AA Wymagane prawem

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.

2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).

2.4.13

Wygląd fokusu

Poziom AAA Nowe w 2.2

Wskaźnik fokusu jest duży i kontrastowy: co najmniej tak duży jak obramowanie o grubości 2 px wokół elementu i z kontrastem 3:1 między stanem z fokusem i bez.

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.11: Non-text Contrast – oficjalne objaśnienie W3C (po angielsku).