Sprawdzanie kontrastu

Sprawdzaj kontrasty WCAG dla dostępnych kombinacji kolorów

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large bold text (24px) — Example heading

—
Contrast ratio
AA Normal
—
≥ 4.5:1
AA Large
—
≥ 3:1
AAA Normal
—
≥ 7:1
AAA Large
—
≥ 4.5:1
Twoje pliki nigdy nie opuszczają przeglądarki. Nic nie jest wysyłane na żaden serwer. Polityka prywatności

Zweryfikuj, czy Twój tekst spełnia wymagania kontrastu WCAG 2.1. Wybierz dwa kolory i zobacz natychmiast współczynnik kontrastu oraz status AA/AAA dla zwykłego i dużego tekstu. Dostosowuj kolory, aż osiągniesz wymagany poziom.

Jak sprawdzać kontrast WCAG

1
Wybierz kolory

Użyj pickerów lub wklej HEX dla tła i tekstu.

2
Sprawdź współczynnik

Współczynnik aktualizuje się natychmiast z odznakami AA/AAA.

3
Dostosuj jeśli nie zdaje

Zmieniaj jasność kolorów, aż osiągniesz wymagany kontrast.

✅
WCAG AA i AAA

Testuj zarówno AA (4.5:1) jak i AAA (7:1) dla zwykłego i dużego tekstu.

🎯
Podgląd na żywo

Podgląd tekstu w czasie rzeczywistym z wybranymi kolorami.

🎨
Łatwe dopasowanie

Zmieniaj kolory pickerem, aż kontrast osiągnie cel.

🔢
Dokładny współczynnik

Zobacz dokładny współczynnik (np. 4.7:1) na potrzeby audytów.

FAQ

WCAG (Web Content Accessibility Guidelines) definiuje minimalne współczynniki kontrastu, aby tekst pozostał czytelny dla użytkowników z wadami wzroku.

AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego. AAA to surowsze 7:1 dla zwykłego i 4.5:1 dla dużego.

Tekst 18pt+ (24px) regular lub 14pt+ (18.66px) bold. Większy tekst potrzebuje mniejszego kontrastu, bo kształty są łatwiejsze do rozpoznania.

Obecnie tylko kolory nieprzezroczyste. Zawsze testuj przeciwko rzeczywistemu kolorowi po nałożeniu tła.

Wiele palet marki powstało przed standardami dostępności. Użyj ciemniejszego/jaśniejszego wariantu do tekstu i zachowaj kolor marki na akcenty.

Więcej darmowych narzędzi

🎨
Konwerter kolorów

Konwertuj kolory między HEX, RGB, HSL, HSV i CMYK
🎭
Generator palety kolorów

Generuj harmonijne palety — komplementarne, triadyczne, analogiczne, monochromatyczne
🌈
Generator gradientów CSS

Generuj piękne gradienty liniowe i radialne CSS z podglądem na żywo
👁
Symulator daltonizmu

Podglądaj obrazy i kolory tak, jak widzą je osoby z wadami widzenia barw
🖼️
JPG na PNG

Konwertuj obrazy JPG do formatu PNG natychmiastowo w przeglądarce
📦
Kompresor obrazów

Kompresuj obrazy JPG, PNG i WebP bez utraty jakości