Przejdź do treści głównej
Granty do $15 000/rok dla mediów

Darmowe narzędzie

Sprawdźanie kontrastu kolorów

Sprawdź, czy kombinacja kolorów Twojej strony spełnia standardy WCAG 2.1/2.2.

Współczynnik kontrastu

6.29:1

Podgląd

Przykładowy tekst na Twoim tle

WCAG 2.1/2.2 — Web Content Accessibility Guidelines

Rozmiar tekstuAA (minimum)AAA (ulepszony)
Zwykły tekstZaliczonyNiezaliczony
Duży tekst (18px+ bold)ZaliczonyZaliczony

WCAG 2.1 Kryterium 1.4.3 (AA): minimum 4.5:1 dla tekstu, 3:1 dla dużego tekstu.

Zrozumieć kontrast kolorów

Współczynnik kontrastu mierzy różnicę jasności między tekstem a tłem — od 1:1 (brak kontrastu) do 21:1 (czarny na białym). Zbyt niski kontrast to najczęstszy błąd WCAG w sieci i sprawia, że treść jest nieczytelna dla osób słabowidzących, z daltonizmem lub korzystających z telefonu w słońcu. Spełnienie progów kontrastu WCAG to podstawowy wymóg europejskiego aktu o dostępności (EAA), ustawy o dostępności cyfrowej i normy EN 301 549.

Jak korzystać z testera kontrastu

Wybierz lub wklej kolor tekstu i kolor tła. Narzędzie natychmiast oblicza współczynnik kontrastu WCAG i pokazuje, czy para spełnia poziom AA i AAA dla tekstu normalnego i dużego. Dostosuj kolory, aż wszystkie testy przejdą, i użyj tych wartości w swoim CSS.

Najczęstsze pytania o kontrast

Jaki współczynnik kontrastu jest wystarczający według WCAG?

Dla WCAG 2.1/2.2 poziom AA potrzebujesz co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla dużego (24px lub 18,66px pogrubiony). Poziom AAA podnosi te wartości do 7:1 i 4,5:1.

Jaka jest różnica między WCAG AA a AAA?

AA to standardowy poziom wymagany przez większość przepisów (EAA, ustawa o dostępności cyfrowej, EN 301 549). AAA to poziom podwyższony dla najwyższej czytelności. Dąż do AA wszędzie i AAA tam, gdzie to możliwe.

Czy reguła kontrastu dotyczy dużego tekstu?

Tak, ale z niższym progiem. Tekst od 24px (lub 18,66px pogrubiony) na poziomie AA wymaga tylko 3:1 (4,5:1 na AAA).

Czy ikony i elementy interfejsu też wymagają kontrastu?

Tak. WCAG 1.4.11 wymaga kontrastu 3:1 dla interaktywnych elementów interfejsu (przyciski, obramowania pól, stany fokusu) oraz istotnych grafik.

Czy ten tester kontrastu jest darmowy?

Tak — narzędzie działa całkowicie w przeglądarce, nie wymaga rejestracji i jest darmowe dla nieograniczonej liczby sprawdzeń.

Spraw, aby Twoja strona była dostępna w 3 minuty

7 dni za darmo. Wszystkie 3 produkty. Bez karty kredytowej. Natychmiastowe rezultaty.

Sprawdzanie kontrastu kolorów — WCAG | InclusiveWeb