Kontrola kontrastu (Contrast Checker)

Sprawdź kontrast tekstu przed publikacją

Dobry kontrast kolorów to jeden z najprostszych sposobów, by strona była czytelniejsza. To narzędzie do sprawdzania kontrastu porównuje kolor tekstu i tła według wzoru WCAG na luminancję względną, a następnie podaje współczynnik kontrastu oraz wyniki zaliczone/niezaliczone dla poziomów AA i AAA. Przydaje się przy przyciskach, nawigacji, plakietkach, kartach, komunikatach ostrzegawczych i wszędzie tam, gdzie tekst pojawia się na kolorowym tle.

Obliczenia działają w Twojej przeglądarce i nie wymagają przesyłania żadnych plików. Wybierz dwa kolory, w razie potrzeby zamień je miejscami i użyj bloku podglądu, aby zobaczyć, jak wygląda prawdziwy tekst. Współczynnik jest obiektywny, ale podgląd nadal ma znaczenie, ponieważ grubość pisma, rozmiar liter i otaczający układ wpływają na czytelność. Para, która technicznie przechodzi test, może męczyć, jeśli tekst jest drobny lub tło jest wizualnie przeładowane.

Jak rozumieć wyniki AA i AAA

WCAG AA to typowy cel dla większości stron i produktów. Zwykły tekst powinien osiągać co najmniej 4,5:1, a duży tekst co najmniej 3:1. AAA jest surowszy: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego. Duży tekst to 18 pt zwykły lub 14 pt pogrubiony i większy. Niższy próg istnieje, ponieważ większe, grubsze litery łatwiej odróżnić przy niższym kontraście niż mały tekst podstawowy. Jeśli nie wiesz, która kategoria dotyczy Twojego tekstu, traktuj go jako zwykły i celuj w wyższe wymaganie.

Projektowanie dostępnych systemów kolorów

Kontrast warto sprawdzać wcześnie, a nie dopiero po ukończeniu projektu graficznego. Wybierając kolory marki, testuj je na powierzchniach, na których faktycznie się pojawią: białych kartach, ciemnych paskach nawigacji, stonowanych tłach i stanach wyłączonych. Dokumentuj dostępne kombinacje jako tokeny, aby zespoły nie musiały odkrywać ich na nowo. Pamiętaj, że kontrast to tylko jeden element dostępności. Stosuj widoczne obramowania fokusa, czytelne etykiety, semantyczny HTML i nie polegaj wyłącznie na kolorze, by przekazywać ważne stany, takie jak błędy, powodzenie i ostrzeżenia.