Bez przesyłania, 100% lokalnie, bez konta

Sprawdzarka kontrastu WCAG

Wpisz lub wybierz dwa kolory i zobacz od razu współczynnik kontrastu WCAG, z odznakami AA/AAA dla tekstu zwykłego i dużego.

Jak działa Sprawdzarka kontrastu

To narzędzie oblicza współczynnik kontrastu WCAG między dwoma kolorami i pokazuje, czy para spełnia poziom AA lub AAA dla tekstu normalnego, dużego oraz nietekstowych elementów interfejsu. Wszystko jest obliczane lokalnie w przeglądarce; wpisane kolory nigdy nie są wysyłane.

Napisał Bastien Sulyan

Sprawdzarka kontrastu: instrukcja krok po kroku

  1. Wpisz lub wybierz kolor pierwszego planu (tekstu).
  2. Wpisz lub wybierz kolor tła.
  3. Odczytaj współczynnik kontrastu oraz odznaki AA/AAA dla tekstu normalnego, dużego tekstu i nietekstowych elementów interfejsu.
  4. Użyj Zamień kolory, aby sprawdzić parę w drugą stronę.

Typowe zastosowania

  • Sprawdzenie głównego koloru marki na tle bieli lub czerni przed wdrożeniem komponentu przycisku.
  • Zweryfikowanie, czy stonowany szary tekst nadal przechodzi próg AA na jasnym tle karty.
  • Potwierdzenie, że kolor linku wewnątrz akapitu osiąga próg 4,5:1 dla normalnego tekstu.
  • Sprawdzenie, czy duży, cieńszy nagłówek nadal przechodzi złagodzony próg 3:1 dla dużego tekstu.

Często zadawane pytania

Czy to narzędzie wysyła moje kolory na serwer?

Nie, obliczenia wykonywane są w całości w przeglądarce w JavaScript; nic, co wpiszesz, nie jest wysyłane.

Jaki współczynnik kontrastu jest potrzebny dla AA lub AAA?

WCAG 2.x wymaga 4,5:1 dla AA przy normalnym tekście, 7:1 dla AAA przy normalnym tekście, 3:1 dla AA przy dużym tekście i 4,5:1 dla AAA przy dużym tekście.

Co uznaje się za duży tekst?

Co najmniej 24px (18pt) o normalnej grubości lub około 18,7px (14pt) pogrubione; wszystko mniejsze korzysta z progów dla tekstu normalnego.

Dlaczego zamiana pierwszego planu i tła nie zmienia współczynnika?

Wzór na współczynnik jest symetryczny: porównuje tylko jaśniejszą i ciemniejszą luminancję, a nie to, który kolor jest użyty do tekstu. Zamiana wciąż jest przydatna, bo pokazuje, czy para działa też z odwróconymi rolami, na przykład ciemny tekst na jasnym tle a jasny tekst na ciemnym tle.

Czy przejście progu AA gwarantuje, że mój projekt jest dostępny?

Nie. Kontrast to jedno z wielu kryteriów sukcesu WCAG. Dobór kolorów dla osób z zaburzeniami widzenia barw, widoczność fokusu, zmiana rozmiaru tekstu i nawigacja klawiaturą to osobne testy; symulator daltonizmu na tej stronie obejmuje jeden z nich.

Czy to oficjalne narzędzie W3C lub WebAIM?

Nie. Niezależnie implementuje publiczny wzór kontrastu WCAG 2.x i nie jest powiązane z W3C ani żadną inną organizacją zajmującą się dostępnością.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia dla programistów