Kontrola kontrastu palety kolorów
Porównaj każdą parę kolorów w palecie z progami kontrastu tekstu WCAG.
Wypróbuj przykład z objaśnieniem
Wypróbuj przykład z objaśnieniem
Porównaj każdą parę kolorów w palecie z progami kontrastu tekstu WCAG.
Sprawdź jednostki i opcje, a następnie użyj przycisku obliczania. Przykład jest fikcyjny; zastąp wartości własnymi danymi.
Przykładowy tekst
- undefined
- #000000 #ffffff #2563eb
Oczekiwany wynik
| Kolor 1 · #000000 | Kolor 2 · #ffffff | Kolor 3 · #2563eb Kolor 1 · #000000 | — | 21,00:1 · AA zwykły tekst ✓ · AAA zwykły tekst ✓ · AA duży tekst ✓ · AAA duży tekst ✓ | 4,06:1 · AA zwykły tekst × · AAA zwykły tekst × · AA duży tekst ✓ · AAA duży tekst × Kolor 2 · #ffffff | 21,00:1 · AA zwykły tekst ✓ · AAA zwykły tekst ✓ · AA duży tekst ✓ · AAA duży tekst ✓ | — | 5,17:1 · AA zwykły tekst ✓ · AAA zwykły tekst × · AA duży tekst ✓ · AAA duży tekst ✓ Kolor 3 · #2563eb | 4,06:1 · AA zwykły tekst × · AAA zwykły tekst × · AA duży tekst ✓ · AAA duży tekst × | 5,17:1 · AA zwykły tekst ✓ · AAA zwykły tekst × · AA duży tekst ✓ · AAA duży tekst ✓ | —
Porównaj każdą parę z palety nieprzezroczystych kolorów HEX i zobacz wyniki kontrastu WCAG AA i AAA dla zwykłego i dużego tekstu.
Oczekiwanie na narzędzie. Objaśnienie jest dostępne również bez JavaScript.
Metoda i ograniczenia
Wprowadź po jednym nieprzezroczystym kolorze HEX w wierszu. Macierz porównuje każdą parę kolorów. Komórka podaje współczynnik i informację, czy osiąga WCAG AA (4,5:1) lub AAA (7:1) dla zwykłego tekstu; progi dla dużego tekstu to odpowiednio 3:1 i 4,5:1. Komórki na przekątnej porównują kolor z nim samym.
Wpisz od 2 do 20 nieprzezroczystych kolorów HEX o 3 lub 6 cyfrach. To wyłącznie obliczenie kontrastu tekstu; nie ocenia rozmiaru czcionki, elementów interfejsu, obrazów ani ogólnej dostępności.
Udostępnij narzędzie
Udostępniany jest wyłącznie publiczny link do narzędzia. Twoje dane wejściowe i wyniki pozostają tutaj.
Pokaż link do ręcznego skopiowania
Krótka odpowiedź
Porównaj każdą parę z palety nieprzezroczystych kolorów HEX i zobacz wyniki kontrastu WCAG AA i AAA dla zwykłego i dużego tekstu.
Strona i jej zasoby są pobierane z witryny; ta operacja wykorzystuje wpisane wartości wyłącznie w tej przeglądarce i nie wysyła ich do punktu obliczeniowego.
Jak używać
Wprowadź po jednym nieprzezroczystym kolorze HEX w wierszu. Macierz porównuje każdą parę kolorów. Komórka podaje współczynnik i informację, czy osiąga WCAG AA (4,5:1) lub AAA (7:1) dla zwykłego tekstu; progi dla dużego tekstu to odpowiednio 3:1 i 4,5:1. Komórki na przekątnej porównują kolor z nim samym.
Ograniczenia
Wpisz od 2 do 20 nieprzezroczystych kolorów HEX o 3 lub 6 cyfrach. To wyłącznie obliczenie kontrastu tekstu; nie ocenia rozmiaru czcionki, elementów interfejsu, obrazów ani ogólnej dostępności.
Najczęstsze pytania
Co oznacza współczynnik kontrastu?
Porównuje względną luminancję dwóch kolorów. Wyższy współczynnik poprawia kontrast tekstu, ale sam w sobie nie potwierdza dostępności strony.
Czy narzędzie wykrywa duży tekst?
Nie. Pokazuje progi AA i AAA dla zwykłego oraz dużego tekstu. Korzystaj z wyników dla dużego tekstu tylko wtedy, gdy rozmiar i grubość czcionki spełniają definicję dużego tekstu WCAG.
Źródła i odniesienia
Te źródła dokumentują wskazaną normę lub API przeglądarki; nie potwierdzają poprawności wyników narzędzia.