Narzędzie korzysta z oficjalnego wzoru WCAG dotyczącego luminancji względnej, więc wyniki są zgodne z wynikami narzędzia WebAIM i większości audytów dostępności. Wszystko działa w przeglądarce - kolory nie są nigdzie przesyłane i nie ma żadnych limitów.
Sprawdzanie kontrastu kolorów
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Współczynnik kontrastu
Zdanywymaga 4.5:1
Zdanywymaga 3:1
Niezdanywymaga 7:1
Zdanywymaga 4.5:1
Duży = 18 pt (24 px) lub 14 pt (18,66 px) pogrubiony.
Czym jest narzędzie do sprawdzania kontrastu kolorów?
Narzędzie do sprawdzania kontrastu kolorów mierzy współczynnik kontrastu między kolorem tekstu a tłem i wskazuje, czy spełnia normy dostępności WCAG. Wynik mieści się w przedziale od 1:1 do 21:1, a narzędzie pokazuje wynik zdany lub niezda dla poziomów AA i AAA, zarówno dla tekstu normalnego, jak i dużego.
Jak korzystać
- 1Wpisz kolory. Podaj kod hex, wartość rgb() lub nazwę koloru CSS dla tekstu i tła, albo wybierz je za pomocą próbnika kolorów.
- 2Odczytaj współczynnik. Współczynnik kontrastu aktualizuje się na bieżąco, wraz z podglądem tekstu na tle.
- 3Sprawdź znaczniki. Każdy znacznik pokazuje wynik zdany lub niezdany dla WCAG AA i AAA, dla tekstu normalnego i dużego.
Dla kogo
- Projektanci testujący kolory marki przed przekazaniem ich do wdrożenia.
- Programiści front-end sprawdzający kolory przycisków, linków i etykiet pod kątem WCAG AA.
- Audytorzy dostępności dokumentujący błędy kontrastu z dokładnymi współczynnikami.
- Zespoły ds. treści i e-mail upewniające się, że tekst pozostaje czytelny na kolorowych tłach.
Najczęstsze pytania
Czy narzędzie do sprawdzania kontrastu kolorów jest darmowe?
Tak - jest w 100% darmowe, bez rejestracji i bez żadnych limitów. Działa wyłącznie w przeglądarce.
Jaki współczynnik kontrastu jest wymagany przez WCAG AA?
WCAG 2.1 na poziomie AA wymaga współczynnika kontrastu co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego. Poziom AAA podnosi te wymagania do 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego.
Co się liczy jako duży tekst?
Duży tekst to co najmniej 18 pt (ok. 24 px) przy normalnej grubości lub 14 pt (ok. 18,66 px) przy pogrubieniu. Duży tekst może mieć niższy kontrast, bo większe glify są łatwiejsze do odczytania.
Jak obliczany jest współczynnik kontrastu?
Wzór to (L1 + 0,05) / (L2 + 0,05), gdzie L1 i L2 to luminancja względna jaśniejszego i ciemniejszego koloru. Luminancja jest obliczana z kanałów czerwonego, zielonego i niebieskiego w modelu sRGB zgodnie z definicją WCAG 2.x.
Czy obsługuje hex, RGB i nazwy kolorów?
Tak. Można podać hex 3-, 4-, 6- lub 8-cyfrowy, wartości rgb() i rgba() lub dowolną nazwę koloru CSS, np. 'teal'. Można też wybrać kolor za pomocą próbnika.
Dlaczego ten sam współczynnik raz zdaje, a raz nie zdaje?
Wymagany współczynnik zależy od wielkości tekstu i docelowego poziomu. Wartość 3,5:1 nie spełnia AA dla tekstu normalnego, ale spełnia AA dla tekstu dużego - dlatego zawsze sprawdzaj względem faktycznie używanego rozmiaru i poziomu.