Projektowanie

Sprawdzanie kontrastu kolorów

Współczynnik kontrastu WCAG dla dwóch kolorów.

Zanim się spostrzegliśmy, byliśmy już w powietrzu.
1.00
Współczynnik kontrastu
StandardowyNormalny tekstDuży tekst
WCAG AA
WCAG AAA
WCAG 1.4.11Elementy nietekstowe / UI (≥3:1): —

Najbliższa alternatywa tekstu zgodna z AAObliczanie alternatywy OKLCH…

Ten raport spełnia wymagania WCAG 2.2 dotyczące współczynnika kontrastu. APCA pozostaje eksperymentalne i nie stanowi wyniku zgodności z WCAG 3.

Wybierz kolory? Konwerter kolorów · opisy profili: Generator fantazyjnego tekstu · skale: Generator odcieni kolorów.

Jak używać

Wybierz kolor tekstu i kolor tła. Współczynnik kontrastu oraz zaliczenie/niezaliczenie dla każdego poziomu WCAG aktualizują się na żywo, z podglądem.

FAQ

Jaki jest dobry współczynnik kontrastu?

WCAG AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. AAA wymaga odpowiednio 7:1 i 4.5:1. WCAG 1.4.11 wymaga także 3:1 dla istotnych grafik nietekstowych oraz granic lub stanów komponentów UI.

Co liczy się jako duży tekst?

Duży tekst to około 18 pt (24 px) lub 14 pt (18,66 px) pogrubiony i większy.

Jak obliczany jest współczynnik?

Na podstawie względnej luminancji obu kolorów: (jaśniejszy + 0,05) ÷ (ciemniejszy + 0,05), zgodnie ze wzorem WCAG.

Ostatnia aktualizacja: