Przejdź do treści
ToolMug

Sprawdzacz kontrastu

Wybierz kolor tekstu i tła, aby zobaczyć współczynnik kontrastu oraz zgodność ze standardami WCAG dla zwykłego i dużego tekstu.

Działa w przeglądarce — nic, co wpiszesz, nie jest wysyłane

Współczynnik kontrastu

4,54:1

  • AA — zwykły tekst ≥ 4.5:1Spełnia
  • AA — duży tekst ≥ 3:1Spełnia
  • AAA — zwykły tekst ≥ 7:1Nie spełnia
  • AAA — duży tekst ≥ 4.5:1Spełnia

Tekst dużego nagłówka

Zwykły tekst akapitu przy 16 px powinien być łatwy do czytania.

Drobny druk, podpisy i przypisy.

Przycisk

Najbliższy kolor tekstu spełniający AAA: #595959 (7.00:1)

Jak używać

  1. Wpisz lub wybierz kolor tekstu.
  2. Wpisz lub wybierz kolor tła.
  3. Odczytaj współczynnik i wyniki WCAG AA oraz AAA.

Opis opcji

Zwykły tekst
WCAG AA wymaga kontrastu 4,5:1, a AAA 7:1 dla zwykłego tekstu.
Duży tekst
WCAG AA wymaga 3:1, a AAA 4,5:1 dla dużego tekstu.
Jasność względna
Współczynnik jest obliczany z jasności liniowej kolorów zgodnie z definicją WCAG.

Jak obliczany jest współczynnik

Każdy kolor jest zamieniany z sRGB na światło liniowe, a następnie na luminancję względną:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Zielony liczy się najbardziej, ponieważ oko jest na niego najbardziej wrażliwe. Kilka wyników na białym tle:

Kolor tekstu Współczynnik Wynik
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA — zwykły tekst, nie AAA — zwykły tekst
#767676 4,54 : 1 AA — zwykły tekst
#777777 4,48 : 1 Nie spełnia AA dla zwykłego tekstu, spełnia dla dużego tekstu

Definicje WCAG znajdziesz w Understanding Success Criterion 1.4.3.

Najczęściej zadawane pytania

Jaki kontrast jest dobry dla tekstu?

Minimum WCAG AA to 4,5:1 dla zwykłego tekstu i 3:1 dla dużego.

Czy 100% zgodności oznacza dobrą dostępność?

Nie. Kontrast to tylko jeden element dostępności; znaczenie mają też rozmiar, krój, focus i semantyka.

Czy narzędzie obsługuje RGB i HSL?

Tak, możesz wpisywać popularne zapisy kolorów CSS.

Prywatność

To narzędzie działa w całości w przeglądarce. Twoje pliki i tekst są przetwarzane na Twoim urządzeniu i nigdy nie trafiają na nasze serwery.

Podobne narzędzia