Sprawdzanie kontrastu kolorów

Sprawdź lokalnie kontrast koloru pierwszego planu i tła zgodnie ze wzorem względnej luminancji WCAG, oceń osobno próg dla zwykłego tekstu i AA/AAA dla tekstu o dużym rozmiarze oraz obsłuż eksport raportów.

Lokalne przetwarzanie w przeglądarce
Ta strona przeszła kontrolę publicznego katalogu; po włączeniu JavaScript można korzystać z pełnej funkcjonalności.
Instrukcja obsługi

Jak korzystać ze sprawdzania kontrastu kolorów

Wartości kolorów są obliczane pod kątem względnej luminancji i kontrastu tylko w bieżącej przeglądarce; nie są przesyłane ani zapisywane.

  1. Wprowadź dwa kolory

    Użyj selektora kolorów lub wklej wartość #RRGGBB, aby ustawić kolor pierwszoplanowy i tła; podgląd zostanie zaktualizowany jednocześnie.

  2. Próg sprawdzania

    Kliknij przycisk sprawdzania, aby osobno wyświetlić status zaliczenia dla zwykłego tekstu AA, zwykłego tekstu AAA oraz tekstu dużym rozmiarem AA.

  3. Skopiuj raport z kontroli

    Po pomyślnym sprawdzeniu możesz skopiować raport lub pobrać TXT, zawierający wartości kolorów, współczynniki i wyniki dla poszczególnych progów.

Ograniczenia i uwagi

  • Pierwsza wersja przyjmuje wyłącznie wartości #RGB lub #RRGGBB bez kanału alfa; w przypadku kolorów półprzezroczystych należy najpierw określić rzeczywiste tło kompozycji.
  • 4.5:1 dotyczy zwykłego tekstu głównego AA, 3:1 dotyczy dużego tekstu AA, a 7:1 jest zalecanym progiem dla zwykłego tekstu głównego AAA; należy również sprawdzić rozmiar czcionki, jej grubość oraz kontrast elementów nietekstowych.
  • Narzędzie oblicza tylko kontrast pary jednolitych kolorów; nie symuluje gradientów, obrazów, cieni, renderowania czcionek ani złożonych teł.

Często zadawane pytania

Co oznacza 4.5:1?

To WCAG minimalny próg kontrastu AA dla zwykłego tekstu akapitowego; próg AA dla tekstu akapitowego o dużym rozmiarze wynosi 3:1.

Dlaczego nie można bezpośrednio ocenić przezroczystego koloru?

Końcowy kolor przezroczystego pierwszego planu lub tła zależy od kolejności komponowania i obrazu tła; bardziej niezawodne jest najpierw ustalenie jednolitego koloru wyświetlanego w praktyce.

Czy spełnienie wymagań dotyczących kontrastu zawsze oznacza dostępność?

Niekoniecznie. Należy również sprawdzić rozmiar czcionki, grubość, stany, fokus, komponenty nietekstowe, tło obrazu i wygląd na rzeczywistym urządzeniu.

Informacje zwrotne o stronieZnalazłeś problem lub masz propozycję ulepszenia?
Funkcja opinii wymaga użycia w wersji online

Proszę włączyć JavaScript w wersji online przed wysłaniem; lokalne funkcje bieżącego narzędzia lub przykładu nie zostaną naruszone.

Przejdź do wersji online i prześlij opinię