Kontrast pod kontrolą: jak wybrać kolory i czcionki w dostępnych dokumentach

Jasnoszary tekst na białym tle może na pierwszy rzut oka wyglądać elegancko i minimalistycznie – i być całkowicie nieczytelny dla użytkowników z wadami wzroku, silnym światłem słonecznym na ekranie lub po prostu zmęczonym wzrokiem pod koniec dnia pracy. Kontrast kolorów to jedno z najbardziej „technicznych” kryteriów dostępności — trzeba spełnić dokładne liczby — ale jest też jednym z najłatwiejszych do przetestowania i skorygowania z wyprzedzeniem.

Jakich współczynników wymaga WCAG

WCAG definiuje współczynnik kontrastu jako liczbę z zakresu od 1:1 (całkowity brak kontrastu – identyczny kolor) do 21:1 (maksymalny możliwy kontrast – czysta czerń na czystej bieli). Na poziomie AA (poziom obowiązkowy w większości krajów, w tym w Izraelu) wymagany jest stosunek co najmniej 4,5:1 między zwykłym tekstem a tłem za nim. Na bardziej rygorystycznym poziomie AAA wymóg wzrasta do 7:1.

Dlaczego duży tekst może mieć mniejszy kontrast

Duży tekst pozostaje czytelny nawet przy niższym kontraście, dlatego WCAG ustala łatwiejszy próg: 3:1 na poziomie AA (zamiast 4,5:1) i 4,5:1 na poziomie AAA (zamiast 7:1). „Duży tekst” definiuje się jako tekst o rozmiarze co najmniej 18 punktów (około 24 pikseli) lub co najmniej 14 punktów (około 18,7 pikseli), jeśli jest pogrubiony. Na przykład duże nagłówki mogą „pozwolić” na nieco niższy kontrast niż zwykły akapit, a mimo to spełniają wymagania.

Jak sprawdzić współczynnik kontrastu w praktyce

Nie ma potrzeby obliczania tego ręcznie — bezpłatne narzędzia, takie jak WebAIM Contrast Checker, pozwalają wprowadzić kody kolorów tekstu i tła i natychmiast uzyskać dokładny współczynnik oraz wynik pozytywny/negatywny dla każdego poziomu. Warto sprawdzać nie tylko tekst na jednolitym tle, ale także tekst na obrazach tła lub gradientach — gdzie kontrast może się różnić między różnymi obszarami tego samego obrazu, dlatego najlepiej przetestować najbardziej „problematyczne” miejsce.

Jak wcześniej wybrać dostępną paletę kolorów

Najskuteczniejszym podejściem jest sprawdzenie kontrastu na etapie projektowania szablonu, a nie w każdym dokumencie z osobna. Wybierając kolory marki dla nagłówków, tekstu podstawowego i linków, warto z wyprzedzeniem potwierdzić, że każda faktycznie używana kombinacja tekstu i tła spełnia współczynnik co najmniej 4,5:1. W ten sposób każdy nowy dokument utworzony na podstawie szablonu automatycznie „odziedziczy” odpowiedni kontrast, zamiast sprawdzać każdy dokument osobno po jego napisaniu.