Kontrast kolorów to stosunek jasności tekstu do jasności tła, który decyduje o czytelności treści. WCAG wymaga dla zwykłego tekstu poziomu AA co najmniej 4,5:1, a dla dużego tekstu 3:1.
Jak sprawdzić kontrast?
Użyj narzędzi takich jak sprawdzanie kontrastu w Chrome DevTools, WebAIM Contrast Checker lub Lighthouse. Sprawdzaj też stany interaktywne: najechanie, fokus i wyłączenie.
Typowe błędy
- jasnoszary tekst na białym tle,
- tekst na zdjęciu bez podkładu,
- przekazywanie informacji samym kolorem (np. czerwone pole błędu bez komunikatu).
Wymagane wartości
Wytyczne WCAG na poziomie AA wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu. Poziom AAA podnosi wymaganie do 7:1. Do pomiaru służą narzędzia w Chrome DevTools oraz kalkulatory kontrastu. Szary tekst na białym tle jest jednym z najczęstszych naruszeń, a wyniki zależą od jasności ekranu i warunków oświetlenia.
Czy tryb ciemny rozwiązuje problem kontrastu?
Nie automatycznie. W trybie ciemnym też trzeba sprawdzić proporcje, a zbyt jaskrawy biały tekst na czarnym tle bywa męczący.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP) 
Testy A/B w GA4 – jak je prowadzić i mierzyć po wyłączeniu Google Optimize