Kontroler kontrastu kolorów
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
Kontrole są uruchamiane na naszym serwerze; pobieramy podany adres URL i nie przechowujemy wyników. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Anonimowe liczniki wyników poszczególnych uruchomień mogą być wykorzystywane do badań zbiorczych; adresy URL, domeny, adresy IP i identyfikatory nigdy nie są uwzględniane, a statystyki nie są publikowane poniżej 100 uruchomień.
Działa w całości w Twojej przeglądarce — nic, co wklejasz, nie jest przesyłane ani zapisywane. Anonimowe liczniki wyników poszczególnych uruchomień mogą być wykorzystywane do badań zbiorczych; adresy URL, domeny, adresy IP i identyfikatory nigdy nie są uwzględniane, a statystyki nie są publikowane poniżej 100 uruchomień.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Paszport witryny Kontekst lokalny tej zapisanej witryny
Dane lokalne
Zapisane cele, nazwane listy i podsumowania ostatnich kontroli pozostają tylko w tej przeglądarce.
Oceń to narzędzie
O tym narzędziu
Sprawdź kontrast kolorów według WCAG 2.2, znajdź najbliższe przechodzące kolory pierwszoplanowe i skontroluj tokeny kolorów CSS bez opuszczania przeglądarki.
Funkcje
- Dokładne obliczenie współczynnika kontrastu dla wpisanej pary kolorów.
- Kontrola tokenów CSS, właściwości niestandardowych i luźnej listy kolorów hex.
- Tryb adresu URL analizujący przez axe-core rzeczywiście obliczone style po kaskadzie, dziedziczeniu i przezroczystości.
- Najbliższe praktyczne zamienniki hex spełniające wymagania AA lub AAA.
Jak to działa
Dla wklejonych kolorów narzędzie oblicza kontrast matematycznie. W trybie URL przeglądarka bez interfejsu ładuje stronę i uruchamia regułę color-contrast biblioteki axe-core na rozstrzygniętych stylach. WCAG AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów UI, a AAA odpowiednio 7:1 i 4.5:1.
Ograniczenia
- Kontrola nie dowodzi dostępności całej strony i nie obejmuje typografii, stanów fokusu ani obrazów tekstu.
- Tryb wklejania nie zna rzeczywistego renderowanego tła, dlatego gotowy interfejs nadal wymaga testów.
- Tylko tryb URL wysyła na serwer publiczny adres strony; wklejone kolory pozostają w przeglądarce.
Częste pytania
Jakiego współczynnika kontrastu potrzebuję?
WCAG AA wymaga 4,5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu i nietekstowych elementów interfejsu. WCAG AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu.
Czy to dowodzi, że moja strona jest dostępna?
Nie. Narzędzie sprawdza pary kolorów, a nie typografię, stany fokusu, obrazy tekstu ani, w trybie wklejania, rzeczywiste wyrenderowane tła. Traktuj je jako kontrolę na etapie projektowania i przetestuj również gotowy interfejs.
Co dzieje się z moją paletą?
W trybie wklejania pozostaje w przeglądarce. Możesz wkleić właściwości niestandardowe CSS, tokeny nazwa/wartość w stylu Tailwind albo luźną listę kolorów szesnastkowych. Tylko tryb URL wysyła coś na serwer, i jest to podany publiczny adres strony, nie paleta.
Czym tryb URL różni się od wklejania kolorów?
Wklejone kolory dają dokładne obliczenia dla wpisanej pary. Tryb URL wczytuje rzeczywistą stronę w przeglądarce bez interfejsu z limitem użycia i odczytuje faktyczny obliczony kolor oraz tło każdego elementu po rozstrzygnięciu kaskady CSS, dziedziczenia, krycia i domyślnych ustawień przeglądarki. To jedyny sposób uzyskania prawdziwego werdyktu kontrastu dla aktywnej strony, ponieważ statyczne przypuszczenie na podstawie HTML może być błędne.
Typowe problemy i sposoby ich naprawy
- Błąd Para kolorów nie spełnia WCAG AA dla zwykłego tekstu Poprawka: Zmień kolor pierwszego planu lub tła, aż zwykły tekst osiągnie kontrast co najmniej 4,5:1, a następnie ponownie przetestuj stany najechania, fokusu, wyłączenia i odwiedzenia.
- Błąd Para kolorów nie spełnia WCAG AA dla dużego tekstu Poprawka: Zmieniaj parę kolorów, aż tekst o rozmiarze co najmniej 24px w zwykłej odmianie lub 18,66px w pogrubionej osiągnie kontrast 3:1.
- Ostrzeżenie Para kolorów nie spełnia WCAG AAA dla zwykłego tekstu Poprawka: Dostosuj parę kolorów, aż zwykły tekst osiągnie kontrast 7:1, gdy projekt wymaga poziomu AAA.
- Ostrzeżenie Para kolorów nie spełnia WCAG AAA dla dużego tekstu Poprawka: Dostosuj parę kolorów, aż kwalifikujący się duży tekst osiągnie kontrast 4,5:1, gdy wymagany jest poziom AAA.
- Ostrzeżenie Para kolorów nie spełnia wytycznych kontrastu elementów nietekstowych Poprawka: Zwiększ kontrast istotnych ikon, wskaźników fokusu, granic elementów sterujących i obiektów graficznych do co najmniej 3:1 względem sąsiednich kolorów.