Współczynnik kontrastu to zmierzona różnica jasności między tekstem a tłem, w skali od 1:1 do 21:1. WCAG wymaga co najmniej 4,5:1 dla zwykłego tekstu, 3:1 dla dużego i 3:1 dla tych części kontrolki, które niosą informację o tym, czym ona jest.
Co to jest współczynnik kontrastu
Współczynnik kontrastu to zmierzona różnica jasności między tekstem a jego tłem. Wylicza się ją ze wzoru, więc nie jest kwestią gustu: czarne na białym to 21:1, a 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 tu 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 najczęstsza awaria dostępności
Ta awaria jest najłatwiejsza do zmierzenia i tę akurat 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ło podjąć spoko.space
Firmowy niebieski to #0d87cd. Na białym tle ma 3,9:1, czyli spokojnie wystarczy na wypełniony przycisk, ikonę albo słowo wielkości nagłówka i nie wystarcza na nic w rozmiarze tekstu. Zostawało 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, więc 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.
Powiązane pojęcia
Zobacz też
Chcesz to mieć zrobione, a nie tylko zdefiniowane?
To jest ta część pracy, do której się mnie wynajmuje. Na stronie niżej jest, ile to kosztuje i jak przebiega.
Audyt dostępności WCAG 2.2 AAGdzie o tym piszę
Skuteczna strona www — 10 kluczowych cech
Skuteczna strona to taka, która zamienia odwiedzających w klientów. 10 konkretnych cech, które decydują o wyniku — i jak je zweryfikować na swojej stronie.