Narzędzie: Test kontrastu kolorów WCAG
Wybierz kolory
Contrast ratio
17.74:1
AA (zwykły tekst)
PASS
AAA (zwykły tekst)
PASS
Ocena WCAG
AA — tekst zwykły
Spełnia wymagania
AAA — tekst zwykły
Spełnia wymagania
AA — duży tekst
Spełnia wymagania
AAA — duży tekst
Spełnia wymagania
Podgląd tekstu
Przykładowy interfejs
Czy ten kontrast jest czytelny?
Użyj tego podglądu, aby szybko ocenić czytelność przycisków, nagłówków i tekstów na stronie internetowej lub w materiałach marketingowych.
Instrukcja
Jak korzystać z narzędzia
Krok po kroku
- Wpisz sześcioznakowy kod HEX koloru tekstu, na przykład #1A1A1A.
- Podaj kolor tła w tym samym formacie i porównaj wynik na próbce tekstu.
- Jeśli poziom AA nie jest spełniony, przyciemnij tekst lub rozjaśnij tło i sprawdź ponownie.
Ograniczenia
Test ocenia jedną wskazaną parę kolorów. Nie skanuje strony i nie uwzględnia tekstu na zdjęciach, gradientów ani przezroczystości. Współczynnik jest zaokrąglany do dwóch miejsc po przecinku, a wynik nie jest certyfikatem zgodności z WCAG.
Pytania i odpowiedzi
Jaki kontrast jest wymagany na poziomie AA i AAA?
Dla zwykłego tekstu WCAG wymaga co najmniej 4,5:1 na poziomie AA i 7:1 na poziomie AAA. Duży tekst, czyli od 18 pt albo od 14 pt pogrubiony, wymaga 3:1 dla AA i 4,5:1 dla AAA. Ikony i krawędzie pól formularza mają osobne kryterium 3:1.
Czy test sprawdzi kontrast całej mojej strony?
Nie. Ten test porównuje jedną wpisaną parę kolorów. Inne problemy na podstronie znajdziesz w podstawowym teście dostępności, a tutaj sprawdzisz konkretne zestawienia z palety marki. Tekst na zdjęciach i gradientach oceń ręcznie: zmierz kontrast z najjaśniejszym i najciemniejszym fragmentem tła.
Wolisz zlecić poprawki?
Jeśli wynik pokazuje problem, którego nie chcesz poprawiać samodzielnie, pomożemy przy SEO, stronie internetowej lub automatyzacji.