Sprawdź kontrast tekstu i tła według WCAG: współczynnik oraz ocena AA i AAA dla zwykłego i dużego tekstu. Za darmo, w przeglądarce.
Jak używać Sprawdzanie kontrastu kolorów?
Wprowadź kolory pierwszego planu (tekstu) i tła.
Sprawdź współczynnik kontrastu i ocenę WCAG (AA/AAA).
W razie potrzeby dostosuj kolory, aby spełnić standardy.
Najczęściej zadawane pytania o Sprawdzanie kontrastu kolorów
Jaka jest różnica między WCAG AA a AAA?
AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. AAA jest bardziej rygorystyczne — odpowiednio 7:1 i 4,5:1.
Co zrobić, jeśli mój współczynnik kontrastu nie przechodzi testu?
Rozjaśnij lub przyciemnij kolory, aby zwiększyć kontrast. Narzędzie pokazuje wyniki w czasie rzeczywistym podczas dostosowywania.
Duży tekst ma niższy próg — od jakiego rozmiaru liczy się jako duży?
WCAG uznaje tekst za duży od 18pt (około 24px) przy zwykłej grubości albo od 14pt (około 18,7px) przy pogrubieniu. Spełnienie tego obniża wymóg AA z 4,5:1 do 3:1. Pamiętaj jednak, że to progi minimalne, a nie cele: tekst główny musi być czytelny także na przygaszonym ekranie laptopa albo w słońcu, więc celowanie w okolice 7:1 to bezpieczniejszy nawyk.
Jak sprawdzić kontrast tekstu na zdjęciu albo półprzezroczystym panelu?
Obliczenie kontrastu zakłada dwa jednolite kolory, więc na zdjęciu trzeba pobrać najjaśniejszy i najciemniejszy punkt pod tekstem i wykonać sprawdzenie dwa razy. Jeśli któryś nie przejdzie, tekst gdzieś na obrazie utonie. W praktyce położenie jednolitego pasa pod tekstem jest pewniejsze niż półprzezroczysta czarna warstwa czy cień liter, bo oba zależą od tego, co znajduje się pod spodem.
Wskazówki dotyczące efektywnego korzystania z Sprawdzanie kontrastu kolorów
Tekst zwykły potrzebuje 4,5:1, a od 18pt lub pogrubionych 14pt wystarczy 3:1 dla poziomu AA.
Polska ustawa o dostępności cyfrowej odsyła do WCAG, więc obowiązują te same progi.
Elementy nietekstowe, jak ikony i obramowania pól, także wymagają kontrastu 3:1.