Contrast Checker

Wklej kolor pierwszego planu i tła (lub pobierz ze zrzutu ekranu); uzyskaj współczynnik kontrastu i informację, które poziomy WCAG spełnia. WCAG 2.1 AA to prawna podstawa dostępności w większości jurysdykcji; AAA to wyższy standard zalecany dla krytycznych treści.

Progi

• WCAG AA, tekst normalny: 4.5:1 minimum.
• WCAG AA, duży tekst (18pt+ lub 14pt+ pogrubiony): 3:1 minimum.
• WCAG AAA, tekst normalny: 7:1 minimum.
• WCAG AAA, duży tekst: 4.5:1 minimum.
• Komponenty interfejsu nietekstowe (przyciski, obramowania formularzy): 3:1 minimum (WCAG 2.1+).

Dlaczego kontrast ma znaczenie

Tekst o niskim kontraście jest nieczytelny dla użytkowników z niedowidzeniem (około 4% populacji), użytkowników w jasnym świetle słonecznym, użytkowników na tanich monitorach oraz starzejących się oczu (w końcu dotyczy wszystkich). Wiele systemów projektowania domyślnie używa szarości na szarości, ponieważ wygląda to elegancko na skalibrowanym wyświetlaczu 5K projektanta — i jest nieczytelne gdzie indziej.

Nieprzestrzeganie WCAG AA jest również prawnie egzekwowalne w USA (ADA Title III), UE (EAA) i wielu innych jurysdykcjach. Tanie ubezpieczenie: przetestuj każdą parę tekst/tło przez sprawdzacz przed wdrożeniem.

Co raportujemy

1. Współczynnik kontrastu jako liczba (np. 4.71:1).
2. Zaliczenie/niezaliczenie dla każdego poziomu WCAG i rozmiaru tekstu.
3. Sugerowane poprawki: najbliższy ciemniejszy kolor pierwszego planu lub jaśniejsze tło, które by zaliczyły.
4. Podgląd na żywo z przykładowym tekstem w danej parze kolorów.

Połącz z symulatorem ślepoty barw

Kontrast i ślepota barw to różne osie dostępności. Uruchom Color Blindness Simulator na tym samym interfejsie, aby sprawdzić, czy działa również dla użytkowników z CVD.