Co pokazuje współczynnik kontrastu
Współczynnik kontrastu opisuje różnicę luminancji pomiędzy kolorem pierwszego planu a tłem.
Im wyższy wynik, tym większa jest obliczona różnica pomiędzy tymi kolorami.
Samo spojrzenie na próbki nie zawsze wystarcza. Dwa kolory mogą wydawać się wyraźnie różne, ale nadal nie osiągać progu wymaganego dla danego rodzaju tekstu.
Dlatego warto sprawdzić konkretną wartość zamiast polegać wyłącznie na wizualnej ocenie.
Jak interpretować progi kontrastu dla tekstu
W WCAG poziom AA stosuje próg 4,5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu.
Bardziej wymagający poziom AAA używa 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu.
Ten checker weryfikuje wpisane wartości bezpośrednio pod kątem tych standardów i prezentuje wyniki dla zwykłego tekstu, dużego tekstu oraz elementów interfejsu.
Sprawdź kolor w rzeczywistym kontekście
Wynik ma sens wtedy, gdy porównujesz kolory, które rzeczywiście będą występować razem.
Przed podjęciem decyzji sprawdź:
- podstawowy tekst
- tekst drugorzędny
- linki
- stany hover i focus
- etykiety oraz informacje w interfejsie
Nie przekazuj ważnej informacji wyłącznie kolorem
Poprawny kontrast nie rozwiązuje wszystkich problemów związanych z kolorem.
Jeżeli status, błąd lub inna ważna informacja jest rozpoznawalna tylko dzięki zmianie koloru, część użytkowników może jej nie zauważyć.
W ważnych miejscach warto dodać tekst, ikonę, kształt lub inny czytelny sygnał.
Uważaj na przezroczystość, obrazy i gradienty
Proste porównanie dwóch kolorów działa najlepiej wtedy, gdy tekst znajduje się na jednolitym tle.
W przypadku nakładania tekstu na gradient lub grafikę warto zmierzyć kontrast z najmniej kontrastowym fragmentem tła, aby zagwarantować pełną czytelność.
Czego nie potwierdza wynik kontrastu
Dobry wynik jednej pary kolorów nie oznacza automatycznie, że cała strona spełnia wszystkie wymagania dostępności.
Dostępność obejmuje również wiele innych zagadnień niezwiązanych bezpośrednio z tym obliczeniem.
Używaj checkera jako precyzyjnego narzędzia do jednego zadania: porównania kontrastu wybranego tekstu i tła.
Pytania o sprawdzanie kontrastu kolorów
Jaki kontrast jest wymagany dla zwykłego tekstu na poziomie AA?
Dla zwykłego tekstu próg kontrastu WCAG AA wynosi 4,5:1. Dla dużego tekstu próg wynosi 3:1.
Co oznacza poziom AAA?
Dla kontrastu tekstu poziom AAA stosuje wyższe progi: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu.
Czy pozytywny wynik oznacza zgodność całej strony z WCAG?
Nie. Wynik dotyczy testowanej pary kolorów i konkretnego progu kontrastu, a nie wszystkich wymagań dostępności.
Czy checker analizuje cały adres URL?
Narzędzie służy do analizy konkretnych par kolorów wprowadzonych przez użytkownika, a nie do skanowania całego adresu strony.