Jak korzystać: Kontrast kolorów
- 1
Wpisz dwa kolory
Podaj kolor tekstu i kolor tła jako HEX, rgb(), hsl() lub oklch() albo otwórz okrągłą próbkę, aby wybrać kolor.
- 2
Sprawdź werdykt
Współczynnik i pięć wierszy „Zaliczone” lub „Niezaliczone” pokazują poziomy AA i AAA dla zwykłego i dużego tekstu oraz regułę 3:1 dla ikon i obramowań.
- 3
Zastosuj poprawkę
Jeśli któryś poziom nie jest spełniony, użyj najbliższego ciemniejszego lub jaśniejszego tekstu albo tła, które go spełnia, a następnie skopiuj nową wartość.
Limity i Pro
Za darmo i bez limitów: dowolna liczba sprawdzeń, 5 kryteriów WCAG 2.2 dla pary, 2 proponowane poprawki dla każdego niespełnionego poziomu i siatka do 7 kolorów.
O narzędziu: Kontrast kolorów
Ten sprawdzacz kontrastu mierzy, jak bardzo dwa kolory różnią się jasnością, według wzoru na luminancję względną z WCAG 2.2. Tego samego wyliczenia używają audyty dostępności w przeglądarkach i wtyczki dla projektantów. Wynikiem jest współczynnik od 1:1 (kolory identyczne) do 21:1 (czerń na bieli). Kryterium sukcesu 1.4.3 wymaga na poziomie AA współczynnika 4,5:1 dla tekstu podstawowego i 3:1 dla dużego tekstu; kryterium 1.4.6 podnosi te wartości do 7:1 i 4,5:1 dla poziomu AAA; kryterium 1.4.11 wymaga 3:1 dla istotnych elementów nietekstowych, takich jak obwódki fokusu, ramki pól formularzy i linie na wykresach.
Żywy podgląd pokazuje w Twoich kolorach tekst w obu rozmiarach, przycisk z obramowaniem i ikonę, więc możesz ocenić czytelność, a nie tylko liczbę. Współczynniki są obcinane do dwóch miejsc po przecinku, a nie zaokrąglane, ponieważ para o kontraście 4,496:1 nie spełnia wymogu 4,5:1. Gdy poziom nie jest spełniony, narzędzie przeszukuje jasność jednego z kolorów w przestrzeni OKLCH, zachowując odcień i nasycenie, i proponuje najbliższą wartość, która spełnia wymóg – osobno dla tekstu i dla tła.
Narzędzie działa dla jednolitych kolorów. Nie oceni tekstu na zdjęciach ani gradientach, przezroczystości, renderowania grubości czcionki na konkretnym ekranie ani nowszej metody APCA proponowanej w WCAG 3. Traktuj więc zaliczenie jako minimum i testuj także na prawdziwych ekranach.
Prywatność
Oba kolory zostają w tej karcie: współczynnik, sprawdzenia i proponowane poprawki oblicza Twoja przeglądarka. Żadne wartości kolorów nie są wysyłane na serwer ani zapisywane.