Sprawdzanie kontrastu kolorów
Wprowadź dwa kolory i od razu zobacz współczynnik kontrastu WCAG z wytycznymi AA i AAA.
Wprowadź kolory pierwszego planu i tła w hex lub RGB, aby natychmiast obliczyć współczynnik kontrastu WCAG, zobaczyć wyniki AA/AAA, podgląd tekstu i opcjonalne sugestie korekty.
Jak korzystać z tego sprawdzania kontrastu kolorów
Wpisz lub wklej kolor pierwszego planu i tła. Narzędzie normalizuje poprawne dane do hex wielkimi literami, natychmiast oblicza współczynnik kontrastu WCAG i pokazuje zaliczony/niezaliczony dla progów AA i AAA. Użyj Zaproponuj poprawkę, udostępnij przez URL lub zresetuj.
Progi współczynnika kontrastu WCAG
WCAG 2.x wymaga co najmniej 4,5:1 dla normalnego tekstu (AA), 3:1 dla dużego (AA), 7:1 dla normalnego (AAA) i 4,5:1 dla dużego (AAA). To narzędzie zawsze pokazuje wszystkie cztery wyniki.
Obsługiwane formaty kolorów
Wprowadź #RGB, #RRGGBB, rgb(r,g,b) lub r,g,b oddzielone przecinkami. Kanały muszą być liczbami całkowitymi 0–255. Przezroczystość alfa, 8-cyfrowy hex, HSL/HSLA i nazwane kolory CSS nie są obsługiwane w v1.
Co oznaczają zaliczony i niezaliczony
Zaliczony oznacza, że obliczony współczynnik spełnia lub przekracza próg dla poziomu. Niezaliczony oznacza przeciwnie. Etykiety i ikony towarzyszą kolorowi, aby wyniki były zrozumiałe nie tylko przez kolor.
Często Zadawane Pytania
Dlaczego alfa i gradienty nie są obsługiwane?
Wersja 1 ocenia tylko w pełni nieprzezroczyste kolory sRGB. Mieszanie alfa i gradienty wymagają reguł kompozycji, których to narzędzie jeszcze nie modeluje; rgba(), 8-cyfrowy hex i analiza gradientów są poza MVP.
Jak obliczany jest współczynnik kontrastu?
Sprawdzarka używa wzoru względnej luminancji WCAG dla nieprzezroczystego sRGB: linearyzacja kanałów, obliczenie luminancji, następnie (jaśniejszy + 0,05) / (ciemniejszy + 0,05). Wyświetlane wartości zaokrąglone do dwóch miejsc; progi używają pełnej wartości.
Co robi Zaproponuj poprawkę?
Deterministycznie przesuwa wybrany kolor pierwszego planu lub tła wzdłuż ścieżki jasności w kierunku czerni lub bieli, aż osiągnie wybrany poziom WCAG, zwracając najbliższy zgodny hex i wynikowy współczynnik, jeśli istnieje.
Czy mogę udostępnić konkretną parę kolorów?
Tak. Poprawne wartości pierwszego planu, tła i rozmiaru tekstu synchronizują się z parametrami URL (np. ?fg=000000&bg=FFFFFF&size=normal), aby linkować bezpośrednio do wyniku.
Czy strona zapisuje moje kolory?
Obliczenia działają wyłącznie w przeglądarce. Ostatnia poprawna para może być zapisana w localStorage na urządzeniu; Resetuj czyści wpisy, parametry URL i zapisany stan.