Czy mój tekst ma wystarczający kontrast? (WCAG)
Wpisujesz kolor tekstu i tła - tool wylicza ratio kontrastu (1:1 do 21:1) i pokazuje, czy spełnia poziomy AA / AAA dla małego tekstu, dużego tekstu i komponentów UI.
Plus pipeta z ekranu (Chrome/Edge) - próbkuj kolor z dowolnego elementu.
Na żywo widzisz, jak para wygląda - mały tekst, duży tekst, przyciski. Lokalnie - kolory nie wychodzą z przeglądarki.
Kluczowe dla dostępności (a11y) - WCAG 2.1 AA jest minimum dla większości regulacji (Section 508, EU Web Accessibility Directive, Ustawa o dostępności cyfrowej).
Jak korzystać
- Po prawej masz dwa pola: "Tekst" (foreground) i "Tło" (background). Każde przyjmuje HEX, RGB lub klik color-picker, plus opcjonalnie pipeta z ekranu.
- Środek pokazuje na żywo, jak para wygląda - mały tekst (15px), duży (28px), pełne zdanie pangram, oraz dwa przyciski (outline + solid).
- Pasek pod podglądem: ratio (np. "4.83:1") i 4 znaczki PASS/FAIL: AA-small (4.5:1), AAA-small (7:1), AA-large (3:1), AA-UI (3:1).
- Gdy AA-small fail (najczęstszy problem), pojawia się przycisk "Auto-popraw" - automatycznie ściemnia/rozjaśnia tekst w OKLCH (zachowuje odcień), aż osiągnie 4.5:1.
- "Zamień" zamienia foreground ↔ background - przydatne, gdy nie wiesz, w którą stronę poprawiać.
Do czego się przydaje
Gdzie sprawdzacz kontrastu działa najlepiej - typowe zastosowania:
- Audyty a11y / web design - AA-small 4.5:1 to standard dla zwykłego tekstu, AA-large 3:1 dla nagłówków, AA-UI 3:1 dla obramowań przycisków, ikon.
- Brand colors - sprawdź, czy Twoje kolory marki są używalne na różnych tłach.
- Light/dark mode - testuj kombinacje obu trybów.
- Email templates - Outlook słabo renderuje kolory. Wyższy kontrast = większa szansa, że tekst będzie czytelny.
- Print materiały - chociaż WCAG dotyczy ekranu, ratio 4.5:1+ jest też przydatne dla papieru.
- Edukacja - poznaj na czuję, czemu "delikatny" tekst (light gray na białym) zdaje 1.5:1 - ledwo widoczny.
Jeśli musisz przeliczyć kolor, który nie przechodzi, na inny format, użyj konwertera kolorów. Dla pełniejszej oceny dostępności sprawdź jeszcze, jak paleta wygląda w symulatorze daltonizmu (protanopia, deuteranopia, tritanopia).