Sprawdź kontrast kolorów pod kątem WCAG 2.2 i APCA.
Sprawdź parę kolorów
Wartość hex, na przykład #005897
Wartość hex, na przykład #005897
Współczynnik kontrastu7.38:1
Spełnia AA i AAA
Duży tekst: 24px, pogrubiony
Ten akapit to tekst podstawowy w rozmiarze 16px, więc WCAG 2.2 wymaga dla niego 4,5:1. Na prawdziwym urządzeniu odblaski i przyciemniony ekran obniżają ten kontrast jeszcze bardziej.
| Co sprawdzasz | AA | AAA |
|---|---|---|
| Tekst podstawowyPoniżej 24px, albo poniżej 18,66px pogrubiony | Spełnia | Spełnia |
| Duży tekstOd 24px, albo od 18,66px pogrubiony | Spełnia | Spełnia |
| Elementy nietekstoweObramowania pól, pierścienie fokusa, ikony niosące znaczenie | Spełnia | Brak poziomu AAA |
Współczynniki są ucinane do dwóch miejsc po przecinku, więc para pokazująca 4,49 nigdy nie twierdzi, że spełnia 4,5. Duży tekst to 18pt (24px), albo 14pt (18,66px) w wersji pogrubionej.
Wymagania kontrastu w WCAG 2.2
Trzy progi, wszystkie z poziomu AA, czyli tego, który egzekwuje Europejski Akt o Dostępności.
-
4,5:1 dla tekstu podstawowego
Kryterium 1.4.3 Kontrast (minimum). Obejmuje wszystko poniżej 24px, a dla tekstu pogrubionego poniżej 18,66px. Placeholdery liczą się jako tekst: #999 na bieli daje 2,84:1 i nie przechodzi.
-
3:1 dla dużego tekstu
Od 24px, albo od 18,66px w wersji pogrubionej. Poziom AAA podnosi ten próg do 4,5:1, a dla tekstu podstawowego do 7:1. Jeśli szykujesz rebranding, sprawdź nową paletę pod AAA, póki zmiana jest jeszcze tania.
-
3:1 dla wszystkiego, co nie jest tekstem
Kryterium 1.4.11 Kontrast elementów nietekstowych: obramowania pól, pierścienie fokusa, zaznaczony stan przełącznika, ikony niosące znaczenie, segmenty wykresu. Przeglądy projektu zwykle sprawdzają tekst i pomijają te elementy, więc wychodzą dopiero w audycie.
Dwie metody,
dwa różne pytania
Współczynnik i wynik Lc często się nie zgadzają, najbardziej na ciemnych tłach. Współczynnik mówi, czy para kolorów spełnia wymagania. Lc mówi, jak dobrze się ją czyta przy danym rozmiarze i grubości pisma.
WCAG 2.2 to liczba, która trafia do raportu
Luminancja względna wyrażona jako stosunek od 1:1 do 21:1, z progami 3, 4,5 i 7. To do niej odsyła EN 301 549, ją sprawdza audytor i o niej mówi twoja deklaracja dostępności. Wdrażaj pod tę metodę.
APCA modeluje to, co robi oko
Wynik Lc z modelu percepcyjnego, który bierze pod uwagę rozmiar, grubość i biegunowość. Wzór z WCAG 2 zawyża kontrast, im ciemniejsze jest tło, i dlatego ciemny motyw potrafi przejść próg 4,5:1, a i tak wyglądać na wyblakły przy 14px.
Używaj obu, w tej kolejności
Paletę dobierz pod Lc, a zgodność udowodnij współczynnikiem. Kiedy wyniki się rozjeżdżają, do raportu z audytu trafia współczynnik.
Czego para wartości hex Ci nie powie
To narzędzie porównuje dwa jednolite kolory. Te trzy przypadki wymagają czegoś więcej.
Gradienty i zdjęcia
Zmierz tło w miejscu, w którym jest najbliżej koloru tekstu. WCAG nie definiuje tu metody, więc zapisz, w którym punkcie był pomiar.
Kolory półprzezroczyste
Wartość rgba najpierw złóż z tłem, które leży pod spodem, a dopiero wynik sprawdź. Ta sama czarna nakładka 60% da inny współczynnik na białej karcie, a inny na zdjęciu w sekcji hero.
Tekst wtopiony w obrazek
Narzędzia automatyczne go nie odczytają, a tryb wymuszonych kolorów go nie przemaluje. Kryterium 1.4.5 Obrazy tekstu wymaga w tym miejscu prawdziwego tekstu, z wyjątkiem logotypów.
Kontrast to dwa z 55 kryteriów sukcesu poziomu A i AA w WCAG 2.2. Czysta paleta nic nie mówi o kolejności fokusa, nazwach i rolach ani o tym, czy modal da się zamknąć z klawiatury.
Zobacz, jak audytujemy pozostałe 53Pytania programistów o kontrast
Jakiego kontrastu wymaga WCAG 2.2 AA?
4,5:1 dla tekstu podstawowego, 3:1 dla dużego tekstu i 3:1 dla elementów nietekstowych, takich jak obramowania pól, pierścienie fokusa i ikony niosące znaczenie. Poziom AAA podnosi dwie pierwsze wartości do 7:1 i 4,5:1. Duży tekst to 18pt, czyli 24px, albo 14pt pogrubiony, czyli 18,66px.
Czy nasze logo musi spełniać wymagania?
Nie. Kryterium 1.4.3 wyłącza logotypy i nazwy marek, a także nieaktywne kontrolki i tekst czysto dekoracyjny. Wszystko wokół logo nadal musi spełniać wymagania. „Nieaktywna” znaczy wyłączona: przycisk, który tylko wygląda na wyciszony, dalej potrzebuje 4,5:1.
Czy placeholder musi spełniać wymagania kontrastu?
Tak. Placeholder to tekst, więc obowiązuje go 4,5:1. Jeśli niesie instrukcję, przenieś ją do podpowiedzi pod polem, bo placeholder znika, gdy tylko ktoś zacznie pisać.
Czy wskaźnik fokusa musi spełniać wymagania kontrastu?
Tak, 3:1 wobec sąsiednich kolorów według kryterium 1.4.11. Szara obwódka, która przechodzi 3:1 na białej karcie, może nie przejść na ciemnym nagłówku, więc sprawdź ją na każdym tle, na którym się pojawia. WCAG 2.2 dodaje też na poziomie AA kryterium 2.4.11 Fokus nieprzysłonięty (minimum), którego nie spełnia przyklejony nagłówek całkowicie zasłaniający element z fokusem.
Nasz kolor marki nie przechodzi. Musimy zmienić markę?
Zwykle nie. Logo jest wyłączone przez kryterium 1.4.3, więc znak zachowuje swój kolor. Zmienia się tekst pisany tym kolorem: weź ciemniejszy wariant tego samego odcienia do treści, a oryginał zostaw w nagłówkach od 24px w górę, gdzie obowiązuje 3:1. Druga pułapka to przyciski. Etykieta potrzebuje 4,5:1 wobec wypełnienia, a wypełnienie 3:1 wobec tła strony.
Czy APCA jest wymagane do zgodności?
Nie. APCA to metoda kontrastu przygotowywana pod WCAG 3, a WCAG 3 nie ma modelu zgodności ani mocy prawnej. APCA używaj przy wyborze palety. W audycie, w zgłoszeniu i w deklaracji dostępności trzymaj się WCAG 2.2.
Dlaczego obie metody nie zgadzają się w trybie ciemnym?
Wzór z WCAG 2 powstał wokół ciemnego tekstu na jasnym tle i zawyża kontrast, im ciemniejsze jest tło. Jasna szarość na prawie czarnym potrafi przejść próg 4,5:1 i nadal czytać się źle przy 14px. APCA ocenia obie biegunowości osobnymi krzywymi i dlatego jej wynik zmienia się po zamianie kolorów miejscami, a współczynnik nie.
Jeśli każda para przechodzi, czy serwis przejdzie audyt?
Nie. Kontrast to dwa z 55 kryteriów poziomu A i AA w WCAG 2.2. Pozostałe wymagają ręcznych testów, ścieżka po ścieżce, z klawiaturą i czytnikiem ekranu.
Odkryj swój pełny potencjał
Masz produkt do zbudowania. Nie masz czasu, aby stać się ekspertem WCAG. Pozwól nam zająć się technikaliami, aby Twój zespół mógł wrócić do tego, co robi najlepiej.
Omówmy Twój projekt