współczynnik kontrastu

Co to jest

Liczba, którą się wylicza, a nie kwestia gustu. Czarne na białym to 21:1; dwie podobne szarości potrafią mieć 1,8:1. Progi, które mają znaczenie, to 4,5:1 dla tekstu podstawowego, 3:1 dla dużego i 3:1 dla elementów interfejsu, takich jak obwódka fokusu czy krawędź pola formularza.

„Duży” ma definicję i jest ostrzejsza, niż się wydaje: co najmniej 24 px albo 18,66 px przy grubości 700 lub większej. Etykieta przycisku w 16 px semibold to tekst zwykły, nie duży, choćby w projekcie wyglądała potężnie.

Dlaczego to twój problem, jeśli zamawiasz stronę

Bo to najczęstsza awaria dostępności w sieci, najłatwiejsza do zmierzenia i ta, którą twoi klienci czują, nie umiejąc jej nazwać. Jasna szarość na bieli wygląda wytwornie na skalibrowanym monitorze w ciemnym biurze i znika na laptopie w pociągu.

To także kryterium najczęściej zderzające się z księgą znaku — i właśnie tam mieszkają ciekawe decyzje.

Decyzja, którą musiała podjąć ta strona

Firmowy niebieski to #0d87cd. Na białym tle ma 3,9:1 — spokojnie wystarczy na wypełniony przycisk, ikonę albo słowo wielkości nagłówka i nie wystarcza na cokolwiek w rozmiarze tekstu. Czyli jedno z dwojga: zmienić kolor marki albo przestać używać go jako koloru tekstu.

Odpowiedzią były trzy tokeny zamiast jednego. Ciemniejszy niebieski na tekst na stronie, głębszy pod biały tekst na wypełnieniu i trzeci na niebieski tekst na niebieskawym kaflu, gdzie podkład zjada zapas, który ma ten pierwszy. Przyciski zostają przy kolorze marki, linki nie, a różnicy nie widać, dopóki się jej nie szuka.

Z tej samej pracy wyszło drugie odkrycie: axe nie utrzyma tej linii. Zawsze, gdy gdziekolwiek nad elementem leży gradient albo pseudoelement, zgłasza kontrast jako incomplete, a nie jako błąd — i zestaw testów sprawdzający tylko listę naruszeń przechodzi. Dlatego jest tu osobny skrypt, który liczy współczynniki sam i wywala build na prawdziwym niedoborze.

Czym współczynnik kontrastu nie jest

Sam w sobie nie jest miarą czytelności — strona może spełnić każdy próg i dalej być nie do czytania przez drobny krój, ciasne odstępy albo ruchliwe zdjęcie pod tekstem. Współczynnik jest podłogą, nie przeglądem projektu.