Współczynniki kontrastu WCAG wyjaśnione: praktyczny przewodnik projektanta

Oto liczba, do której wciąż wracam: w raporcie WebAIM Million z 2025 roku tekst o niskim kontraście był najczęstszym pojedynczym błędem dostępności w sieci, obecnym na 79,1% z miliona najpopularniejszych stron głównych. Nie brak tekstu alternatywnego. Nie nieopisane przyciski. Kontrast. Najczęściej wykrywany problem z dostępnością na świecie to dwa zbyt podobne do siebie kolory, a niemal każdy zespół, który go wypuszcza, nie ma o tym pojęcia.

Sam wypuściłem ten błąd. Lata temu zbudowałem „premium” dashboard z eleganckim szarym tekstem #9CA3AF na bieli, zaakceptowany przez wszystkich w pokoju, bo wyglądał wyrafinowanie na fabrycznie nowym ekranie Retina w ciemnej sali konferencyjnej. Tydzień później przyszło zgłoszenie od użytkownika w zalanym słońcem pociągu, który dosłownie nie mógł odczytać etykiet. Tekst był na poziomie około 2,6:1. WCAG prosi o 4,5:1. Ta różnica to cały temat tego artykułu.

Czym naprawdę jest współczynnik kontrastu WCAG

Współczynnik kontrastu WCAG to pojedyncza liczba opisująca, jak bardzo dwa kolory różnią się jasnością, wyrażona jako stosunek od 1:1 do 21:1. Biel na bieli to 1:1 (niewidoczne). Czysta czerń na czystej bieli to 21:1 (maksimum). Wszystko, co projektujesz, mieści się gdzieś pomiędzy, a WCAG ustala próg, poniżej którego nie wolno ci zejść.

