Dlaczego kontrast kolorów ma znaczenie
Kontrast tekstu i tła to jeden z najczęściej łamanych wymogów WCAG — i jednocześnie jeden z najłatwiejszych do naprawienia, jeśli tylko wie się, czego szukać. Wystarczy, że ktoś wybierze jasnoszary tekst na białym tle, bo "tak wygląda nowocześniej i mniej agresywnie", a osoby słabowidzące, starsze, albo po prostu korzystające z telefonu w pełnym słońcu, przestają być w stanie przeczytać treść.
To nie jest problem teoretyczny. W Polsce ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych wymaga zgodności ze standardem WCAG 2.1 na poziomie AA od podmiotów publicznych, a coraz więcej firm prywatnych traktuje to jako standard branżowy, nie tylko obowiązek.
Ile wynosi wymagany kontrast?
WCAG 2.1 AA (kryterium 1.4.3) określa dwa progi:
- 4.5:1 — dla zwykłego tekstu,
- 3:1 — dla dużego tekstu (od 18pt, albo 14pt pogrubionego) oraz dla znaczących elementów interfejsu: obramowań pól formularza, ikon, granic przycisków.
Kontrast liczy się na podstawie względnej jasności (relative luminance) obu kolorów — nie na oko, tylko matematycznie. Dwa kolory, które "wyglądają na wystarczająco różne", mogą dać kontrast 2.5:1 i formalnie nie przejść testu.
Częsty błąd: gotowe frameworki CSS "z pudełka"
To zaskakujące, ale wiele popularnych frameworków CSS ma domyślną paletę kolorów, która nie przechodzi WCAG AA. Sprawdziliśmy to niedawno na naszej własnej stronie, korzystającej z frameworku Bulma — i okazało się, że standardowe przyciski is-success, is-info czy is-primary z białym tekstem mają kontrast w okolicach 2:1–3.6:1, czyli wyraźnie poniżej wymaganych 4.5:1. To samo dotyczyło domyślnego szarego koloru używanego w podtytułach.
Wniosek jest prosty: samo użycie znanego, "sprawdzonego" frameworku nie gwarantuje dostępności. Trzeba to zweryfikować osobno, dla każdego koloru, który faktycznie trafia na produkcję.
Jak samodzielnie sprawdzić kontrast
Nie trzeba do tego drogich narzędzi:
- WebAIM Contrast Checker — wklejasz dwa kolory (tekst i tło), dostajesz dokładny współczynnik i informację, czy przechodzi AA/AAA.
- Chrome DevTools — zakładka Accessibility w panelu elementu pokazuje kontrast bezpośrednio przy zaznaczonym tekście, razem z sugerowanym, poprawionym kolorem.
- Rozszerzenie axe DevTools — automatycznie skanuje całą stronę i wypisuje listę wszystkich naruszeń kontrastu, nie tylko pojedynczego elementu.
Jak naprawić, nie tracąc charakteru marki
Najczęstsza obawa: "jeśli przyciemnimy kolory, strona przestanie wyglądać jak nasza marka". W praktyce wystarczy zwykle drobna korekta jasności (lightness w modelu HSL), bez zmiany odcienia (hue) — kolor pozostaje rozpoznawalny, tylko nieco głębszy.
Przykład z naszej własnej korekty:
| Kolor | Przed | Kontrast | Po | Kontrast |
|---|---|---|---|---|
| Teal (primary) | #00d1b2 |
1.95 | #007e6b |
5.00 |
| Zielony (success) | #48c78e |
2.14 | #267d56 |
5.06 |
| Niebieski (info) | #3e8ed0 |
3.51 | #2b73af |
5.03 |
Różnica wizualna jest niewielka — kolory pozostają w tej samej rodzinie barw. Różnica w czytelności jest ogromna.
Krótka checklista przed wdrożeniem
- Sprawdź tekst na wszystkich kolorowych przyciskach i tagach, nie tylko na białym tle strony.
- Sprawdź szare, "subtelne" opisy i podtytuły — to najczęstsze miejsce niedoszacowanego kontrastu.
- Sprawdź widoczność fokusu klawiatury (WCAG 2.4.7) — łatwo przypadkiem usunąć
outlinew CSS i nie zauważyć. - Osobno sprawdź sekcje z ciemnym tłem — kolor, który działa na białym tle, często zawodzi na ciemnym, i odwrotnie.
Podsumowanie
Kontrast kolorów to nie jest kosmetyka — to konkretna, mierzalna liczba, którą można sprawdzić w kilka sekund i naprawić bez przebudowy całego designu. Jeśli Twoja strona korzysta z gotowego frameworka CSS, potraktuj to jako punkt startowy do audytu, a nie gotowe rozwiązanie.