Tester kontrastu WCAG
Testuj dowolną parę kolorów pierwszoplanu i tła pod kątem współczynnika kontrastu WCAG 2.1 (1 do 21). Zobacz pass/fail dla poziomów AA i AAA, dla normalnego tekstu, dużego (18pt+ lub 14pt bold) i komponentów UI.
Jak sprawdzić kontrast kolorów
1. Wpisz lub wybierz kolor tekstu (foreground) i tła (background).
2. Odczytaj współczynnik kontrastu (np. 4,52:1).
3. Sprawdź wiersze AA i AAA dla normalnego i dużego tekstu.
4. Koryguj jasność HSL, aż wymagany poziom przejdzie, potem skopiuj hex.
Przykłady testu kontrastu
Tekst body #374151 na #FFFFFF
Współczynnik ok. 8,9:1 — przechodzi AAA dla normalnego tekstu (wymagane 7:1). Wygodne długie czytanie.
Jasnoszary #9CA3AF na białym
Współczynnik ok. 2,6:1 — nie przechodzi AA dla normalnego (wymagane 4,5:1). Typowy błąd placeholdera.
Przycisk primary biały na #2563EB
Współczynnik ok. 4,6:1 — przechodzi AA normalny; przyciemnij niebieski dla AAA albo używaj tylko przy dużym tekście.
Kiedy warto użyć tego narzędzia
• Gdy audytujesz tokeny design systemu przed release.
• Gdy naprawiasz findings z Lighthouse lub axe.
• Gdy wybierasz kolory linków, które muszą różnić się od body text, nie tylko odcieniem.
Poziomy WCAG 2.1 wyjaśnione
Poziom A to minimum; AA to cel prawny w wielu jurysdykcjach (ADA, EAA sektor publiczny). AAA aspiracyjnie dla body copy — duże nagłówki łatwiej przejdą AAA niż podpisy 14px. Widoczny focus (2.4.7) uzupełnia kontrast — użytkownicy klawiatury potrzebują pierścieni focus, często 3:1 względem sąsiednich kolorów. Dokumentuj pass/fail w design systemie przy każdej parze tokenów.
Najczęstsze pytania
Jaki współczynnik kontrastu dla WCAG AA normalnego tekstu?
Co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego (18pt+ lub 14pt bold).
A dla AAA?
7:1 normalny tekst, 4,5:1 duży — surowsze, często w sektorze publicznym.
Czy komponenty UI też muszą mieć kontrast?
WCAG 2.1 wymaga 3:1 dla obiektów graficznych i granic komponentów UI (1.4.11).
Jak liczony jest współczynnik?
Na podstawie względnej luminancji kolorów sRGB: (L1 + 0,05) / (L2 + 0,05), gdzie L1 jaśniejszy.
Czy podkreślenie naprawia słaby kontrast linków?
Nie — kontrast nadal wymagany. Podkreślenia pomagają jako cue poza kolorem, ale nie zastępują reguł współczynnika.