Kontroler Kontrastu Kolorów

Jak to działa

Wybierz kolor pierwszego planu i tła używając próbników lub wpisz wartości hex bezpośrednio. Narzędzie oblicza względną luminancję każdego koloru według formuły WCAG 2.1 — ważoną sumę kanałów sRGB po dekodowaniu gamma — i dzieli jaśniejszą luminancję przez ciemniejszą (plus 0,05 w liczniku i mianowniku, aby uniknąć dzielenia przez zero dla czystej czerni). Wynikowy współczynnik kontrastu wynosi od 1:1 (identyczne kolory) do 21:1 (czysta czerń na czystej bieli). Cztery odznaki WCAG pokazują zaliczenie lub niezaliczenie: AA dla tekstu normalnego (≥ 4,5:1), AA dla tekstu dużego (≥ 3:1), AAA dla tekstu normalnego (≥ 7:1) i AAA dla tekstu dużego (≥ 4,5:1). Panel podglądu pokazuje przykładowe zdania w tekście normalnym i dużym do wizualnej weryfikacji. Obliczenia odbywają się całkowicie w przeglądarce bez wywołań serwera.

Przypadki użycia

• Sprawdzenie palety kolorów marki pod kątem zgodności z dostępnością przed wdrożeniem redesignu
• Wybór kolorów przycisków i linków, które pozostaną czytelne na motywie jasnym lub ciemnym
• Spełnienie wymagań WCAG 2.1 AA lub AAA dla zgodności z Section 508, EN 301 549 lub ADA
• Przegląd makiety od projektanta, aby oznaczyć nieczytelny tekst przed rozpoczęciem developmentu
• Nauczanie zasad dostępności przez pokazanie, jak małe różnice luminancji powodują duże problemy z kontrastem