Czytelne dla wszystkich

Duży śródtytuł

Tekst główny najbardziej cierpi przy niskim kontraście, bo czyta się go dłużej i drobną czcionką. Link tekstowy

Przycisk

Kolor tekstu

Krycie tekstu

Kolor tła

Symulacja daltonizmu

Motyw

Więcej informacji o kontraście kolorów

Sprawdzanie kontrastu kolorów

Sprawdź, czy tekst jest czytelny na swoim tle, zanim opublikujesz projekt. Wybierz lub wpisz kolor tekstu i kolor tła, a narzędzie pokaże współczynnik kontrastu WCAG 2.x z wynikiem spełnia lub nie spełnia dla AA i AAA, dla zwykłego i dużego tekstu oraz elementów interfejsu. Podgląd na żywo, symulacja daltonizmu i podpowiedzi poprawek pomagają znaleźć parę, która działa. Wybierz kolor tekstu i tła jako HEX, RGB lub HSL. Współczynnik kontrastu WCAG, wyniki AA i AAA oraz podgląd aktualizują się podczas pisania, a najbliższe kolory spełniające wymogi są podpowiadane. Wszystko zapisuje się w tej przeglądarce.

Jak to działa

Wybierz kolor tekstu i kolor tła albo wpisz je jako HEX, RGB lub HSL. Ustaw krycie tekstu, jeśli tekst jest półprzezroczysty.
Odczytaj współczynnik kontrastu i plakietki AA i AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu oraz obejrzyj podgląd na żywo.
Zastosuj proponowany kolor, jeśli para nie spełnia wymogów, zapisz dobre pary w palecie i skopiuj CSS do projektu.

Poprawki, nie tylko oceny

Gdy para nie spełnia wymogów, narzędzie szuka najbliższego koloru tekstu i tła o tym samym odcieniu i nasyceniu, który osiąga AA i AAA, a jedno kliknięcie go stosuje. Półprzezroczysty tekst jest najpierw mieszany z tłem, dokładnie tak, jak rysuje go przeglądarka.

Prywatnie i przenośnie

Twoje kolory i paleta są zapisywane tylko w tej przeglądarce. Zapisz wszystko jako JSON, aby zrobić kopię lub przenieść na inne urządzenie, albo zapisz wynik jako PDF lub obraz. Cofnij i ponów działają dla każdej zmiany.

Często zadawane pytania

Czy sprawdzanie kontrastu jest bezpłatne?

Tak. Jest bezpłatne, nie wymaga konta i działa w każdej nowoczesnej przeglądarce.

Jakiego współczynnika potrzebuję?

Poziom AA WCAG wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu, takich jak obramowania pól i ikony. Poziom AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego.

Dlaczego 4,48 nie spełnia wymogów, skoro zaokrągla się do 4,5?

Progi WCAG są dokładne. Współczynnik 4,48:1 jest niższy niż 4,5:1, więc nie spełnia AA dla zwykłego tekstu. Narzędzie porównuje wartość niezaokrągloną, więc plakietki są zawsze rygorystyczne.