WCAG definiuje kontrast tekstu jako stosunek jasności względnej dwóch kolorów — wyższy stosunek oznacza lepszą czytelność. Większość zespołów celuje w 4,5:1 dla zwykłego tekstu (AA) i 3:1 dla dużego (18 pt regular lub 14 pt bold). AAA podnosi progi do 7:1 i 4,5:1.
Kontrast WCAG
Kontrast to podstawa czytelności i typowych audytów dostępności.
Kontrast WCAG
Podaj dwa kolory hex w sRGB. Stosujemy ten sam wzór jasności względnej co WCAG 2.x (tekst zwykły 4.5:1 AA, duży 3:1; AAA 7:1 / 4.5:1).
Pierwszy plan
Tło
Współczynnik kontrastu
10.94:1
- AA — tekst zwykły (4.5:1) OK
- AA — duży tekst (3:1) OK
- AAA — tekst zwykły (7:1) OK
- AAA — duży tekst (4.5:1) OK
Przykładowy nagłówek
Podgląd tekstu przy tej parze kolorów. Dostosuj kolory powyżej.
Typowe zastosowania
Audyt istniejących par
Wklej kolor tekstu i tła marki i sprawdź AA przed wdrożeniem — najszybszy test dymny.
Dobór ciemniejszego akcentu
Gdy stosunek jest za niski, podnieś lightness w OKLCH, aż przekroczysz 4,5:1 — zachowaj odcień, popraw czytelność.
Argument w dyskusji o designie
Gdy ktoś chce jaśniejszą szarość na tekście, liczba WCAG to konkretny dowód, nie opinia.
Jak korzystać z narzędzia
- 1 Wklej dwa hexy (tekst i tło) lub użyj próbników.
- 2 Odczytaj stosunek i wiersze AA/AAA.
- 3 Sprawdź podgląd na dole przy realnych rozmiarach czcionki.
- 4 Przy failu — delikatnie przyciemnij kolor i powtórz.
Najczęstsze pytania
Czy to działa dla ikon i grafiki?
WCAG 2.1 ma osobny próg 3:1 dla kontrastu elementów nietekstowych. Matematyka ta sama, próg niższy.
Tekst na zdjęciu z przezroczystością?
Formuła WCAG zakłada kolory jednolite. Na zdjęciach użyj scrimu albo próbki najgorszego tła.
Dlaczego nie APCA?
APCA to propozycja następcy, ale WCAG 2.x nadal jest benchmarkiem prawnym w większości krajów.