Sprawdzacz kontrastu
Sprawdź kontrast dla WCAG
Jak używać Sprawdzacz kontrastu
Sprawdź kontrast dla WCAG Darmowe narzędzie online, bez rejestracji, bez nachalnych reklam. Użyj teraz.
Dlaczego kontrast kolorów jest ważny?
Około 8% mężczyzn i 0,5% kobiet w Polsce ma jakąś formę daltonizmu. Jeszcze więcej osób czyta tekst w trudnych warunkach (jasne słońce, słabe ekrany, zmęczenie wzroku, pogorszenie wzroku z wiekiem). Odpowiedni kontrast kolorów zapewnia czytelność treści dla wszystkich użytkowników.
- Zgodność ze standardami dostępności: WCAG 2.1 (Web Content Accessibility Guidelines) określa minimalne współczynniki kontrastu. Polskie prawo (Ustawa o dostępności cyfrowej z 2019 r.) nakłada na instytucje publiczne obowiązek spełnienia standardu WCAG 2.1 AA — dotyczy stron rządowych, urzędów, szkół i szpitali.
- Weryfikacja na etapie projektu: Sprawdzaj kombinacje kolorów tekstu i tła w Figma lub Sketch przed rozpoczęciem developmentu. Poprawka na etapie projektu jest nieporównanie tańsza niż po wdrożeniu.
- Biblioteki komponentów: Upewnij się, że wszystkie kombinacje kolorów w systemie projektowania spełniają wymagania dostępności w każdym kontekście użycia.
- Tryb ciemny: Przy wdrażaniu dark mode kolory działające na jasnym tle często nie przechodzą testu na ciemnym. Sprawdzaj każdy tryb niezależnie.
- Wizualizacja danych: Sprawdź, czy kolory na wykresach są rozróżnialne dla osób z daltonizmem i czytelne na różnych tłach.
Poziomy WCAG: AA (współczynnik ≥4,5:1 dla normalnego tekstu, ≥3:1 dla dużego) — wymaganie większości przepisów prawnych i standard dla komercyjnych stron internetowych w Polsce. AAA (≥7:1) — maksymalna dostępność dla treści o dużym natężeniu.
Jakiego współczynnika kontrastu wymaga WCAG AA?
WCAG AA wymaga minimum 4,5:1 dla normalnego tekstu (poniżej 18pt lub 14pt pogrubiony) i 3:1 dla dużego tekstu (18pt i więcej lub 14pt pogrubiony i więcej). Dla komponentów UI i elementów graficznych (ikony, obramowania formularzy) — również 3:1.
Jak oblicza się współczynnik kontrastu?
Współczynnik = (L1 + 0,05) / (L2 + 0,05), gdzie L1 to względna luminancja jaśniejszego koloru, L2 — ciemniejszego. Maksymalny kontrast: 21:1 (czerń na bieli). Współczynnik 1:1 oznacza brak kontrastu (identyczne kolory).
Czy kontrast kolorów różni się od daltonizmu?
Współczynnik kontrastu mierzy różnicę luminancji wpływającą na wszystkich użytkowników. Daltonizm wpływa na rozróżnianie kolorów, niekoniecznie luminancji. Projekt z wysokim kontrastem czerwono-zielonym może przejść test luminancji, ale być nierozróżnialny dla osób z deuteranomalią.
Czy grubość czcionki wpływa na wymagania kontrastu?
Tak. Pogrubiony i duży tekst jest z natury bardziej czytelny, więc wymagania są niższe. WCAG AA wymaga 3:1 dla tekstu 18pt (24px) i więcej lub 14pt (ok. 18,67px) pogrubionego i więcej. Dla małego lub niepogrubionego tekstu wymagane jest 4,5:1.
Co to jest ustawa o dostępności cyfrowej w Polsce?
Ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych implementuje dyrektywę UE i nakłada obowiązek spełnienia standardu WCAG 2.1 AA. Dotyczy wszystkich instytucji publicznych. Strony publiczne muszą też publikować deklarację dostępności i zapewniać alternatywny dostęp do treści.
Sprawdzanie kontrastu vs symulator daltonizmu vs audyt dostępności
Sprawdzanie kontrastu weryfikuje współczynnik luminancji między dwoma kolorami. Symulator daltonizmu (DevTools Chrome, Coblis) pokazuje jak projekt wygląda przy różnych wadach wzroku. Pełny audyt dostępności (axe, Lighthouse, WAVE) skanuje całą stronę pod kątem wszystkich naruszeń WCAG. Dla pełnej dostępności: sprawdzaj kontrast na etapie projektu, symuluj daltonizm przed publikacją, uruchamiaj zautomatyzowany audyt na produkcyjnej stronie.