Sprawdzanie kontrastu WCAG

Sprawdzanie kontrastu WCAG – AA i AAA dla dostępności

Kontrast kolorów to kluczowy wymóg dostępności (WCAG). Niski kontrast sprawia, że tekst jest nieczytelny dla osób z niedowidzeniem, daltonizmem lub czytaniem w słonecznym świetle. Narzędzie sprawdza parę kolor tekstu / kolor tła i ocenia zgodność z WCAG 2.1.

Jak narzędzie liczy kontrast – wzór WCAG krok po kroku

Narzędzie przyjmuje dwa kolory: tekstu i tła. Niezależnie od formatu wejściowego (HEX, RGB czy HSL) sprowadza je najpierw do trzech kanałów w zakresie 0–255, a potem dzieli każdy przez 255, otrzymując wartości z przedziału 0–1. Dzięki temu ten sam wzór działa dla zapisu #999999, rgb(153,153,153) i hsl(0, 0%, 60%). Porównanie jest symetryczne – nie ma znaczenia, który kolor wskażesz jako tekst, a który jako tło.

Każdy kanał jest następnie linearyzowany, bo oko reaguje na jasność nieliniowo. Jeśli wartość kanału jest mniejsza lub równa 0,03928, dzieli się ją przez 12,92; w przeciwnym razie stosuje się wzór ((c + 0,055) / 1,055) podniesione do potęgi 2,4. Z trzech składowych powstaje luminancja względna: L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Zielony waży najwięcej, niebieski najmniej, dlatego żółty ma tak wysoką luminancję, a nasycony niebieski tak niską.

Sam kontrast to iloraz: (L jaśniejszego koloru + 0,05) / (L ciemniejszego koloru + 0,05). Stała 0,05 zapobiega dzieleniu przez zero i odpowiada za to, że wynik mieści się w przedziale od 1:1 dla identycznych barw do 21:1 dla czerni i bieli. Narzędzie zestawia otrzymaną wartość z progami WCAG 2.1: AA wymaga 4,5:1 dla tekstu normalnego i 3:1 dla dużego, AAA odpowiednio 7:1 i 4,5:1. Kanał alfa nie jest uwzględniany – kolory trzeba podać już złożone z tłem.

Przykład krok po kroku: szary #999999 na białym tle

1. Ustalamy parę: kolor tekstu #999999, kolor tła #FFFFFF. To klasyczna sytuacja – szary tekst na białej karcie.
2. Rozbijamy HEX na kanały. 99 szesnastkowo to 153 dziesiętnie, więc R = G = B = 153. Po podzieleniu przez 255 każdy kanał wynosi 0,6.
3. Linearyzujemy kanał: (0,6 + 0,055) / 1,055 = 0,6209, a następnie 0,6209 do potęgi 2,4 = 0,3186.
4. Liczymy luminancję względną: 0,2126 * 0,3186 + 0,7152 * 0,3186 + 0,0722 * 0,3186. Współczynniki sumują się do 1, a kanały są równe, więc L = 0,3186.
5. Luminancja bieli wynosi 1,0. Podstawiamy do wzoru: (1,0 + 0,05) / (0,3186 + 0,05) = 1,05 / 0,3686 = 2,85.
6. Wynik 2,85:1 jest poniżej progu 4,5:1, więc tekst normalny nie przechodzi poziomu AA i trzeba przyciemnić szary. Dla porównania biały tekst na tle #767676 daje 4,48:1, czyli wciąż minimalnie za mało dla tekstu normalnego.

Zestawienie typowych par i ich ocena

Praktyczne wskazówki przy pracy z kontrastem

• Testuj paletę hurtowo, nie ekran po ekranie – jeśli kolory są zdefiniowane jako tokeny, przejrzyj każdy kolor tekstu w zestawieniu z każdym tłem, na którym faktycznie występuje. Pojedynczy sprawdzony przycisk nie gwarantuje, że ten sam odcień zadziała w komunikacie błędu.
• Pamiętaj o stanach interakcji – link domyślny, hover, focus, aktywny przycisk i tekst na przycisku to osobne pary kolorów. Najczęściej to właśnie stan hover wypada najsłabiej, bo rozjaśnia kolor bazowy.
• Traktuj duży tekst jako wyjątek, nie regułę – niższy próg 3:1 dla poziomu AA dotyczy naprawdę dużych nagłówków. Gdy w responsywnym layoucie czcionka zmniejszy się poniżej progu, wymaganie wraca do 4,5:1.
• Nie zostawiaj koloru jako jedynego wyróżnika – wysoki kontrast nie zastąpi informacji przekazywanej wyłącznie barwą. Link bez podkreślenia czy pole oznaczone tylko czerwienią wymagają dodatkowego sygnału: podkreślenia, ikony, pogrubienia.
• Sprawdzaj realne tło, a nie deklarowany kolor – tekst często leży na półprzezroczystej nakładce, karcie z cieniem albo gradiencie. Policz kolor wynikowy lub sprawdź skrajne punkty gradientu, bo środek może wypaść lepiej niż brzeg.

Czego narzędzie nie sprawdza

• Tylko jedna para kolorów naraz – gradient, zdjęcie w tle, cień i nakładka z przezroczystością nie są analizowane. Kanał alfa jest ignorowany, więc półprzezroczysty tekst trzeba najpierw złożyć z kolorem pod nim.
• Rzeczywistego renderowania czcionki – wynik liczony jest z surowych wartości sRGB. Antyaliasing, grubość kroju, rozstrzelenie i skalowanie systemowe zmieniają to, co ostatecznie widzi użytkownik.
• Pozostałych wymagań WCAG – kontrast to jedno z kryteriów sukcesu. Narzędzie nie oceni semantyki, kolejności nagłówków, obsługi klawiatury, tekstów alternatywnych ani widoczności fokusu.
• Właściwego progu za Ciebie – czy tekst jest normalny, czy duży, a także czy wymagany jest poziom AA czy AAA, zależy od projektu i przepisów, a nie od samych wartości kolorów.

Najczęstsze pytania

Powiązane narzedzia: konwerter HEX na HSL, tester schematow kolorow i generator triadycznych schematow.