Kluczowa rzecz do przyswojenia wcześnie: kontrast dotyczy luminancji, a nie tego, czy kolory „wyglądają na różne”. Czerwony i zielony wyglądają dla większości ludzi diametralnie inaczej, ale nasycony czerwony (#FF0000) na nasyconym zielonym (#008000) plasuje się zaledwie na około 1,3:1, bo niosą niemal tę samą jasność. Dla osoby z daltonizmem czerwono-zielonym albo dla każdego rzucającego okiem na kiepskiej jakości ekran ta para to breja. Twoje oko daje się oszukać odcieniowi; wzór na kontrast nie.

Wzór, prościej mówiąc

Współczynnik oblicza się jako (L1 + 0.05) / (L2 + 0.05), gdzie L1 to luminancja względna jaśniejszego koloru, a L2 to luminancja ciemniejszego. Niemal nigdy nie będziesz tego liczyć ręcznie, ale zrozumienie dwóch etapów mówi, dlaczego twoja intuicja cię myli.

Najpierw luminancję względną każdego koloru znajduje się, biorąc jego kanały czerwony, zielony i niebieski, „linearyzując” je (cofając krzywą gamma, którą nakładają ekrany, według reguły, że kanały o wartości 0.03928 lub niższej dzieli się przez 12.92, a wyższe przepuszcza przez ((c + 0.055) / 1.055) ^ 2.4), a następnie ważąc: 0,2126 dla czerwonego, 0,7152 dla zielonego i 0,0722 dla niebieskiego. Te wagi nie są przypadkowe. Ludzkie oczy są nadzwyczaj czułe na zielony i w porównaniu niemal ślepe na niebieski.

To najużyteczniejszy wniosek z całej matematyki: zielony niesie mniej więcej dziesięciokrotnie większą postrzeganą jasność niż niebieski. Dlatego czysty niebieski tekst na czerni jest bolesny i ledwo przechodzi, podczas gdy ta sama „ciemność” zieleni czyta się dobrze. Dlatego twoje niebieskie linki na ciemnym tle wydają się słabe, niezależnie od tego, jak nasycone je zrobisz. Jeśli masz zapamiętać o wzorze jedną rzecz, zapamiętaj wagi.

Dodatek + 0.05 we współczynniku to stała modelująca światło otoczenia odbijające się od ekranu, dzięki czemu nawet teoretycznie idealne czernie nigdy nie dają nieskończonego współczynnika. To powód, dla którego współczynniki kontrastu zatrzymują się na 21:1.

Trzy progi, które musisz znać

WCAG (Wytyczne dotyczące dostępności treści internetowych, utrzymywane przez W3C) definiuje niewielki zestaw liczb. Zapamiętaj je, a pokryjesz zdecydowaną większość realnej pracy.

• 4,5:1 — minimum dla normalnego tekstu zasadniczego na poziomie AA. To koń roboczy wśród liczb. Jeśli celujesz w jedną wartość, celuj w tę.
• 3:1 — minimum dla tekstu dużego na poziomie AA, a także minimum dla nietekstowych elementów UI i grafiki (więcej o tym niżej).
• 7:1 — tekst normalny na poziomie AAA, podwyższony poziom dla użytkowników ze słabym wzrokiem. Tekst duży na AAA potrzebuje 4,5:1.

Zauważ schemat: każdy poziom to z grubsza ten następny wyżej. Duży-AA i nietekstowy dzielą 3:1; normalny-AA i duży-AAA dzielą 4,5:1. Do zapamiętania mniej, niż się wydaje.

AA kontra AAA: który właściwie jesteś winien?

AA to standard realnego świata. To do niego odwołuje się Europejski Akt o Dostępności, ugody napędzane ADA w USA, Sekcja 508 i zasadniczo każda umowa przetargowa. Gdy prawnik lub audytor mówi „zgodny z WCAG”, ma na myśli AA. AAA to złoty poziom, a same wytyczne wprost mówią, że zgodność z AAA nie jest wymagana jako ogólna polityka dla całych witryn, częściowo dlatego, że pewne treści po prostu nie są w stanie osiągnąć 7:1 bez wyglądania na zepsute.

Moje szczere zdanie po latach: projektuj tekst zasadniczy tak, by przechodził AA z komfortem, a potem traktuj AAA jako cel, który trafiasz dla treści najważniejszych — głównej kolumny czytelniczej artykułu, komunikatów o błędach, wszystkiego, co zestresowany użytkownik lub osoba ze słabym wzrokiem musi przeanalizować pod presją. Pogoń za 7:1 na każdym podpisie i wyłączonej etykiecie to przegrana bitwa, która spłaszcza całą paletę do czerni na bieli.

Tekst normalny kontra duży — i pułapka w środku

WCAG taryfuje tekst duży łagodniej (3:1 zamiast 4,5:1), bo większe, cięższe kształty liter są czytelne przy niższym kontraście. Ale definicja „dużego” jest precyzyjna, a ludzie wciąż się mylą.

• Duży = 18 pt w górę, czyli 24 px przy zwykłej grubości.
• Lub 14 pt w górę, czyli około 18,5 px, jeśli tekst jest pogrubiony.

Przelicznik, który wszystkich zwodzi, to 1 pt = 1,333 px, dlatego 18 pt staje się 24 px, a 14 pt staje się ~18,5 px. A więc zwykły nagłówek 19 px to nie tekst duży według definicji WCAG — wciąż jest winien pełne 4,5:1. Pogrubiona etykieta 16 px też nie jest duża. Widziałem projekty, które „przechodziły” w czyjejś głowie, bo nagłówek „wyglądał na duży”, podczas gdy w pikselach plasował się tuż pod progiem i potrzebował surowszego współczynnika. W razie wątpliwości trzymaj tekst zasadniczy i podnagłówki przy 4,5:1, a ulgę 3:1 przyznawaj tylko naprawdę dużej czcionce wystawowej.

Kontrast nietekstowy: kryterium, o którym wszyscy zapominają (1.4.11)

Tu właśnie zawodzi większość skądinąd ostrożnych zespołów. WCAG 2.1 dodało kryterium sukcesu 1.4.11, Kontrast elementów nietekstowych, wymagające 3:1 dla dwóch kategorii niemających nic wspólnego z czytaniem:

• Komponenty interfejsu użytkownika — wizualna granica kontrolki, która mówi ci, że istnieje i w jakim jest stanie. Obramowanie pola tekstowego, kontur niezaznaczonego pola wyboru, pierścień fokusu wokół przycisku, ścieżka przełącznika.
• Obiekty graficzne — części ikon, wykresów i diagramów potrzebne do ich zrozumienia. Linia na wykresie sparkline, wycinki wykresu kołowego, kształt ikony ostrzeżenia.

Klasyczne naruszenie: pole wyszukiwania będące po prostu pudełkiem #FFFFFF z jasnoszarym obramowaniem #E5E7EB o grubości 1 px na białej stronie. To obramowanie ma około 1,2:1. Widzący użytkownicy ze słabym wzrokiem dosłownie nie potrafią znaleźć, gdzie kliknąć. Blady tekst zastępczy i kontury przycisków-duchów zawodzą w ten sam sposób. Czysta dekoracja jest zwolniona, podobnie jak tekst wewnątrz komponentu (ten podlega 1.4.3) — ale to, co sygnalizuje „to jest interaktywne”, musi osiągnąć 3:1 względem tego, co sąsiaduje obok.

Jak to zmierzyć — i jak to naprawić

Kontrastu nie oceniasz na oko. Mierzysz go. Mój codzienny tryb pracy:

• W przeglądarce otwórz DevTools i sprawdź element tekstowy. Chrome i Firefox oba wypisują współczynnik kontrastu wprost w próbniku kolorów, ze znacznikami dla AA i AAA, a nawet rysują linię na przestrzeni barw pokazującą próg, który możesz przeciągnąć.
• Do sprawdzania pary kodów hex, zanim trafią do kodu, użyj dedykowanej sprawdzarki. Generator palety kolorów na tej stronie zawiera sprawdzarkę kontrastu WCAG, dzięki czemu możesz walidować kombinacje już na etapie ich wybierania, zamiast odkrywać problem podczas audytu.
• Do przeglądów całych stron uruchom narzędzie automatyczne. Ale znaj jego granicę: automatyzacja wyłapuje tekst na jednolitym kolorze, a pomija tekst na zdjęciach, gradientach czy półprzezroczystych nakładkach. Te sprawdzasz ręcznie.

Gdy coś nie przechodzi, oprzyj się pokusie poprawiania odcienia. Zmiana nasycenia ledwo rusza kontrast; zmiana jasności rusza go mocno. Konkretnie:

• Przyciemnij pierwszy plan lub rozjaśnij tło, aż przekroczysz linię. Mój wcześniejszy szary #9CA3AF musiał zejść do mniej więcej #6B7280 na bieli, by osiągnąć ~4,5:1 — ta sama rodzina, tylko kilka stopni głębiej.
• W przypadku jasnego tekstu na kolorze zwykle szybciej jest pogłębić tło. Etykieta #FFFFFF na niebieskim przycisku #60A5FA nie przechodzi; zejdź z przyciskiem do #2563EB, a przekroczysz AA, nie dotykając tekstu.
• W przypadku wykresów i ikon dodaj cienki ciemniejszy obrys lub subtelne zabarwienie tła, zamiast walczyć, by każde wypełnienie było ciemne.

Błędy, które widuję w prawdziwych zespołach

• Akceptowanie na idealnym ekranie. Nieskazitelny MacBook w ciemnym pokoju upiększa wszystko. Prawdziwi użytkownicy mają odblaski, tanie panele, filtry światła niebieskiego i „night shift” ocieplający biele. Projektuj na najgorsze prawdopodobne warunki oglądania, nie na demo.
• Ufanie odcieniowi zamiast luminancji. Dwa żywe, ale równie jasne kolory (znów ta czerwień na zieleni) mogą być niewidoczne dla daltonistów, a jednocześnie przejść twój odruchowy test. Policz liczbę.
• Zapominanie o tekście zastępczym i stanach wyłączonych. Tekst zastępczy to wciąż tekst i wciąż jest winien kontrast, jeśli przekazuje znaczenie. Kontrolki wyłączone są faktycznie zwolnione, ale nie nadużywaj tego, by chować treść aktywną o niskim kontraście pod „wyłączonym” wyglądem.
• Ignorowanie nakładek. Biały tekst na zdjęciu bohaterskim przechodzi nad ciemnym rogiem i zawodzi nad jasnym niebem. Przyciemniająca warstwa — półprzezroczysta ciemna warstwa między obrazem a tekstem — to standardowe lekarstwo.
• Traktowanie 4,5:1 jako celu zamiast progu. Wylądowanie dokładnie na 4,5:1 jest kruche; jeden projektant majstrujący przy odcieniu znów to psuje. Wbuduj zapas.

Słowo o przyszłości: WCAG 3 bada model percepcyjny zwany APCA, który ocenia kontrast bardziej tak, jak robi to ludzkie oko, uwzględniając rozmiar i grubość tekstu łącznie, a nie płaski współczynnik. Jest obiecujący i warto go obserwować, ale na dziś to współczynniki z tego artykułu — poparte przez Understanding 1.4.3 od W3C — czynią cię zgodnym prawnie i praktycznie. Buduj do nich, zostaw sobie margines i mierz, zamiast zgadywać. Te 79,1% witryn, które zawiodły, zawiodły głównie dlatego, że nikt nie sprawdził. Sprawdzanie to cała robota.