Kontrast kolorów a dostępność: progi WCAG, testy i poprawki

Jasnoszary tekst na białym tle wygląda w projekcie elegancko. Na telefonie w pełnym słońcu albo dla osoby słabowidzącej czyta się go z trudem. To także najczęstszy błąd dostępności w ogóle: WebAIM Million 2026 (otwiera się w nowej karcie) wykrył tekst o niskim kontraście na 83,9% z miliona najpopularniejszych stron głównych, średnio w 34 miejscach na stronę.

Dobra wiadomość jest taka, że kontrast da się zmierzyć, progi są jasne, a poprawki przeważnie tanie. Ten przewodnik podaje liczby, bezpłatne narzędzia i sposób na poprawienie kolorów marki bez zaczynania od zera.

Czym jest współczynnik kontrastu?

Współczynnik kontrastu to liczba, która porównuje względną jasność, czyli luminancję, dwóch kolorów, zwykle tekstu i jego tła. WCAG oblicza go według stałego wzoru, a wynik mieści się w przedziale od 1:1 (brak różnicy, biel na bieli) do 21:1 (czerń na bieli). Im wyższa liczba, tym łatwiej odróżnić od siebie oba kolory.

Wzór to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to względna luminancja jaśniejszego koloru, a L2 ciemniejszego. Nie trzeba tego liczyć ręcznie, ale jeden szczegół ma znaczenie: liczy się tylko luminancja, a nie barwa. Dlatego czerwony tekst na zielonym tle może wyglądać jaskrawo, a mimo to mieć niski współczynnik.

Drugi szczegół, o którym się zapomina, to zaokrąglanie. Objaśnienia W3C do kryterium 1.4.3 (otwiera się w nowej karcie) mówią, że obliczone wartości „nie powinny być zaokrąglane (np. 4,499:1 nie spełnia progu 4,5:1)”. Szary #767676 na bieli (4,54:1) spełnia więc wymaganie, a #777777 na bieli (4,48:1) już nie, choć gołym okiem nikt ich nie odróżni.

Jakiego współczynnika kontrastu wymaga WCAG?

Na poziomie AA, do którego odsyła większość przepisów i umów, zwykły tekst potrzebuje co najmniej 4,5:1 względem tła, a duży tekst 3:1 (kryterium sukcesu 1.4.3). Elementy interfejsu i istotne grafiki potrzebują 3:1 względem sąsiednich kolorów (1.4.11). Bardziej rygorystyczny poziom AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego (1.4.6).

Dlaczego 4,5:1? W3C wyjaśnia, że ten próg „kompensuje utratę wrażliwości na kontrast, której zwykle doświadczają użytkownicy z ubytkiem wzroku odpowiadającym ostrości wzroku ok. 20/40” (0,5 w zapisie dziesiętnym). Innymi słowy, ustalono go z myślą o osobach z umiarkowanie osłabionym wzrokiem, w tym o wielu starszych klientach, którzy nigdy nie powiedzieliby o sobie, że mają niepełnosprawność.

Niektóre teksty są wyłączone: logo i nazwy marek, tekst czysto dekoracyjny, tekst niewidoczny dla nikogo, tekst na zdjęciu zawierającym inne istotne treści wizualne oraz tekst w nieaktywnych (wyłączonych) kontrolkach. Twoje logo może więc zostać bez zmian. Akapit złożony w bladym kolorze logo już nie.

Co uznaje się za duży tekst?

Duży tekst w rozumieniu WCAG to co najmniej 18 punktów albo co najmniej 14 punktów przy pogrubieniu. W3C przelicza to na mniej więcej 24 piksele CSS i 18,5 piksela przy pogrubieniu. Wszystko, co mniejsze, potrzebuje pełnego współczynnika 4,5:1. Tekst główny, podpisy, etykiety pól, ceny i linki w stopce prawie nigdy nie są dużym tekstem, więc potrzebują wyższego współczynnika.

Jak to wygląda w praktyce? Szary #949494 na bieli daje 3,03:1. To wystarcza dla nagłówka o rozmiarze 28 pikseli, ale nie dla 16-pikselowego akapitu w tym samym kolorze. Wiele stron przechodzi test na nagłówkach i nie przechodzi go na całej reszcie.

Cienkie i ozdobne czcionki wymagają szczególnej uwagi. W3C zauważa, że z powodu wygładzania krawędzi „szczególnie cienkie lub nietypowe czcionki mogą być wyświetlane przez programy użytkownika w znacznie bledszym kolorze” niż ten, który wybrano. Jeśli używasz cienkiej odmiany (light) firmowej czcionki, zostaw sobie zapas powyżej 4,5:1, zamiast celować w 4,51.

Czy wymagania kontrastu dotyczą przycisków, ikon, wskaźników fokusu i wykresów?

