Sprawdzanie kontrastu
Sprawdzaj kontrast par kolorów według WCAG, z werdyktami AA i AAA oraz sugestiami poprawek.
Powiązane narzędzia
Sprawdzanie kontrastu
Wklej pary kolorów tekstu i tła, po jednej w wierszu — #7a1f2b on #ffffff, #333, #eee albo rgb(0, 0, 0) #fff — a przy każdej natychmiast zobaczysz współczynnik kontrastu według WCAG 2 wraz z werdyktem spełnia lub nie spełnia dla każdego poziomu. Współczynnik biegnie od 1 : 1 (brak kontrastu) do 21 : 1 (czerń na bieli) i jest liczony z luminancji względnej dokładnie tak, jak definiują wytyczne, więc liczby zgadzają się z narzędziami audytowymi i inspektorem przeglądarki.
WCAG wyróżnia dwa poziomy. AA, do którego odwołuje się większość przepisów i umów, wymaga 4,5 : 1 dla zwykłego tekstu i 3 : 1 dla dużego tekstu. Surowszy AAA żąda 7 : 1 i 4,5 : 1. Tekst liczy się jako duży od 18 pt (około 24 px) w zwykłej odmianie lub od 14 pt (około 18,7 px) w pogrubieniu — dlatego nagłówek może przejść przy współczynniku, przy którym akapit przepada. Raport wypisuje wszystkie cztery kontrole dla każdej pary; wynik kompaktowy daje jeden wiersz na parę i czyta się szybciej, gdy przeglądasz całą paletę naraz.
Gdy para nie spełnia AA dla zwykłego tekstu, włącz „Zaproponuj poprawkę”: narzędzie przyciemnia lub rozjaśnia kolor tekstu małymi krokami jasności — odcień zostaje — aż osiągnie 4,5 : 1, i wypisuje najbliższy spełniający hex gotowy do wklejenia do stylów.
Wszystko działa w twojej przeglądarce; niepublikowane palety marki nigdy nie opuszczają urządzenia. Kolory zapiszesz jako hex o 3 lub 6 znakach z krzyżykiem lub bez, jako rgb() czy rgba(), albo popularną angielską nazwą CSS — podstawowe 16 plus częste rozszerzone. Pełnej listy 148 nazw narzędzie celowo nie nosi; rzadkie nazwy wpisz jako hex. Wiersz, który nie jest parą kolorów, zostaje spokojnie oznaczony, a reszta liczy się dalej.