Kontrast kolorów i WCAG: jaki jest wymóg i jak go zmierzyć?

Krótka odpowiedź. WCAG na poziomie AA wymaga współczynnika kontrastu co najmniej 4,5:1 między tekstem a tłem dla zwykłego tekstu oraz 3:1 dla dużego tekstu i elementów graficznych (ikony, obramowania pól formularzy). Zbyt niski kontrast to zdecydowanie najczęstszy błąd dostępności w sklepach internetowych — i na szczęście często da się go naprawić za jednym razem w całym motywie. Co więcej, da się go w 100% dokładnie zmierzyć programowo, więc nie ma o czym dyskutować.

Dlaczego kontrast jest tak ważny?

Jasnoszary tekst na białym tle wygląda elegancko na Twoim ekranie, ale jest trudny do odczytania dla osób słabowidzących, starszych odwiedzających i każdego, kto patrzy na telefon w ostrym słońcu. Spora część Twoich klientów należy do co najmniej jednej z tych grup. Słaby kontrast kosztuje Cię więc dosłownie czytelność — a tym samym sprzedaż.

Jakie są dokładne wymogi kontrastu WCAG?

Norma rozróżnia rozmiar tekstu i typ elementu. Im mniejsze litery, tym ostrzejszy musi być kontrast:

• Zwykły tekst (mniejszy niż 24px lub 18,66px pogrubiony): co najmniej 4,5:1.
• Duży tekst (od 24px lub 18,66px pogrubiony — czyli 18pt / 14pt bold): co najmniej 3:1.
• Komponenty graficzne (ikony, obramowania pól formularzy, obramowania aktywnych przycisków): co najmniej 3:1 względem sąsiadujących kolorów (WCAG 1.4.11).

Kontrast wyraża się jako współczynnik: 1:1 to brak kontrastu, 21:1 to czysta czerń na bieli. Kilka częstych kombinacji:

Jak samodzielnie zmierzyć kontrast?

Nie musisz zgadywać ani liczyć wzorów na piechotę. Są trzy wiarygodne sposoby:

1. Zautomatyzowany skan (zalecane). Narzędzia takie jak Seviranta obliczają wartość kontrastu każdego elementu tekstowego na stronie za jednym razem i wskazują dokładną linijkę kodu z naruszeniem — wraz ze zmierzoną wartością obok wymaganej.
2. Narzędzia deweloperskie przeglądarki. W Chrome lub Edge kliknij tekst prawym przyciskiem → „Zbadaj"; próbnik kolorów często od razu pokazuje współczynnik kontrastu i status WCAG.
3. Ręczny tester kontrastu. Wpisujesz dwa kody Hex i dostajesz współczynnik. Przydatne na etapie projektowania, ale czasochłonne dla całej działającej strony.

Jak skutecznie naprawić błędy kontrastu?

Piękno błędów kontrastu polega na tym, że niemal zawsze są sterowane centralnie. W Shopify, WooCommerce czy Magento kolory są powiązane z globalnymi zmiennymi w Twoim motywie. Przyciemnij lub rozjaśnij kolor tekstu albo tła o jeden ton, aż współczynnik się zgodzi, a spełnisz wymóg kontrastu za jednym razem w całym sklepie.

Zacznij od lejka konwersji: tekst na przyciskach „Dodaj do koszyka" i „Do kasy", etykiety cen, pozycje menu i ostrzeżenia przy składaniu zamówienia. Tam jest najwięcej do ugrania. To zresztą jeden z 10 najczęstszych błędów dostępności.

Dlaczego widget dostępności tego nie rozwiązuje?

Wielu przedsiębiorców liczy, że naprawi kontrast widgetem overlay i jego przyciskiem „wysoki kontrast". To technicznie i prawnie niewystarczające: organy nadzoru i scrapery AI sprawdzają stan domyślny Twojego kodu źródłowego. Jeśli Twój CSS nie spełnia 4,5:1, to nie spełniasz wymogu — tymczasowa warstwa JavaScriptu tego nie zmienia. Dlaczego widget overlay Cię nie chroni omawia to dokładniej. Jedyna trwała droga to zmiana kolorów we własnym motywie.

Co zmieni WCAG 3.0 (APCA)?

W nadchodzących wytycznych WCAG 3.0 obecna matematyczna formuła kontrastu zostanie zastąpiona przez APCA (Advanced Perceptual Contrast Algorithm). APCA lepiej odzwierciedla to, jak ludzkie oko naprawdę postrzega kontrast — uwzględnia krój pisma, grubość i kontekst, zamiast czystej jasności dwóch kolorów. Jeśli już teraz ustawisz stronę solidnie pod wymóg 4,5:1 z WCAG 2.1/2.2, będziesz dobrze przygotowany także na to przejście.

Zobacz, jak wypada Twoja strona

Ciekawi Cię, które kolory na Twojej stronie jeszcze nie spełniają wymogów? Zeskanuj bezpłatnie jedną stronę. Dla każdego miejsca zobaczysz zmierzony współczynnik kontrastu obok wymaganego, z prawdziwymi kolorami Twojej strony — w mniej niż 60 sekund, bez konta.