Sprawdzanie Kontrastu Kolorów
Sprawdź współczynnik kontrastu kolorów pod kątem dostępności WCAG. Testuj kolory pierwszego planu i tła.
The quick brown fox jumps over the lazy dog
Tekst główny w rozmiarze 16px – to właśnie będą czytać odwiedzający.
Wytyczne dostępności WCAG
AA Normal (4.5:1): Minimalny kontrast dla normalnego tekstu. Wymagany dla większości treści internetowych.
AA Large (3:1): Minimalny kontrast dla dużego tekstu (18pt+ lub 14pt+ pogrubiony).
AAA Normal (7:1): Wzmocniony kontrast dla normalnego tekstu. Najwyższy standard dostępności.
AAA Large (4.5:1): Wzmocniony kontrast dla dużego tekstu. Zalecany dla krytycznych treści.
Presety
Historia
Wytyczne dostępności WCAG
Sprawdzanie kontrastu kolorów pomaga upewnić się, że Twoja strona spełnia standardy dostępności WCAG.
Popularne narzędzia
O Sprawdzaniu Kontrastu Kolorów
Ustaw kolor tekstu i tła kodem HEX albo próbnikiem, a narzędzie poda współczynnik kontrastu według WCAG 2.1 wraz z oceną zaliczenia dla AA dla zwykłego tekstu (4.5:1), AA dla dużego tekstu (3:1), AAA dla zwykłego (7:1) i AAA dla dużego (4.5:1). Podgląd na żywo pokazuje parę kolorów w rozmiarze nagłówka i tekstu podstawowego, czyli dokładnie to, czego projektanci potrzebują przed zatwierdzeniem palety. Obliczenia luminancji względnej wykonują się w Twojej przeglądarce, a zapisane pary zostają w pamięci lokalnej.
Przypadki użycia
Jak używać
Ustaw kolor tekstu w polu Pierwszy plan — kliknij próbkę koloru albo wpisz w okienku obok wartość szesnastkową, na przykład #4f46e5.
W ten sam sposób ustaw kolor strony w polu Tło; duży podgląd Aa przemalowuje się natychmiast, a plakietka ze współczynnikiem w jego prawym górnym rogu się aktualizuje.
Przeczytaj cztery karty WCAG pod podglądem — AA Normal, AA Large, AAA Normal i AAA Large — każda pokazuje zielony ptaszek lub czerwony krzyżyk przy swoim progu.
Naciśnij strzałki zamiany między polami kolorów, aby sprawdzić odwrócone zestawienie, albo kliknij gotowy zestaw, taki jak White on Dark czy GitHub Dark, by wczytać sprawdzoną parę.
Naciśnij Kopiuj pod dużą wartością współczynnika, aby skopiować do schowka współczynnik i wszystkie cztery wyniki zaliczenia, albo naciśnij Zapisz, by zachować parę kolorów w pasku Historia.
Porady Pro
- Wklej treść bezpośrednio — Tester kontrastu kolorów rozpoznaje typowe wzorce danych wejściowych i automatycznie dobiera sensowne ustawienia.
- Korzystaj ze skrótów klawiszowych (Ctrl/Cmd+A zaznacza wszystko, Ctrl/Cmd+C kopiuje), aby przyspieszyć pracę w narzędziu Tester kontrastu kolorów.
- Bardzo duże dane dziel na mniejsze części — karta przeglądarki poradzi sobie z megabajtami tekstu, ale przetwarzanie ogromnych porcji danych może na chwilę zablokować interfejs.
- Tester kontrastu kolorów nie rejestruje ani nie przechowuje wprowadzonych danych. Jeśli potrzebujesz historii, skopiuj ważne wyniki do pliku na dysku lub do aplikacji z notatkami.
- Łącz Tester kontrastu kolorów z innymi narzędziami w tym serwisie (formatery, konwertery, kodery), aby budować kompletne procesy przetwarzania danych bez opuszczania przeglądarki.
Często zadawane pytania
Tak, jest w pełni bezpłatny — bez rejestracji, bez klucza API, bez znaków wodnych i bez limitów użycia.
Nie. Tester kontrastu kolorów działa w całości po stronie klienta, w Twojej przeglądarce. Wprowadzone dane nigdy nie trafiają na nasze serwery.
Nie ma sztywnego limitu, ale przy danych większych niż kilka megabajtów licz się ze spowolnieniem — zależy to od ilości pamięci w Twoim urządzeniu.
Tak. Wyniki uzyskane w narzędziu Tester kontrastu kolorów należą do Ciebie i możesz ich swobodnie używać w dowolnym projekcie prywatnym lub komercyjnym.
Większość logiki działa w JavaScripcie po stronie przeglądarki, więc po pierwszym załadowaniu strony zwykle możesz pracować dalej bez połączenia z internetem.
Żadne. Ponieważ Tester kontrastu kolorów działa w Twojej przeglądarce, możesz przetworzyć tyle danych, na ile pozwoli Twój sprzęt — bez kluczy API i bez ograniczeń.