Kontrast kolorów

Wybierz kolor tekstu i tła, a zobaczysz, czy tekst jest czytelny według norm dostępności WCAG - i jak poprawić kolor, jeśli nie jest.

Kolor tekstu

Kolor tła

–:1

Duży nagłówek

Zwykły tekst akapitu - tak wygląda większość treści na stronie.

Przycisk

AA · zwykły tekst
AA · duży tekst
AAA · zwykły tekst
AAA · duży tekst
AA · ikony i obramowania

Wszystko dzieje się w Twojej przeglądarce - nic, co tu wpiszesz, nie trafia na żaden serwer.

Jak to działa

Co oznaczają AA i AAA

WCAG to międzynarodowe wytyczne dostępności stron. Poziom AA wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego (od 24 px albo 19 px pogrubionego) - to standard, którego wymaga prawo m.in. od stron instytucji publicznych, a od czerwca 2025 roku także od wielu sklepów internetowych (z wyjątkiem mikrofirm). AAA to poziom wyższy: 7:1 i 4,5:1.

Jak poprawić kontrast, nie zmieniając marki

Przyciski „Popraw do AA/AAA” szukają najbliższego koloru o tym samym odcieniu - tylko jaśniejszego lub ciemniejszego - który spełnia wymaganie. Dzięki temu tekst zostaje „w kolorach firmy”, a staje się czytelny także dla osób słabowidzących i na telefonie w pełnym słońcu.

Najczęstsze pytania

Jaki kontrast jest wystarczający?

Dla zwykłego tekstu co najmniej 4,5:1 (WCAG AA). Czarny na białym to 21:1, a jasnoszary #999 na białym tylko 2,8:1 - za mało.

Czy kontrast wpływa na SEO?

Pośrednio tak: Google ocenia stronę także pod kątem dostępności (np. w raporcie Lighthouse), a czytelna strona to dłuższe wizyty i mniej rezygnacji.

Jakie formaty kolorów mogę wpisać?

HEX (#bc3b00 lub skrócony #fff) albo rgb(188, 59, 0). Możesz też wybrać kolor z próbnika.