Tak. Zgodnie z kryterium sukcesu 1.4.11 (poziom AA) wszystko, co trzeba zobaczyć, by rozpoznać kontrolkę, jej stan albo grafikę, potrzebuje 3:1 względem sąsiednich kolorów. Dotyczy to obramowań pól formularzy, ikon bez etykiety tekstowej, obrysów fokusu, stanów pól wyboru i przełączników oraz linii i wycinków wykresów. Tekst wewnątrz przycisku nadal potrzebuje 4,5:1.

• Pola formularzy: jasnoszare obramowanie #CCCCCC na bieli daje 1,61:1. Jeśli ta słaba linia jako jedyna pokazuje, gdzie wpisać tekst, kryterium nie jest spełnione.
• Przyciski: WCAG nie wymaga widocznego obramowania wokół każdego przycisku. Objaśnienia W3C do kryterium 1.4.11 (otwiera się w nowej karcie) mówią, że granica jest potrzebna tylko wtedy, gdy kontrolki nie da się rozpoznać w inny wizualny sposób. Jeśli przycisk jest rozpoznawalny wyłącznie po kolorowym kształcie, ten kształt potrzebuje 3:1 względem strony.
• Ikony: lupa wyszukiwania, serduszko listy życzeń czy ikona koszyka bez tekstu obok potrzebują 3:1.
• Wskaźniki fokusu: obrys pokazujący fokus klawiatury musi kontrastować z otaczającym go tłem. Nowsze kryteria dotyczące fokusu omawiamy w przewodniku po WCAG 2.2.
• Wykresy: linie na wykresie liniowym i wycinki wykresu kołowego potrzebują 3:1, chyba że te same wartości są też podane tekstem.
• Wyłączone kontrolki są zwolnione z wymagań, choć ludzie nadal muszą móc odróżnić, czy przycisk da się nacisnąć.

Linki w tekście ciągłym to szczególny przypadek. Jeśli wyróżnia je tylko kolor, bez podkreślenia, technika W3C G183 (otwiera się w nowej karcie) wymaga 3:1 między kolorem linku a otaczającym tekstem, przy czym oba nadal potrzebują 4,5:1 względem tła. Znalezienie trzech kolorów, które spełnią to wszystko, jest trudne. Podkreślenie jest znacznie prostsze.

Jak sprawdzić kontrast kolorów?

Do konkretnych par kolorów użyj bezpłatnego narzędzia do sprawdzania kontrastu, do działających stron narzędzi deweloperskich przeglądarki, a do wyszukania problematycznych miejsc w całej witrynie skanu automatycznego. Potem sprawdź na oko to, czego narzędzia nie wyłapią: tekst na zdjęciach i gradientach, stany najechania i fokusu, tekst zastępczy i komunikaty o błędach. Przeważnie zajmuje to kilka minut na szablon strony.

• WebAIM Contrast Checker (otwiera się w nowej karcie): wpisz dwa kody szesnastkowe, a dostaniesz współczynnik z oceną dla zwykłego tekstu, dużego tekstu i obiektów graficznych. Suwak jasności przydaje się do znalezienia najbliższego odcienia, który spełnia wymagania.
• Colour Contrast Analyser (otwiera się w nowej karcie): bezpłatna aplikacja firmy Vispero na Windows i macOS. Jej pipeta pobiera kolor dowolnego piksela na ekranie, co przydaje się przy tekście na obrazach, w PDF-ach i aplikacjach, a do tego ma symulator zaburzeń widzenia barw.
• Narzędzia deweloperskie Chrome: zbadaj fragment tekstu i otwórz próbnik kolorów. Jego sekcja współczynnika kontrastu (otwiera się w nowej karcie) pokazuje linie dla AA i AAA i może zaproponować kolor spełniający wymagania. Panel CSS Overview wymienia wszystkie problemy z kontrastem na stronie.
• Narzędzia automatyczne: rozszerzenia przeglądarki i Lighthouse oznaczają tekst o niskim kontraście na całej stronie, ale tekst na obrazach czy gradientach często oznaczają jako wymagający ręcznej weryfikacji, zamiast go zaliczać lub odrzucać.

Tam, gdzie narzędzia zawodzą, sprawdzaj ręcznie. W przypadku tekstu na zdjęciu w nagłówku strony zmierz najjaśniejszą część obrazu za najjaśniejszymi literami; W3C wymienia obrazy tła bez wystarczającego kontrastu jako znany błąd (F83). Najedź na przyciski, przejdź do nich klawiszem Tab, wywołaj błąd w formularzu, przełącz się na tryb ciemny, jeśli go oferujesz. Ciemny motyw też może nie spełniać wymagań: szary #757575 na tle #121212 daje 4,07:1. Nasz poradnik jak sprawdzić dostępność strony internetowej stawia kontrast obok innych szybkich testów ręcznych.

