Czym jest narzędzie do sprawdzania kontrastu i dlaczego warto go używać?

Dostępność i użyteczność

Odpowiedni kontrast poprawia czytelność dla wszystkich — szczególnie dla osób z wadami wzroku, zaburzeniami widzenia barw lub korzystających z ekranów o niskiej jakości.

Wymagania WCAG 2.1

Sprawdź kryteria 1.4.3 Kontrast (minimum), 1.4.6 Kontrast (rozszerzony) oraz 1.4.11 Kontrast elementów nietekstowych dla komponentów UI i grafik.

EAA / EN 301 549

Europejski Akt o Dostępności (EAA) odwołuje się do normy EN 301 549, która z kolei opiera się na WCAG — kontrast jest kluczowym elementem spełnienia wymogów.

Marka i jakość projektu

Dostępne palety kolorów tworzą trwałe, czytelne interfejsy działające w trybie jasnym i ciemnym oraz na różnych urządzeniach.

Progi kontrastu WCAG 2.1 (szybka ściąga)

Zwykły tekst
AA

Minimalny współczynnik: 4.5:1 (tekst poniżej 24 px regularny / 19 px pogrubiony).

Duży tekst
AA

Minimalny współczynnik: 3:1 (≥ 24 px regularny lub ≥ 19 px pogrubiony).

Elementy interfejsu i grafiki
1.4.11

Minimalny kontrast z sąsiednimi kolorami: 3:1 (pierścienie fokusu, pola formularzy, ikony itp.).

Wypróbuj narzędzie do sprawdzania kontrastu

Wprowadź kolory pierwszego planu i tła (HEX). Narzędzie obliczy współczynnik kontrastu i pokaże wynik zaliczenia/niezaliczenia dla poziomów WCAG. Wyniki aktualizują się w czasie rzeczywistym.

FAQ

Czy WCAG 2.2 zmienia progi kontrastu?
Nie, wartości progowe pozostają takie same jak w WCAG 2.1 (4.5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu, 3:1 dla elementów nietekstowych).
Czy EAA wymaga spełnienia wymogów kontrastu WCAG?
Tak. EN 301 549 (odwołująca się do EAA) obejmuje wymagania WCAG 2.1, w tym kontrast kolorów dla tekstu i elementów nietekstowych.
Co kwalifikuje się jako „duży tekst”?
Co najmniej 18 pt (24 px) w wadze normalnej lub 14 pt (19 px) pogrubiony — kwalifikuje się do progu 3:1.

Uczyń sprawdzanie kontrastu częścią swojego procesu pracy

Uruchamiaj testy kontrastu podczas przeglądów projektów i code review. Połącz je z automatycznym skanowaniem, aby wykrywać problemy na dużą skalę.

Wypróbuj skaner dostępnościPobierz darmowy widżet dostępności