Contrast Checker: sprawdź kontrast kolorów według WCAG

Z Contrast Checker możesz korzystać bezpłatnie i bez rejestracji. Współczynnik kontrastu jest obliczany bezpośrednio w Twojej przeglądarce, a Twoje kolory nie są wysyłane na serwer.

Narzędzie najpierw oblicza luminancję względną (L) obu kolorów według wzoru WCAG 2.x, a następnie dzieli L jaśniejszego koloru powiększone o 0.05 przez L ciemniejszego koloru powiększone o 0.05. Wynik mieści się w przedziale od 1:1 (identyczne kolory) do 21:1 (czerń na bieli); kolejność kolorów nie ma znaczenia. Im wyższa wartość, tym łatwiej czytać tekst na danym tle.

Na poziomie AA zwykły tekst wymaga kontrastu co najmniej 4.5:1, a duży tekst 3:1. Bardziej rygorystyczny poziom AAA wymaga 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. Elementy interfejsu i grafiki, takie jak obramowania pól tekstowych czy ikony, wymagają 3:1. Większość wymogów prawnych odnosi się do poziomu AA; AAA to dobrowolny, bardziej rygorystyczny poziom.

Za duży uznaje się tekst od 18pt (24px) lub od 14pt (18.66px), jeśli jest także pogrubiony. Dla dużego tekstu obowiązują niższe minimalne współczynniki kontrastu (3:1 zamiast 4.5:1 dla AA), ponieważ większa czcionka pozostaje czytelna nawet przy niższym kontraście.

Wartości HEX z # lub bez, trzy- albo sześciocyfrowe (#fff lub #ffffff), rgb() i rgba() oraz same liczby, np. 34, 34, 34. Możesz też wybrać dowolny kolor w selektorze kolorów. W przypadku rgba() wartość alfa jest ignorowana — narzędzie używa koloru w pełni kryjącego. Nieprawidłowa wartość jest oznaczana w polu, dopóki jej nie poprawisz.

Jeśli Twoja kombinacja nie spełnia wymagań AA dla zwykłego tekstu (4.5:1), narzędzie po kliknięciu proponuje najbliższy kolor, który osiąga ten próg. Zmienia w tym celu tylko jasność tekstu albo tła — w zależności od tego, który kolor wymaga mniejszej korekty. Kliknij „Zastosuj”, aby użyć propozycji. Przykład: kolor #777777 na tle #ffffff osiąga 4.48:1, a proponowany kolor #767676 osiąga 4.54:1.

Tak. Contrast Checker automatycznie zapisuje aktualny kolor pierwszego planu i tła w adresie URL. Gdy skopiujesz link z paska adresu, otworzy on tę samą kombinację. Za pomocą linków pod podglądem możesz też przekazać kolor pierwszego planu do symulatora daltonizmu lub generatora schematów kolorów.

Przepisy takie jak Europejski akt o dostępności (EAA) i wdrażające go przepisy krajowe czy amerykańska ustawa ADA zobowiązują wiele stron internetowych i aplikacji do zapewnienia minimalnego poziomu dostępności, zwykle odwołując się do WCAG. Odpowiedni kontrast tekstu to jeden z najczęściej sprawdzanych wymogów. To narzędzie nie zastępuje porady prawnej, ale pomaga Ci samodzielnie sprawdzić techniczne progi kontrastu WCAG.