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. Niezbędne przed wdrożeniem przycisków, linków i etykiet formularzy — wiele palet marki nie przechodzi, dopóki nie przyciemnisz tekstu lub rozjaśnisz tła.
Kolor tekstu
Kolor tła
Aa Bb Cc — 123
Wynik
16.12 : 1
AA — OK
AA (duży tekst) — OK
AAA — OK
AAA (duży tekst) — OK
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.
Kiedy lepiej wybrać coś innego
• Gdy potrzebujesz audytu całej strony — użyj skanerów na wyrenderowanym DOM.
• Gdy tło to obraz lub gradient — próbkuj najgorsze piksele.
• Gdy symulujesz daltonizm — dedykowane symulatory widzenia.
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.
Naprawa bez rebrandingu
Jeśli fiolet marki nie przechodzi na białym, nie zmieniaj odcienia — przyciemnij foreground o 5–10% jasności HSL albo używaj fioletu tylko na dużych nagłówkach. Placeholder musi spełniać kontrast (4,5:1), nie tylko wpisywane wartości. Stany disabled mogą być zwolnione ze ścisłego kontrastu tekstu, ale nie powinny przenosić krytycznej informacji samym kolorem. Łącz tester z konwerterem kolorów do szybkiej iteracji HSL.
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.
Czy dane są wysyłane na serwer?
Nie.
Czy narzędzie jest darmowe?
Tak.