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.
W praktyce
Kontrast trzeba sprawdzać na realnych kombinacjach kolorów — także dla stanów hover, focus i disabled oraz tekstu na obrazach i gradientach. Warto wiedzieć, że WCAG 3 pracuje nad nowym modelem percepcyjnym (APCA), który lepiej odzwierciedla czytelność ciemnych motywów.
Przykład
Na ciemnym tle (#0f0f0f) szary tekst #767676 nie spełnia AA (ok. 3,8:1), a #b3b3b3 już tak (ok. 8,6:1).
.card-caption {
color: #767676; /* ~3.8:1 na #0f0f0f */
background: #0f0f0f;
}.card-caption {
color: #b3b3b3; /* ~8.6:1 na #0f0f0f */
background: #0f0f0f;
}FAQ
Jaki kontrast jest wymagany przez WCAG 2.2?
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.
Czy kontrast 3:1 zawsze spełnia WCAG?
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.
Jak poprawnie sprawdzać kontrast kolorów?
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.