Kontroler Kontrastu Kolorów
Wprowadź kolor pierwszego planu i tła, aby sprawdzić współczynnik kontrastu WCAG z odznakami AA i AAA dla tekstu normalnego i dużego.
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Jak to działa
Sprawdzanie kontrastu kolorów mierzy współczynnik kontrastu luminancji między kolorem tekstu a tłem zgodnie z wytycznymi WCAG 2.1 — standardem dostępności stosowanym przez organizacje na całym świecie.
Wprowadź kolor tekstu i tła w formacie HEX, RGB lub HSL. Narzędzie natychmiast oblicza względną luminancję każdego koloru i ich współczynnik kontrastu.
Wyniki są testowane według poziomów WCAG: AA wymaga ≥4,5:1 dla normalnego tekstu i ≥3:1 dla dużego tekstu; AAA wymaga ≥7:1 i ≥4,5:1. Podgląd wizualny pokazuje, jak tekst faktycznie wygląda na tym tle.
Niski kontrast sprawia, że treść jest trudna do odczytania dla użytkowników z niedowidzeniem, a zwłaszcza dla osób z nierozróżnianiem barw.
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
Często zadawane pytania
- Co to jest WCAG?
- Web Content Accessibility Guidelines — standardy dostępności publikowane przez W3C, powszechnie wymagane prawnie.
- Jaki minimalny kontrast powinienem osiągnąć?
- Minimum AA (4,5:1 dla tekstu normalnego) dla większości stron; AAA dla treści o krytycznym znaczeniu.
- Czy duży tekst ma inne wymagania?
- Tak — tekst ≥18pt lub ≥14pt pogrubiony wymaga jedynie 3:1 (AA) lub 4,5:1 (AAA).
- Czy sprawdzanie uwzględnia ślepotę barw?
- Wynik luminancji oparty jest na matematyce percepcji, która z natury obejmuje najczęstsze typy ślepoty barw.
- Czy mogę wkleić kod HEX bezpośrednio?
- Tak, wklej #RRGGBB lub po prostu RRGGBB — narzędzie akceptuje oba formaty.