Jak sprawdzać kontrast kolorów dla dostępności
Około 1 mężczyzna na 12 i 1 kobieta na 200 ma jakąś formę zaburzeń widzenia kolorów. Miliony innych mają słaby wzrok, starzejący się wzrok lub korzystają ze swojego ekranu w pełnym słońcu. Jeśli Twój tekst nie ma wystarczającego kontrastu z tłem, te osoby nie mogą go czytać.
Kontrast kolorów to nie „dodatek” — to centralny wymóg dostępności.
Czego wymaga WCAG
Web Content Accessibility Guidelines (WCAG) definiują minimalne współczynniki kontrastu między tekstem a tłem:
| Poziom | Tekst normalny | Tekst duży | Elementy nietekstowe |
|---|---|---|---|
| AA (minimum) | 4,5:1 | 3:1 | 3:1 |
| AAA (zwiększony) | 7:1 | 4,5:1 | — |
„Tekst duży” oznacza 18 px pogrubiony lub 24 px regularny i powyżej.
Współczynnik kontrastu biegnie od 1:1 (brak kontrastu — biały na białym) do 21:1 (maksymalny kontrast — czarny na białym).
Jak sprawdzić kontrast
- Wybierz swoje kolory — wprowadź kolor tekstu (pierwszy plan) i koloru tła przez kody HEX, wartości RGB lub próbniki.
- Sprawdź wyniki — narzędzie wyświetla natychmiast współczynnik kontrastu i czy Twoja kombinacja przechodzi WCAG AA i AAA dla tekstu normalnego i dużego.
- Dostosuj w razie potrzeby — jeśli kontrast zawodzi, przyciemnij tekst lub rozjaśnij tło (lub odwrotnie), aż osiągniesz wymagany poziom.
Częste błędy kontrastu
Jasnoszary tekst na białym — #999999 na #ffffff ma współczynnik tylko 2,8:1. To zawodzi WCAG AA. Może wyglądać „minimalistycznie” dla projektanta o doskonałym wzroku, ale jest nieczytelne dla wielu.
Kolorowy tekst na kolorowym tle — niebieski przycisk z białym tekstem często przechodzi, ale zielony przycisk z białym tekstem nie. Zawsze sprawdzaj — nie można ocenić współczynnika kontrastu na oko.
Tekst placeholder — teksty placeholder pól są notorycznie słabe w kontraście. Choć WCAG ich ściśle nie nakazuje, użytkownicy nadal muszą je czytać.
Tryb ciemny — projektanci często używają średniego szarego na ciemnym szarym dla „subtelnego” wyglądu. To często zawodzi sprawdzenia kontrastu.
Wskazówki
- Sprawdź każdą kombinację tekst/tło — niczego nie zakładaj. Nawet doświadczeni projektanci są zaskakiwani przez kombinacje, które zawodzą.
- Testuj oba motywy — jeśli Twoja strona ma tryb jasny i ciemny, sprawdź kontrast w obu. Kolor, który działa na białym, może zawieść na ciemnym szarym.
- Używaj kolorów swojej marki z rozwagą — jeśli Twój niebieski markowy zawodzi jako kolor tekstu, użyj go dla większych elementów (przycisków, nagłówków), gdzie próg „dużego tekstu” (3:1) ma zastosowanie, a użyj ciemniejszego odcienia dla treści tekstowej.
- Nie polegaj wyłącznie na kolorze — oprócz wystarczającego kontrastu, nigdy nie przekazuj informacji wyłącznie kolorem. Używaj ikon, etykiet lub wzorów jako uzupełnienia.
Najczęściej zadawane pytania
Jaki współczynnik kontrastu osiągać?
Dla tekstu normalnego dąż do co najmniej 4,5:1 (WCAG AA). Dla tekstu dużego (18 px pogrubiony lub 24 px regularny), 3:1 wystarczy. Dla najwyższego poziomu dostępności (AAA) dąż do 7:1 dla tekstu normalnego.
Czy dotyczy to tylko tekstu?
Nie. WCAG 2.1 wymaga również wystarczającego kontrastu dla komponentów interfejsu i obiektów graficznych (ikony, obramowania pól, wskaźniki focus). Minimum dla elementów nietekstowych to 3:1.
A co z trybem ciemnym?
Tryb ciemny wymaga tych samych sprawdzeń kontrastu. Biały tekst na ciemnym tle często łatwo przechodzi, ale szary tekst na ciemnym szarym tle często zawodzi. Testuj oba tryby.
Czy kontrast kolorów jest wymogiem prawnym?
W wielu jurysdykcjach tak. ADA (USA), EN 301 549 (UE) i podobne ustawy nakazują dostępność cyfrową. Zgodność z WCAG jest uznanym standardem do ich spełnienia.