Przejdź do treści

Kontrast kolorów — sprawdzanie WCAG (AA, AAA)

Sprawdź, czy tekst jest czytelny na danym tle: współczynnik kontrastu według WCAG 2, wymagania AA i AAA dla zwykłego i dużego tekstu oraz propozycja najbliższego koloru, który spełnia normę.

Duży tekst — nagłówek

Zwykły tekst akapitu, który musi być czytelny dla każdego, także dla osób słabowidzących.

Umieść to narzędzie na swojej stronie

Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

Strona demonstracyjna

Jak liczony jest kontrast

kontrast = (L1 + 0,05) ÷ (L2 + 0,05)

L1 i L2 to luminancja względna jaśniejszego i ciemniejszego koloru (od 0 dla czerni do 1 dla bieli), liczona ze składowych RGB z uwzględnieniem tego, jak oko odbiera zieleń, czerwień i niebieski. Wynik mieści się w zakresie od 1:1 (te same kolory) do 21:1 (czarny na białym).

Wymagania WCAG 2.1

ElementAAAAA
zwykły tekst4,5 : 17 : 1
duży tekst (≥ 24 px lub ≥ 18,66 px pogrubiony)3 : 14,5 : 1
elementy interfejsu i grafiki informacyjne3 : 1—

Poziom AA jest wymagany m.in. od stron i aplikacji instytucji publicznych (w Polsce ustawa o dostępności cyfrowej) oraz — od czerwca 2025 r. — od wielu usług objętych Europejskim aktem o dostępności, np. sklepów internetowych i bankowości.

Częste błędy

  • Jasnoszary tekst na białym tle — popularny #777777 ma kontrast 4,48:1 i minimalnie nie spełnia AA. #767676 już spełnia.
  • Biały tekst na jasnych kolorach marki (żółty, jasnozielony, pomarańczowy).
  • Tekst na zdjęciu — kontrast zmienia się w różnych miejscach obrazu; pomaga półprzezroczyste tło pod napisem.
  • Informacja przekazana tylko kolorem (np. czerwone pole błędu bez komunikatu).

Przykłady

Szary na białym

#777777 na #FFFFFF: 4,48:1 — nie spełnia AA dla zwykłego tekstu, spełnia dla dużego.

Czarny na białym

21:1 — maksymalny możliwy kontrast.

Najczęstsze pytania

Czy wysoki kontrast zawsze jest lepszy?

Do pewnego stopnia. Część osób (np. z dysleksją) lepiej czyta tekst ciemnoszary na złamanej bieli niż czysto czarny na białym. Ważne, by nie zejść poniżej minimum WCAG.

Co z trybem ciemnym?

Wymagania są te same — sprawdź każdą parę kolorów osobno w jasnym i ciemnym motywie.

Poradniki

Programowanie i tworzenie stronKontrast kolorów na stronie — wymagania WCAG i dostępność w praktyceCo oznacza kontrast 4,5:1, kogo obowiązują wymagania dostępności (także sklepy internetowe od 2025 r.) i jak poprawić kolory, nie psując wyglądu…Programowanie i tworzenie stronJak dobrać kolory na stronę internetowąProsty schemat kolor główny, akcent i neutralne tło, kontrast i tryb ciemny bez chaosu.Programowanie i tworzenie stronKolory w CSS: HEX, RGB, HSL i OKLCH — który zapis wybraćCo oznacza #1e88e5, jak działa przezroczystość w rgba, dlaczego projektanci lubią HSL, czym jest nowy zapis OKLCH i jak zbudować spójną paletę…Programowanie i tworzenie stronCienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciemJak cienie budują hierarchię na stronie, ile poziomów „wysokości” wystarczy, dlaczego dwa cienie wyglądają lepiej niż jeden, jak zachować cienie w…Zdjęcia, grafika i obrazyKolory ze zdjęcia i palety barw — jak dobrać kolory do projektuJak wyciągnąć kolory ze zdjęcia, czym różnią się zapisy HEX, RGB i HSL, jak zbudować spójną paletę (barwy dopełniające, analogiczne, triada) i jak…Programowanie i tworzenie stronSzybka makieta strony — rem, gradienty, placeholdery i Lorem ipsumZestaw prostych narzędzi do budowania prototypu strony: jednostki rem zamiast pikseli, gradienty CSS bez grafik, obrazki zastępcze i tekst testowy…

Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.