Zmierz kontrast WCAG między dwoma kolorami

Narzędzie Kontrast kolorów przydaje się projektantom i programistom front-end, gdy chcą ocenić kolory przed zatwierdzeniem ich dostępności. Zmierz kontrast WCAG między dwoma kolorami.

Zmierz kontrast WCAG między dwoma kolorami. Narzędzie jest bezpłatne w przeglądarce i pokazuje wynik bez konieczności tworzenia konta.

Jak używać

Wpisz kolor tła, na przykład jako kod szesnastkowy.
Dodaj kolor tekstu lub elementu, który chcesz porównać z tym tłem.
Uruchom sprawdzenie, aby uzyskać współczynnik kontrastu między tymi dwoma kolorami.
Przeczytaj progi WCAG pokazane dla zwykłego tekstu, dużego tekstu i elementów interfejsu.
Przetestuj kolejną parę kolorów, jeśli pierwszy wynik nie spełnia Twoich potrzeb.

Przykład

Przykład porównuje kolor ciemny z jasnym. Narzędzie oblicza współczynnik kontrastu i pokazuje odpowiednie progi WCAG. Sprawdź, czy współczynnik wystarcza dla zwykłego tekstu, dużego tekstu lub elementów interfejsu, a następnie przetestuj inną parę, jeśli pozwala na to Twój system projektowy. Wynik pomaga podjąć decyzję przed publikacją.

Dane wejściowe

#0F172A
#FFFFFF

Ograniczenia i formaty

Narzędzie porównuje dwa kolory, a nie rzeczywistą czytelność obrazu lub zdjęcia.
Przezroczystość, gradienty i nakładki nie zawsze są odwzorowane.
Sam dobry współczynnik nie potwierdza wszystkich aspektów dostępności strony.
Sprawdź osobno kolory stanów hover, active i disabled.
Wyświetlane wartości należy interpretować zgodnie z rozmiarem i przeznaczeniem tekstu.

Gdzie odbywa się przetwarzanie

Całe obliczanie kontrastu odbywa się w Twojej przeglądarce. Wprowadzone kody kolorów pozostają na Twoim urządzeniu i nie są nigdzie wysyłane. Wynik pojawia się zaraz po sprawdzeniu. Możesz wyczyścić pola lub zamknąć kartę bez zachowywania tych wartości.

Częste pytania

Jaki współczynnik powinienem osiągnąć dla tekstu podstawowego?

Progi WCAG zależą od rozmiaru i przeznaczenia tekstu. Dla zwykłego tekstu poziom AA zwykle wymaga wyższego kontrastu niż dla dużego tekstu. Przeczytaj wskazówki wyświetlane przez narzędzie dla Twojego konkretnego przypadku i sprawdź osobno każdy styl tekstu.

Czy mogę używać nazw kolorów, takich jak czerwony lub niebieski?

Pole oczekuje wartości, które narzędzie potrafi odczytać, zwłaszcza szesnastkowych kodów kolorów. Jeśli nazwa nie jest rozpoznawana, zastąp ją równoważnym kodem szesnastkowym i uruchom sprawdzenie ponownie.

Czy narzędzie sprawdza kontrast na zrzucie ekranu?

Nie, oblicza kontrast między dwoma wprowadzonymi kolorami. Nie odczytuje obrazu ani całej strony. W przypadku makiety zanotuj użyte kody kolorów i przetestuj osobno każdą ważną parę.