Sprawdzanie kontrastu kolorów

Czym jest Sprawdzanie kontrastu kolorów?

Sprawdzanie kontrastu kolorów to darmowe narzędzie online do obliczania współczynnika kontrastu WCAG dla projektantów, programistów i testerów dostępności. Przyjmuje kolor pierwszego planu (tekstu) i kolor tła, oblicza względną luminancję każdego z nich i podaje współczynnik kontrastu jako wartość od 1:1 do 21:1. Następnie informuje, czy ten współczynnik spełnia poziom AA WCAG 2.1 (4.5:1 normalny, 3:1 duży) i poziom AAA (7:1 normalny, 4.5:1 duży), oraz renderuje oba kolory jako podgląd na żywo z przykładowym tekstem, abyś mógł ocenić czytelność na pierwszy rzut oka. Użyj go, aby przed publikacją projektu sprawdzić, czy tekst główny, przyciski, linki i etykiety są czytelne.

Jak używać Sprawdzanie kontrastu kolorów

1. Wpisz lub wklej kolor pierwszego planu (tekstu) jako wartość HEX albo kliknij natywny próbnik kolorów, aby wybrać go wizualnie.
2. Zrób to samo dla koloru tła, na którym znajduje się tekst.
3. Odczytaj wynik współczynnika kontrastu, pokazany jako wartość typu 4.5:1 (1:1 to identyczne kolory, 21:1 to czysta czerń na bieli).
4. Sprawdź plakietki AA i AAA dla tekstu normalnego i dla tekstu dużego (18pt / 14pt pogrubiony i więcej), aby zobaczyć, które poziomy są zaliczone.
5. Spójrz na podgląd z przykładowym tekstem wyrenderowany Twoimi dwoma kolorami, aby potwierdzić, że tekst jest wygodnie czytelny.
6. Dostosuj jeden z kolorów, aż osiągniesz poziom kontrastu, którego potrzebuje Twój projekt.

Przykłady

Pierwszy plan #595959, Tło #ffffff

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

Pierwszy plan #999999, Tło #ffffff

Współczynnik 2.85:1 — nie zalicza AA normalnego ani AAA, nie spełnia niczego wymaganego dla tekstu głównego

Pierwszy plan #767676, Tło #ffffff

Współczynnik 4.54:1 — zalicza AA normalny i AA duży, ale nie zalicza AAA normalnego

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 tekstu dużego. Poziom AAA jest bardziej rygorystyczny: 7:1 dla tekstu normalnego i 4.5:1 dla tekstu dużego. To narzędzie pokazuje plakietkę zaliczenia/niezaliczenia dla każdego z tych czterech progów.

Co liczy się jako duży tekst?

WCAG definiuje duży tekst jako 18pt (około 24px) i więcej lub 14pt (około 18.66px) i więcej, gdy jest pogrubiony. Duży tekst ma niższy wymóg kontrastu, ponieważ większe znaki są łatwiejsze do odczytania, dlatego plakietki dużego tekstu mogą być zaliczone, gdy te dla tekstu normalnego nie są.

Jak obliczany jest współczynnik kontrastu?

Używa oficjalnej formuły WCAG: względna luminancja każdego koloru jest obliczana z jego zlinearyzowanych kanałów sRGB, a współczynnik to (jaśniejszy + 0.05) / (ciemniejszy + 0.05). Wynik mieści się w zakresie od 1:1 (identyczne kolory) do 21:1 (czerń na bieli).

Czy obsługuje alfę, RGB lub kolory nazwane?

Dane wejściowe to wyłącznie HEX (skrót #rgb lub #rrggbb), z natywnym próbnikiem kolorów dla każdego pola. Nie uwzględnia alfy/krycia ani częściowej przezroczystości — najpierw połącz półprzezroczyste warstwy w jednolity kolor, a następnie go sprawdź.

Czy moje kolory są wysyłane na serwer?

Nie. Obliczenia luminancji i współczynnika 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.