Kontrast (minimum)

Czego wymaga kryterium

Tekst i obrazy tekstu muszą mieć stosunek kontrastu co najmniej 4,5:1 względem tła. Duży tekst — zdefiniowany jako 18pt (24px) o normalnej grubości lub 14pt (18,66px) pogrubiony — wymaga jedynie 3:1. Stosunek oblicza się na podstawie względnej luminancji pierwszego planu i tła. Logotypy, nazwy marek i tekst czysto dekoracyjny są zwolnione. Nieaktywne kontrolki są również zwolnione, choć wyjątek ten jest węższy, niż projektanci zwykle zakładają.

Jak spełnić kryterium

• Każdą kombinację tekstu na tle należy sprawdzić przy użyciu narzędzia do weryfikacji kontrastu (axe DevTools, WebAIM, Stark, wtyczki do Figmy). Wymagane minimum to 4,5:1.
• Jasnoszary tekst zastępczy (placeholder) w polach formularzy należy podnieść do co najmniej 4,5:1 względem tła pola — placeholder to tekst.
• Należy przeprowadzić audyt sekcji hero z tekstem na tle zdjęcia. Kolor tła zmienia się w każdym pikselu, dlatego należy sprawdzić najgorszy obszar lub dodać ciemną nakładkę.
• W trybie ciemnym należy ponownie obliczyć każdy stosunek — tokeny kolorów spełniające kryterium na białym tle często nie spełniają go na prawie czarnym.
• W przypadku kolorów marki niespełniających kryterium na białym tle należy przyciemnić kolor marki wyłącznie dla tekstu; zachować oryginalny kolor dla grafik.
• W przypadku przycisków liczy się kontrast etykiety względem tła przycisku — nie kontrast przycisku względem strony.

Częste błędy

• Jasnoszary tekst pomocniczy (#999 na #fff = 2,85:1) w polach formularzy — poważne naruszenie kryterium.
• Biały tekst na przycisku w kolorze marki, gdzie kolor marki jest średnio nasycony (pomarańczowy, żółtozielony, morski).
• Nagłówki sekcji hero umieszczone na fotografiach bez nakładki — kontrast zmienia się w obrębie obrazu, często spadając poniżej 3:1.
• Tekst zastępczy w tym samym kolorze co etykieta, ale cieńszy, co czyni go elementem o najniższym kontraście na stronie.
• Przyciski „nieaktywne” lub „wyłączone” ze stosunkiem 2:1, co jest dopuszczalne wyłącznie gdy są naprawdę nieinteraktywne — często jednak pozostają dostępne z klawiatury, obalając wyjątek.
• Tokeny trybu ciemnego odzwierciedlające tryb jasny bez ponownego obliczenia stosunków — #bbb na #222 jest bliskie zgodności, ale jej nie osiąga.

Dlaczego to jest ważne

Kryterium 1.4.3 jest najczęściej cytowaną pojedynczą niezgodnością w audytach WCAG. Lighthouse, axe, Stark i każde narzędzie automatyczne wykrywają je niezawodnie, więc jest to również najtańszy błąd do wychwycenia. Naprawa polega zazwyczaj na jednej zmianie tokenu projektowego, która kaskadowo obejmuje cały system — raz poprawiona, raz przetestowana, gotowa do wdrożenia. Pomijanie go to niemal zawsze kompromis między marką a dostępnością, który kończy się skargą.