Sprawdzacz kontrastu kolorów

Jak korzystać ze sprawdzacza kontrastu kolorów

1. 1. Wpisz oba kolory. Każdy wpisz w formacie HEX (#777777), jako rgb(), hsl() lub nazwę CSS, albo wybierz w pickerze. Zamień wymienia je miejscami, co jest wygodne przy sprawdzaniu wersji jasnej na ciemnym tle i odwrotnie.
2. 2. Odczytaj współczynnik i tabelę. Współczynnik waha się od 1:1 (identyczne kolory) do 21:1 (czerń na bieli). Tabela porównuje go z każdym wymogiem WCAG i pisze słowami Spełnia albo Nie spełnia, a nie tylko kolorem.
3. 3. Określ rozmiar. Duży tekst ma niższe wymagania. Podgląd pokazuje zwykły tekst, duży tekst, pogrubiony duży tekst oraz obramowaną kontrolkę, dzięki czemu możesz ocenić własny przypadek.
4. 4. Napraw parę, która nie spełnia wymogów. Wybierz poziom, do którego dążysz, i użyj sugerowanego koloru tekstu lub tła. Narzędzie zachowuje odcień i zmienia tylko jasność, o najmniejszy krok, który spełnia wymóg.

Czego wymaga WCAG 2.2

Wytyczne dostępności treści internetowych (WCAG) 2.2 określają minimalne współczynniki kontrastu w trzech kryteriach sukcesu. Współczynnik to (L₁ + 0,05) ÷ (L₂ + 0,05), gdzie L₁ to względna luminancja jaśniejszego koloru, a L₂ ciemniejszego.

Duży tekst to co najmniej 18 punktów albo 14 punktów pogrubionych — 24 px i około 18,7 px na ekranie przy 96 dpi. Logotypy, tekst czysto dekoracyjny i nieaktywne kontrolki są wyłączone z 1.4.3. Reguła 3:1 z 1.4.11 obejmuje części kontrolki potrzebne do jej odnalezienia (obramowanie przycisku, kontur pola wyboru), jej stany, na przykład fokus, oraz grafikę niezbędną do zrozumienia treści, na przykład linie na wykresie.

Jak liczony jest współczynnik

Każdy kanał sRGB sprowadza się do zakresu 0–1 i linearyzuje: c ÷ 12,92, jeśli c ≤ 0,04045, w przeciwnym razie ((c + 0,055) ÷ 1,055)^2,4. Względna luminancja wynosi wtedy 0,2126 R + 0,7152 G + 0,0722 B. Zielony liczy się najbardziej, bo oko jest na niego najbardziej czułe.

WCAG nie zaokrągla: wynik 4,4999 nie spełnia progu 4,5. Dlatego sprawdzacz pokazuje współczynnik zaokrąglony w dół do dwóch miejsc po przecinku, tak aby wynik tuż poniżej progu nigdy nie wyglądał na spełniający wymóg.

Sprawdzanie slajdów, plakatów i rysunków

• Slajdy i plakaty nie są stronami internetowymi, ale współczynniki WCAG są przyjętą miarą także dla nich. Tekst główny na slajdzie jest zwykle duży (24 px to 18 pt); podpisy, przypisy i etykiety osi nie są, więc sprawdzaj je jak zwykły tekst.
• Celuj powyżej minimum przy projekcji. Projektor w oświetlonej sali obniża kontrast dla wszystkich. Wybierz AAA (7:1) dla tekstu na slajdzie, który będziesz pokazywać w jasnym pomieszczeniu.
• Tekst na zdjęciu lub gradiencie nie ma jednego tła. Sprawdź najjaśniejsze i najciemniejsze obszary za tekstem albo umieść tekst na jednolitym panelu.
• Wykresy i rysunki podlegają 1.4.11: linie, słupki i znaczniki potrzebują 3:1 względem tła. Sam kolor nie powinien przenosić znaczenia — zobacz Symulator daltonizmu.
• Kolory półprzezroczyste są spłaszczane przed pomiarem: tło nakłada się na biel, a tekst na tło. Strona, na której za kolorem jest coś innego, wymaga wpisania tego koloru bezpośrednio.

Uwaga o APCA

Accessible Perceptual Contrast Algorithm (APCA) to kandydująca metoda w roboczej wersji WCAG 3, która uwzględnia rozmiar, grubość i polaryzację tekstu (jasny na ciemnym czy odwrotnie). To projekt, a nie wymóg, i żadne prawo ani norma nie wymaga jej obecnie. Współczynniki WCAG 2.x — te, które liczy to narzędzie — pozostają podstawą deklaracji zgodności.

Najczęstsze pytania

Jaki współczynnik kontrastu jest dobry?

4,5:1 lub więcej dla zwykłego tekstu spełnia WCAG AA, a 7:1 spełnia AAA. Duży tekst wymaga 3:1 dla AA i 4,5:1 dla AAA. Czerń na bieli to maksimum, 21:1. Wszystko poniżej 3:1 jest trudne do czytania dla wielu osób, nawet z dobrym wzrokiem.

Co WCAG uznaje za duży tekst?

Tekst o rozmiarze co najmniej 18 punktów (24 px) w zwykłej grubości albo co najmniej 14 punktów (około 18,7 px) pogrubiony. Rozmiar mierzy się tak, jak jest wyświetlany, więc czcionka na slajdzie, która na wydruku wygląda mało, po rzutowaniu może być duża.

Czy wymóg kontrastu dotyczy ikon i linii wykresu?

Tak, przez kryterium sukcesu 1.4.11 Kontrast elementów niebędących tekstem: elementy interfejsu i grafika potrzebne do zrozumienia treści muszą mieć co najmniej 3:1 względem sąsiednich kolorów. Grafika dekoracyjna i nieaktywne elementy są wyłączone.

Dlaczego mój kolor pokazuje 4,49, skoro współczynnik jest blisko 4,5?

Ponieważ WCAG porównuje dokładny współczynnik i nie przyznaje punktów za zaokrąglenie. Para o współczynniku 4,4999:1 nie spełnia wymogu 4,5:1, więc narzędzie pokazuje wartość zaokrągloną w dół do dwóch miejsc, a nie 4,50.

Jak działają sugerowane kolory?

Narzędzie zachowuje odcień i nasycenie twojego koloru i przesuwa jego jasność HSL w górę lub w dół małymi krokami, zwracając najbliższą wartość, która osiąga docelowy współczynnik, jako 8-bitowy kod HEX. Jeśli żadna jasność nie osiąga celu — na przykład 7:1 względem średniej szarości — narzędzie to mówi i sugeruje zmianę drugiego koloru.

Czy APCA jest lepsze od współczynnika WCAG?

APCA lepiej modeluje percepcję, zwłaszcza w trybie ciemnym i przy cienkim tekście, ale jest częścią projektu (WCAG 3), a nie przyjętym wymogiem. Przepisy o dostępności i normy zamówień publicznych powołujące się na WCAG 2.x używają współczynnika obliczanego tutaj.