Sprawdzanie kontrastu
Wybierz kolor tekstu i tła, a współczynnik kontrastu zostanie porównany z wymaganiami WCAG.
Współczynnik kontrastu
16,69:1
Skala biegnie od 1:1 dla dwóch identycznych kolorów do 21:1 dla czerni na bieli.
Jak to wygląda
Nagłówek dużym tekstem
Tekst podstawowy w tym rozmiarze stawia kontrastowi największe wymagania, bo kształty liter są cienkie.
Wymagania WCAG
- Tekst podstawowy, AAPoniżej 18 pt albo poniżej 14 pt pogrubionego · 4,5:1Spełnia
- Tekst podstawowy, AAAPoniżej 18 pt albo poniżej 14 pt pogrubionego · 7:1Spełnia
- Duży tekst, AAOd 18 pt albo od 14 pt pogrubionego · 3:1Spełnia
- Duży tekst, AAAOd 18 pt albo od 14 pt pogrubionego · 4,5:1Spełnia
- Interfejs i grafika, AAObramowania, ikony i wszystko, co niesie znaczenie · 3:1Spełnia
Jak to działa
Współczynnik kontrastu mierzy różnicę luminancji względnej między dwoma kolorami. Wynosi od 1:1 dla dwóch identycznych kolorów do 21:1 dla czerni na bieli.
WCAG wymaga co najmniej 4,5:1 dla tekstu podstawowego na poziomie AA i 7:1 na poziomie AAA. Dla dużego tekstu – 18 pt albo 14 pt pogrubionego – wystarczy 3:1 i 4,5:1.
Elementy interfejsu i grafiki niosące znaczenie potrzebują kontrastu 3:1 względem otoczenia. Dotyczy to obramowania pola formularza i ikon bez tekstu obok.
Współczynnik liczy się z luminancji, a nie z tego, jak różne wydają się kolory. Dwa kolory o tej samej jasności, ale zupełnie innej barwie, na przykład czerwony (#ff0000) i zielony (#009400), dają współczynnik 1,00 i są nieczytelne, choć wyglądają inaczej.
Wymagania to minimum, a nie cel. Tekst o kontraście dokładnie 4,5:1 nadal męczy oczy w słońcu albo na słabym ekranie.
Jak liczy narzędzie
Każdy kanał jest dzielony przez 255 i linearyzowany: wartości do 0,04045 dzieli się przez 12,92, a większe wartości v zamienia na ((v + 0,055) / 1,055) do potęgi 2,4. Luminancja względna to 0,2126 R + 0,7152 G + 0,0722 B, a współczynnik to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to jaśniejszy kolor. Próg 0,04045 obowiązuje w WCAG od maja 2021 roku; wcześniej wynosił 0,03928, a W3C stwierdza, że zmiana nie ma praktycznego znaczenia. Dla kolorów HEX nie ma żadnego, bo żadna wartość kanału nie wypada między tymi progami: 10/255 to 0,0392, a 11/255 to 0,0431.
Przykład
#767676 na białym tle: kanał 118/255 = 0,463 po linearyzacji daje 0,181, a ponieważ wszystkie trzy kanały są równe, luminancja też wynosi 0,181. Współczynnik to (1 + 0,05) / (0,181 + 0,05) = 4,54, więc tekst podstawowy spełnia poziom AA. O jeden krok jaśniejszy #777777 daje 4,478 i już nie spełnia. Najjaśniejszy szary, który na białym tle spełnia AAA, czyli 7:1, to #595959 z wynikiem 7,0047; następny krok, #5a5a5a, daje 6,897.
Bez zaokrąglania
Objaśnienie W3C do kryterium sukcesu 1.4.3 mówi, że współczynnika nie należy zaokrąglać: 4,499:1 nie spełnia progu 4,5:1. Narzędzie ocenia wartość niezaokrągloną i obcina wynik zamiast go zaokrąglać. #0080aa na białym tle daje 4,4986 i nie spełnia wymogu dla tekstu podstawowego. Po zaokrągleniu byłoby to 4,50 obok oceny „Nie spełnia”, więc narzędzie pokazuje 4,49:1, a #777777 pokazuje jako 4,47:1.
Duży tekst, cienkie fonty i polskie przepisy
Próg dla dużego tekstu jest określony w punktach. Przy 1 pt = 1,333 piksela CSS 18 punktów to około 24 piksele, a 14 punktów około 18,5 piksela, według tego samego objaśnienia. Ostrzega ono też, że cienkie fonty mogą przez wygładzanie krawędzi wyglądać jaśniej niż ich kolor, więc tekst, który spełnia próg, w praktyce może mieć niski kontrast. Narzędzie pracuje tylko na pełnych kolorach HEX, bez przezroczystości i bez obrazu w tle.
W Polsce kryteria WCAG 2.1, w tym 1.4.3 Kontrast (minimum) i 1.4.11 Kontrast elementów nietekstowych, wymienia załącznik do ustawy z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Podmioty publiczne muszą spełniać te wymagania na swoich stronach i w aplikacjach (art. 5 ust. 1).