Sprawdzanie kontrastu WCAG
Sprawdź kontrast kolorów tekstu i tła pod kątem WCAG 2.1 (AA i AAA). Podgląd na żywo, sugestia koloru. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćSprawdzanie kontrastu WCAG – AA i AAA dla dostępności
Kontrast kolorów to kluczowy wymóg dostępności (WCAG). Niski kontrast sprawia, że tekst jest nieczytelny dla osób z niedowidzeniem, daltonizmem lub czytaniem w słonecznym świetle. Narzędzie sprawdza parę kolor tekstu / kolor tła i ocenia zgodność z WCAG 2.1.
WCAG 2.1 – poziomy kontrastu
AA (minimum): tekst normalny (< 18px lub <14px bold) ≥ 4.5:1. Tekst duży (≥ 18px lub ≥ 14px bold) ≥ 3:1. Komponenty UI i grafikę informacyjną ≥ 3:1. AAA (zwiększone): tekst normalny ≥ 7:1. Tekst duży ≥ 4.5:1. Poziom AAA: zalecany dla treści krytycznych (instrukcje medyczne, formularze prawne).
Jak obliczany jest kontrast
Relative luminance (L): L = 0.2126R + 0.7152G + 0.0722B (po linearyzacji gamma). Kontrast ratio = (L1+0.05)/(L2+0.05) gdzie L1 > L2. Wynik: 1:1 (brak kontrastu) do 21:1 (biały na czarnym). Narzędzie oblicza automatycznie dla dowolnej pary HEX/RGB/HSL.
Najczęstsze błędy kontrastu
Szary tekst na białym tle: #999999 na #FFFFFF = 2.85:1 (fail). Jasnoniebieski link na białym: #74B9FF = 2.4:1 (fail). Żółty tekst na białym: prawie zawsze fail. Placeholder input: często za jasny (wielu deweloperów nie sprawdza placeholderów). Disabled states: WCAG zwalnia z wymogu dla wyłączonych elementów.
Wskazówki przy doborze kolorów
Ciemny tekst na jasnym tle: łatwiej osiągnąć wysokie ratio. Lekko ciemniejszy primary: #0060DF zamiast #0085FF – lepszy kontrast przy zachowanym kolorze. Tryb ciemny: biały tekst na ciemnym tle – sprawdź osobno. Narzędzie sugeruje automatycznie najbliższy kolor spełniający AA.
Najczęstsze pytania
Czy WCAG jest obowiązkowe prawnie?
W Polsce: Ustawa o dostępności cyfrowej (2019, implementacja dyrektywy UE 2016/2102) obowiązuje podmioty publiczne. W UE: European Accessibility Act (2022) rozszerzy wymóg na sektor prywatny (e-commerce) od 2025. USA: Section 508 (rząd), ADA (firmy). Prywatne strony komercyjne w Polsce: brak bezpośredniego obowiązku, ale narażenie na skargi.
Czy kontrast 4.5:1 to dużo?
Dla kontekstu: biały na czarnym = 21:1. Biały na ciemno szarym #767676 = 4.48:1 (prawie AA). Czarny na żółtym #FFFF00 = 19.1:1. Ciemnoniebieska navy na białym: ~12-15:1. Dla zwykłego projektu: 4.5:1 jest osiągalne bez rezygnacji z designu, trzeba tylko sprawdzić.
Jak testować kontrast na całej stronie?
axe DevTools (rozszerzenie Chrome): skanuje całą stronę. WAVE (web accessibility evaluation tool): visual overlay z błędami. Lighthouse: audyt dostępności w Chrome DevTools. Pa11y: CLI tool. Storybook: a11y addon testuje komponenty. Automated testing: 30-40% WCAG issues – resztę trzeba sprawdzić manualnie.
Jak kontrast wpływa na SEO?
Google nie mierzy bezpośrednio kontrastu jako czynnik rankingowy. Ale: niska dostępność = wyższy bounce rate = negatywny sygnał UX. Google Mobile-Friendly Test i PageSpeed mogą flagować problemy dostępności. Core Web Vitals: nie kontrast, ale ogólna jakość UX.
Czy animowany tekst musi spełniać kontrast?
WCAG 1.4.3 (kontrast): dotyczy tekstu "prezentowanego jako tekst" – animacje HTML/CSS podlegają. Tekst na filmach i materiałach video: WCAG 1.4.3 nie dotyczy bezpośrednio, ale WCAG 1.2.2 (napisy) tak. WCAG 2.3.1 (błyski): animowane treści mogą powodować napady – limit 3 błyski/sekundę.
Powiązane narzedzia: konwerter HEX na HSL, tester schematow kolorow i generator triadycznych schematow.