Kontrast WCAG – darmowy tester i kalkulator kolorów
Sprawdzian kontrastu kolorów pozwala na bieżąco analizować stosunek jasności tekstu i tła pod kątem standardu WCAG 2.1. Narzędzie automatycznie przelicza współczynnik i weryfikuje progi dla poziomu AA oraz AAA dla tekstu zwykłego i dużego. Wszystkie obliczenia odbywają się całkowicie w przeglądarce, bez wysyłania danych na serwer i bez zakładania konta.
Jak wykonać sprawdzanie kontrastu kolorów krok po kroku
Narzędzie Sprawdzanie kontrastu kolorów pozwala na błyskawiczne weryfikowanie dostępności projektów cyfrowych bez konieczności wysyłania formularzy.
- Wklej lub wpisz kod HEX w pole koloru tekstu (pierwszoplanowego) albo kliknij pole koloru, aby otworzyć systemowy próbnik.
- Wpisz lub wybierz analogicznie kolor tła.
- Odczytaj wynik współczynnika oraz wskaźniki poziomu AA i AAA, które aktualizują się automatycznie po każdej zmianie.
Jeśli chcesz sprawdzić, jak zestawienie kolorów wygląda po zamianie ról, użyj przycisku Zamień kolory, aby odwrócić kolor tekstu i tła jednym kliknięciem.
Minimalny kontrast WCAG dla poziomu AA i AAA
Standard WCAG 2.1 wyróżnia dwa poziomy zgodności dotyczące kontrastu i stosuje inne kryteria dla tekstu zwykłego oraz dużego. Poziom AA jest powszechnym punktem odniesienia podczas audytów dostępności.
- Poziom AA: wymaga współczynnika co najmniej 4,5:1 dla tekstu zwykłego oraz 3,0:1 dla tekstu dużego.
- Poziom AAA: stawia wyższe wymagania i wymaga współczynnika 7,0:1 dla tekstu zwykłego oraz 4,5:1 dla tekstu dużego.
Za duży tekst uważa się czcionkę o rozmiarze od 18 pt (24 px) przy wadze standardowej lub od 14 pt (18,66 px) przy wadze pogrubionej (bold). Narzędzie od razu wskazuje status Zaliczone lub brak spełnienia wymogów dla wszystkich czterech wariantów jednocześnie.
Kalkulator kontrastu i obsługa kodów HEX
Wklejanie wartości bezpośrednio z edytorów kodu lub programów graficznych jest proste i szybkie. Pola formularza akceptują 3- i 6-cyfrowe kody szesnastkowe (zakres znaków 0–9 oraz A–F).
Znaki spoza prawidłowego zakresu są ignorowane, dzięki czemu wklejenie symbolu # na początku kodu nie powoduje błędu. Pola tekstowe i wizualny próbnik kolorów pozostają stale zsynchronizowane.
Dlaczego warto robić WCAG contrast test w trakcie projektowania
Niski kontrast kolorów to jedna z najczęstszych usterek na stronach internetowych. Tekst o zbyt niskim współczynniku jest trudny do odczytania dla osób niedowidzących, z zaburzeniami rozpoznawania barw lub korzystających z urządzeń w pełnym słońcu.
Przeliczanie relatywnej luminancje kolorów opiera się na matematycznym wzorze W3C. Sprawdzenie parametrów na etapie wyboru palety barw zapobiega kosztownym poprawkom w gotowych produktach cyfrowych.
Najczęściej zadawane pytania
Jaki jest minimalny kontrast WCAG dla poziomu AA?
Dla standardu WCAG 2.1 na poziomie AA minimalny współczynnik kontrastu wynosi 4,5:1 dla zwykłego tekstu. W przypadku dużego tekstu wymagany progiem jest wartość 3,0:1.
Jakie wymogi stawia WCAG contrast minimum dla tekstu dużego?
Dla dużego tekstu poziom AA wymaga kontrastu wynoszącego co najmniej 3,0:1, natomiast poziom AAA wymaga wartości 4,5:1. Jako duży tekst kwalifikuje się krój od 18 pt (24 px) przy zwykłym kroju lub od 14 pt (18,66 px) przy pogrubieniu.
Jak sprawdzić kontrast kolorów za pomocą kodów HEX?
Wystarczy wpisać lub wkleić 3- lub 6-cyfrowy kod HEX w pole koloru tekstu lub tła. Narzędzie automatycznie ignoruje znak # i natychmiast przelicza wynik bez konieczności klikania przycisków.
Czy ten tester kontrastu jest darmowy?
Tak, narzędzie jest całkowicie darmowe i nie wymaga zakładania konta ani podawania danych. Przetwarzanie odbywa się w przeglądarce użytkownika.
Jak działa funkcja zamiany kolorów tekstu i tła?
Przycisk Zamień kolory błyskawicznie zamienia miejscami odcień tekstu i tła. Pozwala to natychmiast przetestować odwrócony wariant kolorystyczny bez ponownego wpisywania kodów.
Ile wynosi kontrast WCAG dla poziomu AAA?
Wymagany współczynnik kontrastu dla poziomu AAA wynosi co najmniej 7,0:1 dla zwykłego tekstu oraz 4,5:1 dla tekstu dużego.
Co weryfikuje wcag kontrast w podglądzie na żywo?
Podgląd na żywo przelicza wzór względnej luminancji W3C i jednocześnie pokazuje cztery wskaźniki statusu. Dzięki temu widać od razu, czy zestawienie osiąga status Zaliczone dla zwykłego i dużego tekstu na poziomach AA oraz AAA.
Polecane
-
Interaction of Color (Josef Albers, po angielsku)Klasyka o tym, dlaczego ten sam kolor wygląda inaczej na każdym tle.
-
Don't Make Me Think, Revisited (Steve Krug, po angielsku)Czytelne kolory to początek; ta krótka klasyka pokazuje resztę użyteczności stron.
-
Czujnik koloru Nix Mini 3Zeskanuj prawdziwą farbę, tkaninę lub próbkę marki do kodu hex i sprawdź go tutaj.
Pomaga utrzymać narzędzia za darmo. ✨
Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.
