Sprawdzanie kontrastu

Narzędzie do sprawdzania kontrastu porównuje dwa kolory, koloru tekstu i koloru tła, i mówi, czy tekst zapisany w takiej kombinacji jest czytelny. Oblicza współczynnik kontrastu WCAG i sprawdza go względem czterech standardowych progów: AA dla zwykłego tekstu, AA dla dużego tekstu, AAA dla zwykłego tekstu i AAA dla dużego tekstu. Wybierz kolory za pomocą selektorów albo wpisz kody hex bezpośrednio i obserwuj podgląd na żywo.

Jak liczony jest współczynnik?

Narzędzie stosuje dokładnie wzór WCAG 2. Kanały sRGB każdego koloru są linearyzowane (czyli cofa się krzywą gamma, jaką stosują monitory) i łączone w luminancję względną z użyciem standardowych wag: 21,26% dla czerwieni, 71,52% dla zieleni i 7,22% dla błękitu, co odzwierciedla różną wrażliwość ludzkiego wzroku na poszczególne kanały. Jaśniejsza z dwóch luminancji jest następnie porównywana z ciemniejszą, a do obu dodawana jest niewielka stała uwzględniająca światło otoczenia, co daje współczynnik między 1:1 (identyczne kolory) a 21:1 (czysta czerń na bieli). Ten współczynnik jest sprawdzany względem czterech progów: 4,5:1 dla AA przy zwykłym tekście, 3:1 dla AA przy dużym tekście, 7:1 dla AAA przy zwykłym tekście i 4,5:1 dla AAA przy dużym tekście. Akceptowane są tylko 3- i 6-cyfrowe kolory hex, bo obliczenia zawsze porównują dwa w pełni nieprzezroczyste kolory i nie potrzebują kanału alfa ani innych notacji.

Czy moje dane są gdzieś przesyłane?

Nie. Całe obliczenie działa w przeglądarce, na kilku liniach matematyki, nic nie jest wysyłane na serwer. Sprawdzane kolory nigdy nie opuszczają twojego urządzenia, więc można spokojnie testować kolory marki z wewnętrznego systemu projektowego albo palety klienta, nie wysyłając ich nigdzie.

Co WCAG uznaje za duży tekst?

WCAG definiuje duży tekst jako 18pt (24px) o normalnej grubości albo 14pt (18,66px) i więcej w pogrubieniu, dlatego obowiązuje dla niego luźniejszy próg niż dla tekstu podstawowego: większe, grubsze kreski pozostają czytelne przy niższym kontraście. Użyj tego narzędzia, żeby potwierdzić, że tekst podstawowy spełnia poziom AA przed opublikowaniem projektu, sprawdzić, czy etykieta przycisku jest czytelna na swoim tle, albo zaudytować paletę kolorów istniejącej strony pod kątem dostępności. Zobacz wytyczne W3C Understanding Contrast Minimum, żeby poznać dokładny wzór i uzasadnienie progów, albo artykuł WebAIM o kontraście dla wyjaśnienia w prostym języku.