Jak obliczyć współczynnik kontrastu kolorów (WCAG AA/AAA)
Współczynnik kontrastu kolorów pokazuje, jak mocno kolor tekstu odróżnia się od tła, w skali od 1:1 (identyczne kolory) do 21:1 (czysta czerń na czystej bieli). WCAG 2.1 określa minimalne wartości, przy których tekst uznaje się za czytelny: 4,5:1 dla zwykłego tekstu na poziomie AA, próg stosowany w większości audytów dostępności i wymogów prawnych.
Wzór
Współczynnik wynika z względnej luminancji każdego koloru, a nie z tego, jak kolor “wygląda” na ekranie. Cztery kroki zamieniają kod hex w wartość luminancji:
- Rozbij hex na R, G, B i podziel każdą wartość przez 255, tak aby każdy kanał mieścił się między 0 a 1.
- Zlinearyzuj każdy kanał. Ekrany nie przekładają wartości koloru na jasność liniowo, więc każdy kanał dostaje korekcję gamma: jeśli wartość jest ≤ 0,03928, dzieli się ją przez 12,92; w przeciwnym razie stosuje się
((wartość + 0,055) / 1,055) ^ 2,4. - Zważ i zsumuj kanały do względnej luminancji:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Zielony dostaje największą wagę, bo oko jest na niego najbardziej czułe; niebieski dostaje najmniejszą. - Podziel jaśniejszą luminancję przez ciemniejszą, obie powiększone o 0,05:
(L_jasna + 0,05) / (L_ciemna + 0,05).
To ostatnie + 0,05 ma konkretną funkcję: nie pozwala współczynnikowi uciec w nieskończoność, gdy jeden z kolorów zbliża się do czerni, i to dlatego czysta czerń na czystej bieli daje dokładnie 21:1, a nie dużo wyższą liczbę.
Przykład krok po kroku: #767676 na bieli
Ta para szarość na bieli często pojawia się w dokumentacji WCAG, bo leży dokładnie na granicy, co czyni ją dobrym przypadkiem do policzenia ręcznie.
Krok 1. #767676 w RGB to 118, 118, 118. Po podzieleniu przez 255 wychodzi 0,4627 dla każdego kanału.
Krok 2. 0,4627 jest powyżej 0,03928, więc linearyzujemy wzorem gamma: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Wszystkie trzy kanały są tu równe, więc ta wartość dotyczy R, G i B jednocześnie.
Krok 3. Luminancja: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Luminancja bieli to 1,0 (każdy kanał linearyzuje się dokładnie do 1).
Krok 4. Współczynnik: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, zaokrąglone do 4,54:1.
To wychodzi tuż powyżej granicy 4,5:1 dla AA przy zwykłym tekście, i też tuż powyżej granicy 4,5:1 dla AAA przy dużym tekście, ale wyraźnie poniżej 7:1, których AAA wymaga dla zwykłego tekstu. Jedna wartość hex, trzy różne wyniki w zależności od rozmiaru tekstu i poziomu, do którego się dąży.
Jak radzą sobie popularne pary kolorów
| Para | Współczynnik | AA zwykły (4,5:1) | AAA zwykły (7:1) | AA duży (3:1) | AAA duży (4,5:1) |
|---|---|---|---|---|---|
#AAAAAA na #FFFFFF | 2,32:1 | Nie zaliczone | Nie zaliczone | Nie zaliczone | Nie zaliczone |
#767676 na #FFFFFF | 4,54:1 | Zaliczone | Nie zaliczone | Zaliczone | Zaliczone |
#2563EB na #FFFFFF | 5,17:1 | Zaliczone | Nie zaliczone | Zaliczone | Zaliczone |
#333333 na #FFFFFF | 12,63:1 | Zaliczone | Zaliczone | Zaliczone | Zaliczone |
Z tej tabeli wynikają dwie rzeczy. Po pierwsze, średnio nasycony niebieski jak #2563EB (popularny kolor przycisków i linków) zalicza AA dla tekstu głównego, ale całkowicie oblewa AAA, więc strona celująca w AAA dla linków potrzebuje ciemniejszego odcienia. Po drugie, popularny jasnoszary kolor placeholderów w okolicach #AAAAAA oblewa każdy próg, łącznie z minimum 3:1 dla dużego tekstu, co tłumaczy, dlaczego “stonowany” szary tekst na białym tle jest jednym z najczęstszych znalezisk w audytach dostępności.
Sprawdź własne kolory
Wpisz poniżej dwie wartości hex, aby zobaczyć dokładny współczynnik i które poziomy WCAG zaliczają, na żywo, bez wysyłania niczego na serwer.
Pchnąć w tę łódź jeża lub ośm skrzyń fig
Pchnąć w tę łódź jeża lub ośm skrzyń fig
Częste błędy
Zapominanie, że duży tekst ma niższy próg. WCAG definiuje “duży tekst” jako 18pt (24px) normalnej grubości lub 14pt (18,66px) pogrubiony i większy. Nagłówek 24px potrzebuje tylko 3:1, nie 4,5:1, więc design system stosujący tę samą regułę kontrastu do każdego rozmiaru tekstu odrzuca nagłówki, które już spełniają wymogi.
Testowanie kontrastu tekstu, ale nie komponentów interfejsu. WCAG 1.4.11 ustala osobne minimum 3:1 dla elementów nietekstowych, takich jak obramowania przycisków, kontury pól formularzy i ikony przekazujące znaczenie samodzielnie. Przycisk z idealnym kontrastem tekstu 7:1 wciąż może oblać audyt, jeśli jego obramowanie zlewa się z tłem.
Sprawdzanie kontrastu na złym tle. Tekst na zdjęciu, gradiencie albo półprzezroczystej nakładce nie ma jednego koloru tła, ma ich wiele. Współczynnik obowiązuje tylko dla konkretnego zmierzonego punktu; gradient jasny u góry i ciemny u dołu wymaga sprawdzenia najgorszego punktu, nie średniej.
Zakładanie, że kolory marki są zwolnione z wymogów. Logotyp sam w sobie jest zwolniony z wymogów kontrastu, ale tekst główny i tekst interfejsu w kolorze marki już nie. Wiele niebieskich i czerwonych kolorów marki, które świetnie sprawdzają się jako akcent loga, oblewa 4,5:1, gdy są używane jako 16px tekst akapitu na bieli.
Najczęściej zadawane pytania
Jaka jest różnica między AA a AAA? AA to standard, do którego odwołuje się większość prawnych wymogów dostępności (ADA w USA, EN 301 549 w UE), i to właśnie go sprawdza większość audytów. AAA jest surowszy i pomyślany głównie dla treści skierowanych specjalnie do osób słabowidzących; samo WCAG zaznacza, że AAA nie jest osiągalne dla każdego rodzaju treści, więc większość organizacji dąży szeroko do AA zamiast wszędzie do AAA.
Czy współczynnik kontrastu uwzględnia daltonizm? Nie. Współczynnik kontrastu mierzy luminancję (jasność), nie odcień, więc przy okazji pomaga wielu formom daltonizmu, bo nie zależy od rozróżniania konkretnych kolorów. Ale nie zastępuje sprawdzenia pod kątem daltonizmu: dwa kolory mogą mieć świetny kontrast i wciąż być trudne do odróżnienia dla osoby z daltonizmem czerwono-zielonym, jeśli różnią się głównie odcieniem, a nie jasnością.
Dlaczego czysta czerń na bieli daje dokładnie 21:1, a nie okrąglejszą liczbę?
Luminancja czerni to 0, a bieli to 1. Podstawiając te wartości do wzoru, dostajemy (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Wynik wychodzi dokładnie 21:1 ze względu na to, jak dobrano stałą +0,05, a nie przez przypadek czy zaokrąglenie.
Czy motyw dark mode wymaga osobnych sprawdzeń kontrastu? Tak. Zamiana jasnego tła na ciemne nie zachowuje współczynnika: biały tekst na niebieskim kolorze marki i niebieski tekst marki na niemal czarnym tle to dwie różne pary luminancji z dwoma różnymi współczynnikami, więc każdy motyw musi przejść przez sprawdzacz osobno, zamiast zakładać, że wynik z jasnego trybu nadal obowiązuje.