Wpisz kolory HEX lub wybierz kolory Pantone dla pierwszego planu i tła.
Sprawdź proporcję kontrastu oraz wyniki WCAG AA lub AAA dla zwykłego tekstu, dużego tekstu i komponentów UI.
Użyj podglądu na żywo, zamień kolory, skopiuj CSS albo wypróbuj dostępne sugestie Pantone.

Zastosowania sprawdzania kontrastu

Weryfikuj pary kolorów marki przed użyciem ich w układach cyfrowych.
Sprawdzaj przyciski, formularze, nawigację i inne komponenty UI pod kątem czytelnego kontrastu.
Porównuj palety inspirowane Pantone przed adaptacją kolorów druku na ekrany.
Dokumentuj wyniki WCAG do przeglądów dostępności i przekazania projektu.

Sprawdzanie kontrastu kolorów dla procesów WCAG, UI i Pantone

Użyj tego narzędzia, gdy musisz potwierdzić, że kolor tekstu, tła, stanu przycisku lub palety marki będzie czytelny przed wdrożeniem w witrynie, aplikacji, prezentacji albo systemie projektowym.

Jak poprawnie odczytać wynik WCAG

Narzędzie oblicza względną luminancję obu kolorów i zwraca proporcję kontrastu używaną przez WCAG. Zwykły tekst zwykle potrzebuje 4.5:1 dla AA i 7:1 dla AAA, a duży tekst oraz kluczowe komponenty UI mają niższe progi.

Połącz kolory Pantone z dostępnością cyfrową

Kolory Pantone często wybiera się do marki i druku, ale ich odpowiedniki ekranowe nadal trzeba sprawdzić pod kątem dostępności. Szukaj nazw Pantone lub wartości HEX, podglądaj parę i porównuj dostępne alternatywy przed przekazaniem kolorów do designu lub developmentu.

Praktyczny proces dla projektantów i programistów

Zacznij od dokładnych wartości HEX z pliku projektu, przetestuj kierunki pierwszy plan i tło, skopiuj CSS lub raport i zachowaj zaakceptowaną parę kolorów wraz z dokumentacją palety Pantone.

FAQ sprawdzania kontrastu

Co mierzy to narzędzie do kontrastu?

Mierzy proporcję kontrastu luminancji między kolorem pierwszego planu i kolorem tła, a następnie porównuje wynik z progami WCAG.

Jakie są wymagania kontrastu WCAG AA i AAA?

WCAG AA wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu lub komponentów UI. WCAG AAA wymaga 7:1 dla zwykłego tekstu i 4.5:1 dla dużego tekstu.

Czy kolory Pantone można sprawdzić pod kątem dostępności webowej?

Tak. Referencje Pantone można przekonwertować na wartości ekranowe i sprawdzić pod kątem kontrastu cyfrowego. Zawsze weryfikuj finalne kolory w medium, w którym będą używane.

Informacja o kontraście

Wyniki są obliczane z cyfrowych wartości kolorów i służą planowaniu dostępności. Druk, materiały, oświetlenie i kalibracja ekranu mogą zmienić postrzegany kontrast.