Kontrast kolorów na stronie — wymagania WCAG i dostępność w praktyce

Tekst o zbyt małym kontraście jest trudny do odczytania dla osób słabowidzących, starszych, z zaburzeniami widzenia barw — ale też dla każdego, kto patrzy na telefon w słońcu. Dlatego wytyczne WCAG (Web Content Accessibility Guidelines) określają minimalny kontrast tekstu i elementów interfejsu.

Minimalne wartości

Element	Poziom AA	Poziom AAA
zwykły tekst	4,5 : 1	7 : 1
duży tekst (od 24 px, pogrubiony od 18,66 px)	3 : 1	4,5 : 1
ikony, obramowania pól formularza, wykresy	3 : 1	—

Standardem w przepisach jest poziom AA. Kontrast liczy się z luminancji obu kolorów — od 1:1 (identyczne) do 21:1 (czarny na białym). Dowolną parę sprawdzisz w testerze kontrastu.

Kogo to obowiązuje

• Podmioty publiczne — urzędy, szkoły, szpitale, uczelnie — na podstawie ustawy o dostępności cyfrowej stron internetowych i aplikacji mobilnych (od 2019 r.).
• Wiele firm prywatnych od 28 czerwca 2025 r. — Europejski akt o dostępności (EAA), w Polsce wdrożony ustawą o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Dotyczy m.in. sklepów internetowych, bankowości, e-booków, biletów i usług transportowych. Mikroprzedsiębiorstwa świadczące usługi są co do zasady zwolnione.

Nawet jeśli przepisy Cię nie obowiązują, lepszy kontrast oznacza wygodniejsze czytanie dla wszystkich — i mniej porzuconych formularzy.

Najczęstsze problemy

• Jasnoszary tekst — modny w projektach, np. #999999 na białym ma tylko 2,85:1. Do zwykłego tekstu potrzeba co najmniej #767676.
• Tekst zastępczy (placeholder) w polach formularza — zwykle bardzo jasny; nie zastępuje etykiety.
• Kolory marki — biały napis na żółtym, jasnozielonym lub pomarańczowym przycisku rzadko spełnia 4,5:1.
• Napisy na zdjęciach — dodaj półprzezroczyste ciemne tło pod tekstem lub cień.
• Sam kolor jako informacja — czerwona ramka przy błędzie musi mieć też komunikat tekstowy lub ikonę.
• Tryb ciemny — trzeba go sprawdzić osobno; kolory dobre na jasnym tle często są za ciemne na ciemnym.

Jak poprawić kolory bez zmiany charakteru strony

1. Zostaw odcień, zmień jasność — przyciemnij tekst (albo rozjaśnij na ciemnym tle) w modelu HSL. Kolor wciąż „wygląda jak marka”. Pomoże konwerter kolorów.
2. Kolor marki stosuj na dużych elementach (tła sekcji, ikony), a tekst zostaw ciemny.
3. Przygotuj paletę z kilkoma odcieniami tego samego koloru (generator palet) i od razu sprawdź, które pary spełniają AA.
4. Zapisz dozwolone pary kolorów w systemie projektowym, żeby nie sprawdzać ich za każdym razem.

Kontrast to nie wszystko

Dostępna strona ma też m.in. opisy alternatywne obrazów, poprawne nagłówki, możliwość obsługi klawiaturą, widoczny fokus, etykiety pól formularza i tekst, który można powiększyć do 200% bez utraty treści. Kontrast jest jednak najłatwiejszy do zmierzenia i poprawienia — dobry punkt startu.