Sprawdzarka Macierzy Kontrastu Kolorów

Dlaczego sprawdzać wszystkie kombinacje kolorów naraz, a nie jedną po drugiej?

Wytyczne dostępności WCAG wymagają minimalnego współczynnika kontrastu między tekstem a tłem — w przeciwnym razie użytkownicy z niedowidzeniem lub daltonizmem mogą nie być w stanie odczytać tekstu. W praktyce większość witryn łączy kilka kolorów marki, kolorów tła i kolorów statusu — nagłówek w kolorze głównym na jasnoszarej karcie, kolor ostrzegawczy na białym tle, ciemny tekst na kolorowym tle — a sprawdzanie każdej kombinacji ręcznie łatwo prowadzi do błędów lub przeoczeń. To narzędzie pozwala wkleić wszystkie faktycznie używane kolory i natychmiast oblicza współczynnik kontrastu dla każdej możliwej pary, przedstawiony jako jedna macierz — nie trzeba już sprawdzać kombinacji jedna po drugiej.

Jak obliczany jest współczynnik — konkretny przykład

WCAG 2.1 definiuje współczynnik kontrastu jako (L1 + 0,05) / (L2 + 0,05), gdzie L1 i L2 to względna jasność dwóch kolorów (wyższa wartość oznacza bliżej białego). Czysta czerń #000000 wobec czystej bieli #FFFFFF daje idealne 21:1, ale jasny szary #999999 wobec bieli daje tylko 2,85:1 — znacznie poniżej minimum 4,5:1 wymaganego dla zwykłego tekstu. Zwykły tekst (poniżej 18px lub poniżej 14px pogrubiony) wymaga AA ≥ 4,5:1, lub AAA ≥ 7:1 dla bardziej rygorystycznego standardu; duży tekst (18px+ pogrubiony lub 24px+) ma niższy próg AA ≥ 3:1.

Jak czytać macierz wyników

Każda komórka macierzy pokazuje współczynnik kontrastu między kolorem danego wiersza a kolorem danej kolumny, oznaczony kolorem: zielonym (spełnia AAA), żółtym (spełnia tylko AA) lub czerwonym (nie spełnia) — dzięki temu od razu widać problematyczne kombinacje, bez ręcznego liczenia każdej z nich.

Kontrast jest obliczany wyłącznie na podstawie wartości RGB każdego koloru — nie uwzględnia grubości czcionki, wygładzania (anti-aliasing) ani półprzezroczystych nakładek w rzeczywistym renderowaniu. Zawsze sprawdź jeszcze raz na rzeczywistym urządzeniu przed publikacją.