PL

Sprawdzanie kontrastu kolorów (WCAG 2.2)

Wpisz lub wybierz kolor tekstu i kolor tła. Narzędzie oblicza luminancję względną obu kolorów i współczynnik kontrastu dokładnie według definicji W3C oraz pokazuje, które kryteria sukcesu WCAG 2.2 są spełnione. Jeśli kontrast jest za niski, proponuje najbliższy kolor tekstu, który przechodzi test.

HEX, rgb(), hsl() … – działa też przezroczystość
Wpisane dane są zapisywane tylko w tej przeglądarce.

Podgląd

Zwykły tekst: tak czyta się akapit przy czcionce 16 pikseli.

Duży tekst od 24 px

Pogrubiony tekst od 18,67 px

Przycisk

Podgląd w Twoich kolorach: 16 px zwykły, 24 px zwykły i 18,67 px pogrubiony (= 14 pt pogrubiony, duży tekst), a pod spodem ramka i ikona jako przykład elementu interfejsu.

Wynik

Współczynnik kontrastu
4,48 : 1
Ocena WCAG 2.2
KryteriumMinimumWynik
Zwykły tekst – AA (SC 1.4.3)4,5 : 1✗ nie spełnia
Zwykły tekst – AAA (SC 1.4.6)7 : 1✗ nie spełnia
Duży tekst – AA (SC 1.4.3)3 : 1✓ spełnia
Duży tekst – AAA (SC 1.4.6)4,5 : 1✗ nie spełnia
Elementy interfejsu i grafika – AA (SC 1.4.11)3 : 1✓ spełnia
Najbliższy kolor tekstu dla AA (4,5:1)
#767676 (4,54 : 1)
Najbliższy kolor tekstu dla AAA (7:1)
#595959 (7,00 : 1)
Luminancja względna – kolor tekstu
0,1845 (#777777)
Luminancja względna – tło
1,0000 (#FFFFFF)

Jak to obliczamy

Jak obliczany jest kontrast

WCAG 2.2 definiuje współczynnik kontrastu jako (L1 + 0,05) ÷ (L2 + 0,05), gdzie L1 to luminancja względna jaśniejszego koloru, a L2 – ciemniejszego. Wynik mieści się między 1:1 (identyczne kolory) a 21:1 (czarny na białym).

Narzędzie oblicza luminancję względną dokładnie według definicji W3C: każdy kanał sRGB jest dzielony przez 255 i linearyzowany – wartości do 0,04045 dzieli się przez 12,92, większe przekształca się wzorem ((wartość + 0,055) ÷ 1,055)2,4. Następnie L = 0,2126 × R + 0,7152 × G + 0,0722 × B.

Przykład #777777 na białym: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Wszystkie trzy kanały są równe, więc L = 0,1845. Biel ma L = 1. Kontrast = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. To wystarcza dla dużego tekstu (3:1), ale minimalnie za mało dla zwykłego tekstu (4,5:1). Proponowany #767676 osiąga 4,54:1.

Wymagania WCAG 2.2

Kryterium sukcesuPoziomZwykły tekstDuży tekst
1.4.3 Kontrast (minimalny)AA4,5:13:1
1.4.6 Kontrast (wzmocniony)AAA7:14,5:1
1.4.11 Kontrast elementów nietekstowych (interfejs, grafika)AA3:1

Według WCAG duży tekst ma co najmniej 18 punktów albo co najmniej 14 punktów przy pogrubieniu – w przeglądarce to ok. 24 px i 18,67 px. Wyjątki obejmują m.in. logotypy, tekst czysto dekoracyjny i nieaktywne elementy sterujące.

Bez zaokrąglania

WCAG porównuje dokładną wartość: 4,499:1 nie spełnia progu 4,5:1. Dlatego narzędzie ocenia niezaokrąglony współczynnik i wyświetla dwa miejsca po przecinku; tam, gdzie zaokrąglenie pozornie osiągałoby próg, wartość jest obcinana (4,49 zamiast 4,50).

Kolory przezroczyste

Kolory z kanałem alfa (np. rgba(0, 0, 0, 0.6) lub #00000099) są nakładane tak, jak rysuje je przeglądarka: przezroczyste tło na biel, przezroczysty kolor tekstu na tło. Jeśli Twoja strona leży na innym podłożu, wpisz ten kryjący kolor jako tło.

Najczęściej zadawane pytania

Jaki kontrast kolorów wymaga WCAG?

Co najmniej 4,5:1 dla zwykłego tekstu (poziom AA, SC 1.4.3) i 3:1 dla dużego tekstu. Surowszy poziom AAA wymaga odpowiednio 7:1 i 4,5:1. Elementy sterujące, takie jak ramki pól i ikony, potrzebują 3:1 (SC 1.4.11).

Które odcienie szarości na białym tle spełniają AA?

#767676 to najjaśniejszy szary z kontrastem co najmniej 4,5:1 na białym (4,54:1). #777777 z wynikiem 4,48:1 minimalnie nie spełnia progu.

Jak sprawdzić kontrast kolorów na stronie?

Odczytaj kolor tekstu i tła, np. narzędziami deweloperskimi przeglądarki (próbnik koloru), i wpisz oba kolory powyżej. Narzędzie od razu pokaże współczynnik kontrastu i ocenę AA/AAA.

Jak narzędzie dobiera proponowany kolor?

Zachowuje odcień i nasycenie koloru tekstu i zmienia tylko jasność HSL małymi krokami – w stronę jaśniejszą i ciemniejszą. Proponuje najmniejszą zmianę, przy której zaokrąglony kolor bezpiecznie osiąga cel.

Które przepisy odwołują się do tych wartości kontrastu?

W Unii Europejskiej zharmonizowana norma EN 301 549, na którą powołują się przepisy o dostępności – w tym Europejski akt o dostępności (EAA) – odsyła do WCAG 2.1 AA. Kryteria kontrastu są w WCAG 2.0, 2.1 i 2.2 takie same: 4,5:1 dla tekstu, 3:1 dla dużego tekstu, a od WCAG 2.1 także 3:1 dla elementów interfejsu.

Źródła i podstawa prawna

Stan na:

Podobne narzędzia