Sprawdzanie kontrastu kolorów

Czym jest Sprawdzanie kontrastu kolorów?

Sprawdzanie kontrastu kolorów to darmowe narzędzie online do kontrastu WCAG i APCA dla projektantów, programistów i testerów dostępności. Przyjmuje kolory jako HEX (#rgb, #rrggbb oraz 8-cyfrowy #rrggbbaa z alfą), rgb()/rgba() i hsl()/hsla(), komponuje półprzezroczysty pierwszy plan na tle przed pomiarem i podaje zarówno współczynnik WCAG 2.1 (od 1:1 do 21:1), jak i wynik kontrastu jasności APCA Lc. Oznacza poziom AA WCAG 2.1 (4.5:1 normalny, 3:1 duży) i AAA (7:1 normalny, 4.5:1 duży), dodaje plakietkę 3:1 dla nietekstowych komponentów interfejsu i grafiki oraz może zaproponować najbliższy zaliczony pierwszy plan — zmieniając tylko jego jasność do spełnienia AA lub AAA — który stosujesz jednym kliknięciem.

Jak używać Sprawdzanie kontrastu kolorów

1. Wpisz kolor pierwszego planu (tekstu) jako HEX, rgb() lub hsl() — akceptowany jest 8-cyfrowy HEX lub rgba z alfą — albo kliknij próbnik kolorów, aby wybrać go wizualnie.
2. Wpisz kolor tła w ten sam sposób; przed pomiarem kontrastu półprzezroczysty pierwszy plan jest komponowany na nim (a tło na bieli).
3. Użyj przycisku Zamień, aby w każdej chwili odwrócić pierwszy plan i tło.
4. Odczytaj współczynnik kontrastu WCAG 2.1 i wynik APCA Lc pokazany tuż obok.
5. Sprawdź plakietki AA i AAA dla tekstu normalnego i dużego oraz plakietkę 3:1 dla komponentów interfejsu i grafiki.
6. Jeśli para nie zalicza, spójrz na najbliższy zaliczony kolor AA lub AAA i kliknij Zastosuj, aby zaktualizować pierwszy plan.

Przykłady

Pierwszy plan #595959, Tło #ffffff

Współczynnik 7.00:1 z wysokim APCA Lc — zalicza AA i AAA dla tekstu normalnego i dużego

Pierwszy plan #00000080 (50% czerni) na #ffffff

Najpierw komponowany do jednolitej szarości, potem obliczane są współczynnik WCAG i APCA Lc

Pierwszy plan #999999 na #ffffff — 2.85:1, nie zalicza AA

Otwórz najbliższy kolor AA i kliknij Zastosuj, aby osiągnąć 4.5:1 z zachowaniem tej samej barwy

Najczęściej zadawane pytania

Jakich współczynników kontrastu wymaga WCAG?

Poziom AA WCAG 2.1 wymaga co najmniej 4.5:1 dla tekstu normalnego i 3:1 dla dużego; poziom AAA wymaga 7:1 i 4.5:1. Nietekstowe komponenty interfejsu i obiekty graficzne (SC 1.4.11) wymagają 3:1. To narzędzie pokazuje plakietkę zaliczenia/niezaliczenia dla każdego z tych progów.

Czym jest wynik APCA Lc?

APCA (Accessible Perceptual Contrast Algorithm) to metoda kontrastu proponowana dla WCAG 3. Podaje wartość kontrastu jasności (Lc) od około 0 do 108, gdzie wyższa oznacza większy kontrast, i uwzględnia polaryzację (ciemny na jasnym kontra jasny na ciemnym). Jest pokazywana obok współczynnika WCAG 2.1 i używa własnych poziomów wskazówek zamiast jednego zaliczono/niezaliczono.

Jak działa sugestia najbliższego zaliczonego koloru?

Zachowuje barwę i nasycenie pierwszego planu, a zmienia tylko jego jasność — jaśniej lub ciemniej — aż kontrast względem tła osiągnie AA (4.5:1) lub AAA (7:1); następnie możesz go zastosować jednym kliknięciem. Jeśli tło ma ton średni i cel jest nieosiągalny, pokazuje zamiast tego najbliższy możliwy kolor.

Jakie formaty kolorów mogę wpisać?

HEX (#rgb, #rrggbb oraz #rgba i 8-cyfrowy #rrggbbaa z alfą), rgb()/rgba() i hsl()/hsla(), z natywnym próbnikiem kolorów dla każdego pola. Przed obliczeniem współczynnika półprzezroczysty pierwszy plan jest komponowany na tle — które samo jest najpierw spłaszczane na bieli. Kolory nazwane nie są obsługiwane.

Czy moje kolory są wysyłane na serwer?

Nie. Całe parsowanie, komponowanie oraz obliczenia luminancji, współczynnika i APCA działają w całości w Twojej przeglądarce w JavaScript — żadne kolory nie są przesyłane i nic nie jest wysyłane na serwer, więc działa prywatnie, a po załadowaniu strony nawet offline.