Jak poprawić niski kontrast bez zmiany identyfikacji marki?

Zwykle przez dodanie ciemniejszego odcienia koloru marki dla tekstu i małych elementów i zostawienie oryginału dla dużych nagłówków, teł i ilustracji. Wiele kolorów marki nie spełnia wymagań tylko przy małych rozmiarach. Często wystarczy zamienić biały tekst na ciemny na jasnym kolorze marki, a większość odwiedzających zauważy tylko, że stronę łatwiej się czyta.

1. Przygotuj „tekstową” wersję każdego koloru marki, o kontraście co najmniej 4,5:1 względem głównych teł, i używaj jej do tekstu głównego, linków i małych ikon.
2. Oryginalny jaskrawy kolor stosuj do dużych nagłówków (tam wystarczy 3:1), teł, ilustracji i dekoracji.
3. Na jasnych kolorach marki zmień tekst przycisków z białego na ciemny.
4. Pod tekst umieszczony na zdjęciach podłóż jednolite lub półprzezroczyste tło.
5. Sprawdź każdy stan: najechanie, fokus, odwiedzony link, zaznaczenie, błąd i tekst zastępczy.
6. Zapisz pary spełniające wymagania jako tokeny projektowe lub ustawienia motywu, żeby nowe strony je dziedziczyły, zamiast wymyślać je od nowa.

Projektowanie z myślą o daltonizmie: dlaczego sam kolor nie wystarcza

Kontrast i kolor to dwa osobne problemy. Według Colour Blind Awareness (otwiera się w nowej karcie) zaburzenia widzenia barw, najczęściej czerwieni i zieleni, ma mniej więcej co dwunasty mężczyzna i co dwusetna kobieta. Kryterium WCAG 1.4.1 (otwiera się w nowej karcie) (poziom A) mówi, że kolor nie może być jedynym wizualnym sposobem przekazywania informacji, więc łącz go z tekstem, ikonami, wzorami lub podkreśleniami.

• Błędy w formularzach: sama czerwona ramka nie wystarcza. Dodaj przy polu komunikat, np. „Podaj kod pocztowy”, najlepiej z ikoną.
• Stan magazynowy i status: zielona lub czerwona kropka przy produkcie wielu kupującym nic nie mówi. Napisz „Dostępny” albo „Wyprzedany”.
• Wykresy: legenda, która wymaga dopasowywania kolorów, jest trudna w odbiorze. Podpisuj linie bezpośrednio albo stosuj wzory i różne style linii.
• Linki: w tekście głównym podkreślaj je, z powodów opisanych wyżej.

Żeby zobaczyć problem na własne oczy, użyj emulacji zaburzeń widzenia w narzędziach deweloperskich Chrome albo symulatora w Colour Contrast Analyser. Kontrast pomaga i tutaj: współczynnik mierzy jasność, a nie barwę, więc dwa kolory o wysokim współczynniku pozostają rozróżnialne, nawet jeśli ich barwy wydają się podobne. Więcej o tym, jak osoby słabowidzące i z innymi niepełnosprawnościami konfigurują swoje urządzenia, piszemy w artykule jak osoby z niepełnosprawnościami korzystają z internetu.

Czy tryby wysokiego kontrastu i przełączniki kontrastu wystarczą?

Nie. Systemowe motywy kontrastowe i przełączniki kontrastu na stronie pomagają osobom, które wiedzą, że potrzebują większego kontrastu, i same go włączają. WCAG ocenia jednak stronę w stanie domyślnym, więc kolory, które każdy odwiedzający widzi na początku, nadal muszą spełniać wymagania. Przełącznik to dodatkowa opcja dla tych, którzy chcą więcej, a nie naprawa kolorów, które nie spełniają wymagań.

Niektóre osoby z niepełnosprawnościami korzystają z motywów kontrastowych Windows, które zastępują Twoje kolory własnymi. Warto przetestować stronę z takim motywem: ikony zbudowane z obrazów tła mogą zniknąć, podobnie jak style fokusu rysowane wyłącznie cieniem (box-shadow). Zapytanie medialne CSS prefers-contrast pozwala też zaoferować wersję o wyższym kontraście osobom, które poprosiły o nią w ustawieniach systemu.

Nasz widżet ma dostosowanie kontrastu i profil dla osób z daltonizmem, a niektórzy odwiedzający uważają je za przydatne. Mimo to powiemy to samo: jeśli tekst główny ma kolor #999999 na bieli, zmień CSS. Widżet daje odwiedzającemu, który chce większego kontrastu, sposób, by go uzyskać. Nie sprawia, że niespełniające wymagań domyślne kolory zaczną je spełniać, o czym mówi też opis WCAG w naszej dokumentacji.