Historia narzędzia do sprawdzania kontrastu
Zbyt niski kontrast to jeden z najczęstszych problemów dostępności w sieci. Jego zasady wyglądają jak magiczne liczby, ale każda ma swój powód, związany z tym, jak oko traci wrażliwość z wiekiem i jak ekrany wytwarzają światło.
Skąd się wzięło 4,5 i 7
WCAG 2.0 stały się rekomendacją W3C w grudniu 2008 roku. Autorzy wyszli od minimum 3:1 z normy ISO 9241-3 i podnieśli je, aby zrównoważyć utratę wrażliwości na kontrast przy ostrości wzroku około 20/40, typowej w okolicach 80. roku życia. Tak powstało 4,5:1 dla poziomu AA. Poziom AAA, 7:1, robi to samo dla wzroku około 20/80.
Luminancja względna
Wzór najpierw zamienia każdy kanał sRGB z powrotem na światło liniowe, a potem waży czerwień, zieleń i błękit współczynnikami 0,2126, 0,7152 i 0,0722, tymi samymi co w normie telewizyjnej ITU-R BT.709, bo oko jest najbardziej czułe na zieleń. Współczynnik to jaśniejsza luminancja plus 0,05 podzielona przez ciemniejszą plus 0,05. Wartość 0,05 oznacza światło odbite od ekranu i ogranicza skalę do zakresu od 1:1 do 21:1, czyli czerni na bieli.
Nie tylko tekst
Duży tekst, co najmniej 24 px lub 18,66 px pogrubiony, pozostaje czytelny przy niższym kontraście i wymaga tylko 3:1 dla AA. WCAG 2.1 z czerwca 2018 roku dodały kryterium 1.4.11 Kontrast elementów nietekstowych: obramowania pól, wskaźniki fokusu, ikony i części wykresu potrzebne do jego zrozumienia muszą osiągać 3:1 względem otoczenia.
Daltonizm i przyszłość
Około 1 na 12 mężczyzn i 1 na 200 kobiet ma zaburzenia widzenia barw, najczęściej czerwieni i zieleni. Kontrast mierzy się na luminancji, więc para spełniająca wymogi pozostaje czytelna, ale kolory różniące się tylko odcieniem mogą wyglądać tak samo. Symulacja korzysta z modelu Machado, Oliveiry i Fernandesa z 2009 roku. Wersje robocze WCAG 3 badają APCA, nowszą metodę, która uwzględnia też wielkość tekstu i to, czy jest ciemny na jasnym, czy jasny na ciemnym.
Często zadawane pytania
Czy dobry kontrast wystarczy dla dostępności?
Nie. To jeden z wielu wymogów. WCAG wymagają też, aby kolor nie był jedynym sposobem przekazania znaczenia, na przykład przez dodanie ikony lub podkreślenia do linku lub błędu.
Czy symulacja pokazuje dokładnie to, co widzi dana osoba?
To dobre przybliżenie pełnej dichromazji. Wiele osób ma łagodniejszą postać, a każdy widzi trochę inaczej, więc traktuj ją jako wskazówkę.
Czy używać APCA zamiast współczynnika WCAG 2?
Dla zgodności obecnie stosuj współczynnik WCAG 2. WCAG 2.2 z października 2023 roku zachowują ten sam wzór, a przepisy i normy, takie jak EN 301 549, się do niego odwołują. APCA jest wciąż rozwijane.
Powiązane narzędzia
Sprawdzanie kontrastu kolorów
Bezpłatne sprawdzanie kontrastu WCAG: wpisz kolor tekstu i tła jako HEX, RGB lub HSL, zobacz współczynnik kontrastu z wynikami AA i AAA, otrzymaj najbliższy kolor spełniający wymogi i zasymuluj daltonizm.
Generator palety kolorów
Twórz, blokuj i mieszaj palety kolorów w przeglądarce. Kopiuj zmienne HEX, CSS lub JSON, eksportuj PNG lub SVG i wyodrębniaj kolory ze zdjęcia.
Koło kolorów
Wybierz kolor na interaktywnym kole, wygeneruj palety uzupełniające, analogiczne, triadyczne i inne oraz skopiuj HEX, RGB, HSL, HSV lub CMYK.
Edytor gradientu
Twórz liniowe i radialne gradienty CSS w swojej przeglądarce. Przeciągnij znaczniki kolorów, ustaw kąt i skopiuj CSS, HEX, RGB, HSL, HSV lub CMYK.
Colors
Jak działa kolor na ekranach i w druku: RGB, CMYK, HSL, HEX, koło kolorów, gradienty, kontrast i narzędzia PictorX.
Chcesz wypróbować?
Otwórz PictorX w swojej przeglądarce — do uruchomienia nie jest wymagana żadna instalacja ani karta kredytowa.
Otwórz sprawdzanie kontrastu