Kontrast tekstu: skąd biorą się progi 4,5 do 1 i 3 do 1
Czego wymaga kryterium
Kryterium 1.4.3 wymaga kontrastu co najmniej 4,5 do 1 między kolorem tekstu a kolorem tła. Dla tekstu dużego, czyli od 18 punktów albo od 14 punktów pogrubionego, próg spada do 3 do 1. Osobne kryterium 1.4.11 wymaga kontrastu 3 do 1 dla elementów interfejsu, na przykład obramowania pól formularza i ikon niosących informację.
Kryterium nie dotyczy logotypów oraz tekstu będącego częścią zdjęcia, jeżeli nie niesie istotnej informacji.
Skąd te liczby
Progi wynikają z badań nad utratą wrażliwości na kontrast, która postępuje z wiekiem i przy chorobach oczu. Osoba sześćdziesięcioletnia potrzebuje mniej więcej trzy razy większego kontrastu niż dwudziestolatek, żeby czytać z tą samą swobodą. Modny jasnoszary tekst na białym tle to nie jest kwestia gustu, tylko realna bariera dla dużej części Twoich klientów.
Jak zmierzyć
Pobierz kolor pipetą z narzędzi deweloperskich przeglądarki i wpisz obie wartości w dowolny miernik kontrastu. Uwaga na trzy pułapki: przezroczystość, przez którą realny kolor tła jest inny niż zadeklarowany; tekst na zdjęciu, gdzie kontrast zmienia się w zależności od fragmentu; oraz stany elementów, bo tekst przycisku po najechaniu myszą bywa gorszy niż w stanie spoczynku.
Jak naprawić
Najprostsza droga to przyciemnienie tekstu przy zachowaniu odcienia marki.
/* 2,3 do 1, poniżej wymagania */ color: #999999; /* 4,6 do 1, spełnia wymaganie */ color: #757575;
Przy tekście na zdjęciu dołóż półprzezroczystą warstwę pod tekstem albo cień. Przy przyciskach pamiętaj, że kontrast musi być zachowany także dla obramowania i dla stanu z fokusem.
Dlaczego warto zacząć właśnie od tego
Kontrast poprawia się w arkuszu stylów, w jednym miejscu, i zmiana obejmuje cały serwis. To zwykle najtańsza poprawka o największym zasięgu. W naszych raportach podajemy zmierzoną wartość, kolor tekstu, kolor tła i gotowy kolor zastępczy, więc poprawka sprowadza się do podmiany wartości.