Sprawdzanie kontrastu kolorów

Wybierz kolor tekstu i kolor tła, aby sprawdzić, czy Twój projekt jest czytelny i dostępny. Podamy współczynnik kontrastu, informację, czy spełnia poziomy AA i AAA wytycznych WCAG, a jeśli nie – najbardziej podobny kolor tekstu, który je spełnia.

Tekst i tło

Akceptuje HEX, rgb(), hsl(), oklch() lub nazwy CSS. Półprzezroczysty tekst jest mieszany z tłem.

Przykładowy duży tekst

To jest tekst normalnej wielkości. Dostępność stron internetowych oznacza, że każdy, także osoba słabowidząca lub z daltonizmem, może czytać Twoją stronę i z niej korzystać.

Przycisk

Współczynnik kontrastu

Zwykły tekst (4,5:1) AA
Zwykły tekst (7:1) AAA
Duży tekst (3:1) AA
Duży tekst (4,5:1) AAA
Ikony i komponenty (3:1) AA

Czym jest współczynnik kontrastu?

Współczynnik kontrastu porównuje względną luminancję dwóch kolorów i wynosi od 1:1 (ten sam kolor) do 21:1 (czarny na białym). Definiują go wytyczne dostępności WCAG 2 konsorcjum W3C i jest punktem odniesienia dla przepisów o dostępności (w Polsce ustawy o dostępności cyfrowej i europejskiej normy EN 301 549) oraz narzędzi takich jak Lighthouse.

Poziomy AA i AAA

AA to poziom wymagany zazwyczaj: 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (od 24 px lub 18,66 px pogrubionego). AAA to poziom rozszerzony: odpowiednio 7:1 i 4,5:1. Ikony, obramowania pól formularzy i inne komponenty interfejsu potrzebują co najmniej 3:1 względem otaczających je kolorów.

Logotypy oraz tekst czysto dekoracyjny lub nieaktywnych elementów są zwolnione z tego wymogu.

Jak poprawić kontrast

Prawie zawsze wystarczy przyciemnić tekst (lub rozjaśnić go na ciemnym tle) bez zmiany odcienia: dlatego proponujemy ten sam kolor z inną jasnością, obliczoną w przestrzeni OKLCH, aby zmiana była jak najmniejsza. Unikaj jasnoszarego tekstu na białym tle oraz tekstu na zdjęciach bez ciemnej warstwy pośredniej.