1.4.3 Kontrast minimum

Krótko

Tekst musi mieć wystarczający kontrast względem tła, żeby dało się go wygodnie przeczytać.

Problem w praktyce

Na stronie tekst jest jasnoszary na białym tle, biały na jasnym zdjęciu albo fioletowy na ciemnofioletowym tle. Osoba słabowidząca, użytkownik telefonu w słońcu albo osoba korzystająca z gorszego ekranu może nie być w stanie odczytać treści.

To kryterium dotyczy kontrastu tekstu i obrazów tekstu. Nie obejmuje wszystkich elementów nietekstowych, takich jak ikony, obramowania pól formularza czy same komponenty interfejsu. Te tematy opisuje kryterium 1.4.11.

Kogo to dotyczy

• Osób słabowidzących, które potrzebują wyraźnej różnicy między tekstem a tłem.
• Osób starszych, u których ostrość widzenia i wrażliwość na kontrast często się zmniejszają.
• Osób z zaburzeniami widzenia barw, dla których część zestawień kolorów może być trudna do rozróżnienia.
• Osób korzystających z urządzeń mobilnych w słońcu albo przy słabym oświetleniu.
• Osób używających ekranów niskiej jakości, z niską jasnością albo nietypowym odwzorowaniem kolorów.
• Wszystkich użytkowników, gdy tekst jest mały, cienki albo umieszczony na złożonym tle.

Dobry przykład

• Ciemny tekst na jasnym, jednolitym tle.
• Biały tekst na ciemnym, jednolitym tle.
• Tekst na zdjęciu z dodatkową ciemną warstwą, która stabilizuje tło.
• Linki i komunikaty z kontrastem zgodnym z WCAG.
• Metadane typu „POSTRZEGALNOŚĆ · POZIOM A” jako jasny tekst na ciemnofioletowym tle.
• Biały tekst na fiolecie #5F28B4, który ma wysoki kontrast i jest czytelny.

Zły przykład

• Jasnoszary tekst na białym tle.
• Biały tekst na jasnym zdjęciu.
• Cienki tekst w kolorze pastelowym.
• Mały tekst w stopce o zbyt niskim kontraście.
• Placeholder w formularzu jako jedyna instrukcja i jednocześnie z niskim kontrastem.
• Tekst na gradiencie, który w części tła traci czytelność.

Wymagane wartości kontrastu

• Zwykły tekst powinien mieć kontrast minimum 4.5:1 względem tła.
• Duży tekst powinien mieć kontrast minimum 3:1 względem tła.
• Duży tekst to co najmniej 18 pt albo 14 pt, gdy jest pogrubiony.
• Poziom AAA wymaga wyższych wartości, ale 1.4.3 jest kryterium poziomu AA.
• Logotypy i tekst dekoracyjny mają wyjątki, ale nie należy ich używać jako pretekstu do publikowania ważnych treści o niskim kontraście.

Przykłady kodu

.text-on-purple {
  color: #ffffff;
  background-color: #5F28B4;
}

.low-contrast-text {
  color: #b8b8b8;
  background-color: #ffffff;
}

.hero-text {
  color: #ffffff;
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.65),
      rgba(0, 0, 0, 0.65)
    ),
    url("/images/tlo.jpg");
}

Przykład graficzny

To jest statyczne demo edukacyjne. Pokazuje typowe sytuacje, w których tekst jest nieczytelny, ryzykowny albo ma dobry kontrast.

Jak sprawdzić

1. Znajdź teksty na stronie: akapity, nagłówki, linki, przyciski, formularze, stopki, placeholdery i tekst na grafikach.
2. Sprawdź kolor tekstu i kolor tła.
3. Zmierz kontrast narzędziem, na przykład Colour Contrast Analyser, WebAIM Contrast Checker albo DevTools.
4. Dla zwykłego tekstu sprawdź, czy kontrast wynosi minimum 4.5:1.
5. Dla dużego tekstu sprawdź, czy kontrast wynosi minimum 3:1.
6. Jeśli tekst jest na zdjęciu, sprawdź kontrast w kilku miejscach tła.
7. Sprawdź stany interfejsu, na przykład hover, focus, disabled i active.
8. Sprawdź stronę przy powiększeniu i na urządzeniu mobilnym.
9. Nie oceniaj kontrastu „na oko”. Użyj narzędzia.

Co sprawdzi automat, a czego nie

Automat może wykryć

• Część problemów kontrastu tekstu.
• Niektóre problemy z tekstem w przyciskach i linkach.
• Część problemów z kolorami zapisanymi w CSS.

Automat nie oceni pewnie

• Tekstu osadzonego w obrazie.
• Tekstu na złożonym zdjęciu albo gradiencie.
• Wszystkich stanów komponentów.
• Kontrastu po zmianie stanu, na przykład hover lub focus.
• Przypadków, gdzie kolor tła zmienia się dynamicznie.
• Czy tekst dekoracyjny faktycznie jest dekoracyjny.

Typowe błędy

• Jasnoszare teksty opisowe.
• Blade placeholdery w formularzach.
• Tekst na zdjęciach bez przyciemnienia tła.
• Pastelowe kolory marek używane do małego tekstu.
• Linki i komunikaty o zbyt niskim kontraście.
• Stopki z drobnym tekstem o zbyt niskim kontraście.
• Przyciski w stanie disabled wyglądające jak zwykły tekst i mające niski kontrast.
• Projektowanie „ładne, subtelne”, ale nieczytelne.

Powiązane kryteria

• 1.4.1 Użycie koloru
• 1.4.11 Kontrast elementów nietekstowych
• 1.4.5 Obrazy tekstu
• 2.4.7 Widoczny fokus
• 3.3.1 Identyfikacja błędu

Źródła

• WCAG 2.2: 1.4.3 Contrast Minimum (otwiera się w nowym oknie)
• Understanding WCAG 1.4.3 (otwiera się w nowym oknie)
• How to Meet WCAG 1.4.3 (otwiera się w nowym oknie)
• Technika G18 (otwiera się w nowym oknie)
• Technika G145 (otwiera się w nowym oknie)
• Technika G174 (otwiera się w nowym oknie)