Progi WCAG w skrócie
- AA: 4,5:1 tekst zwykły, 3:1 tekst duży i elementy UI (SC 1.4.3, 1.4.11).
- AAA: 7:1 tekst zwykły, 4,5:1 tekst duży (SC 1.4.6).
- Wyjątki: logotypy, tekst dekoracyjny i elementy nieaktywne.
Jaki jest dobry kontrast dla dostępności?
Dla zwykłego tekstu dobry kontrast to co najmniej 4,5:1 na poziomie WCAG AA. Duży tekst oraz wybrane elementy interfejsu powinny osiągać co najmniej 3:1. Im wyższy współczynnik, tym większa rezerwa czytelności, szczególnie na telefonie, w słońcu i przy przygaszonym ekranie.
Jak sprawdzić kontrast krok po kroku
- Wybierz rzeczywistą parę kolorów tekstu i tła, a nie tylko wartości z palety projektu.
- Porównaj wynik z właściwym progiem: 4,5:1 dla tekstu zwykłego albo 3:1 dla dużego tekstu i elementów UI.
- Powtórz pomiar dla hover, focus, disabled oraz tekstu na obrazie lub gradiencie, bo liczy się najgorszy fragment tła.
- Zmień kolor, wagę lub tło i sprawdź ponownie w kontekście całego komponentu.
W praktyce
Oceń rzeczywiste tło i wszystkie aktywne stany. Nieaktywne komponenty mają wyjątek od wskazanych wymagań kontrastu, ale ich czytelność nadal warto sprawdzić dla UX. WCAG 3 i badania APCA nie zastępują oceny zgodności z WCAG 2.2.
Przykład
Na ciemnym tle (#0f0f0f) szary tekst #767676 nie spełnia AA (ok. 4,22:1), a #b3b3b3 już tak (ok. 9,14:1).
.card-caption {
color: #767676; /* ~4.22:1 na #0f0f0f */
background: #0f0f0f;
}.card-caption {
color: #b3b3b3; /* ~9.14:1 na #0f0f0f */
background: #0f0f0f;
}Jak czytać wynik kalkulatora
Porównuj próg przed zaokrągleniem: 4,499:1 nie spełnia 4,5:1. Dwa kolory nie wystarczą do oceny tekstu na fotografii, przezroczystości, całego komponentu ani zgodności strony z WCAG.
Dla zwykłego tekstu celuj w co najmniej 4,5:1 na poziomie WCAG AA. Dla dużego tekstu oraz wybranych elementów interfejsu wystarcza 3:1, ale wyższy wynik daje większą rezerwę czytelności.
Na poziomie AA zwykły tekst powinien mieć kontrast co najmniej 4,5:1, a duży tekst co najmniej 3:1. Dla tekstu zwykłego poziom AAA wymaga 7:1, a dla dużego 4,5:1.
Nie. 3:1 wystarcza dla dużego tekstu oraz wybranych komponentów interfejsu i grafik informacyjnych. Zwykły tekst na poziomie AA wymaga 4,5:1.
Sprawdź rzeczywistą parę tekst–tło oraz osobno stany hover, focus i disabled. Dla tekstu na obrazie lub gradiencie oceń najgorszy fragment tła; sam wynik automatyczny nie zastępuje przeglądu projektu.