Jak używać
- Wprowadź kolor tekstu (pierwszego planu) i tła w formacie HEX, rgb(), hsl() lub innym formacie CSS albo wybierz je za pomocą próbników.
- Sprawdź współczynnik kontrastu oraz wynik pozytywny lub negatywny dla każdego wymagania WCAG.
- Jeśli kolor nie spełnia wymagania, wybierz cel i zastosuj sugerowany kolor. Zachowuje on odcień, zmieniając tylko jasność.
- Użyj opcji „Zamień”, aby sprawdzić odwrotną kombinację, na przykład jasny tekst na ciemnym przycisku.
Jak to działa
Współczynnik kontrastu obliczany jest zgodnie z definicją WCAG 2.2: względną luminancję każdego koloru wyznacza się na podstawie jego kanałów sRGB, a następnie oblicza iloraz (jaśniejsza wartość + 0.05) ÷ (ciemniejsza wartość + 0.05). Wynik mieści się w zakresie od 1:1 (identyczne kolory) do 21:1 (czerń na bieli).
Sprawdzane wymagania: kryterium sukcesu 1.4.3 (AA) wymaga kontrastu 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu; kryterium 1.4.6 (AAA) wymaga odpowiednio 7:1 i 4.5:1; kryterium 1.4.11 wymaga 3:1 dla elementów interfejsu użytkownika i istotnych grafik, takich jak obramowania pól czy ikony. Duży tekst to tekst o rozmiarze co najmniej 24px w zwykłej grubości lub około 18.66px pogrubiony. WCAG nie zezwala na zaokrąglanie w górę, więc 4.49:1 nie spełnia wymagań AA, nawet jeśli wynik jest bliski. Wyświetlany współczynnik jest obcięty, a nie zaokrąglony.
Sugestia zachowuje odcień i chromę tekstu w OKLCH, a następnie wyszukuje najbliższą jasność — mniejszą lub większą — która spełnia wymagany próg. Współczynnik kontrastu to tylko jeden z czynników wpływających na czytelność: znaczenie mają również grubość i rozmiar czcionki oraz różnice w postrzeganiu kolorów. WCAG 2.2 to aktualne zalecenie W3C, do którego odwołuje się większość przepisów dotyczących dostępności.
Przykłady
Szary tekst, który prawie spełnia wymagania
Szary tekst #777777 na białym tle ma kontrast 4.48:1. Spełnia wymagania dla dużego tekstu i elementów interfejsu, ale nie spełnia AA dla zwykłego tekstu. Najbliższy spełniający wymagania odcień szarości to około #767676, który osiąga 4.54:1.
Biały tekst na przycisku w kolorze marki
Biały tekst na tle #ff8800 ma kontrast około 2.4:1, więc nie spełnia nawet wymogu 3:1 dla dużego tekstu. Zazwyczaj wystarczy przyciemnić pomarańczowy kolor lub użyć ciemnego tekstu. Sugestia pokazuje, jak ciemny powinien być kolor tekstu.
Sprawdzanie obramowania pola formularza
Jasnoszare obramowanie #cccccc na białym tle ma kontrast około 1.6:1. Zgodnie z kryterium 1.4.11 obramowanie wskazujące pole formularza musi mieć kontrast 3:1, dlatego potrzebny jest kolor zbliżony do #949494 lub ciemniejszy.
Często zadawane pytania
Jaki współczynnik kontrastu jest wymagany przez WCAG AA?
4.5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu (24px lub 18.66px pogrubionego) oraz 3:1 dla elementów interfejsu i istotnych grafik. Wymagania AAA podnoszą próg dla tekstu do 7:1, a dla dużego tekstu do 4.5:1.
Czy tekst w logo lub na nieaktywnym przycisku musi spełniać wymagania?
Nie. WCAG wyłącza z tych wymagań tekst w logo i nazwach marek, tekst czysto dekoracyjny oraz tekst w nieaktywnych (wyłączonych) elementach interfejsu.
Dlaczego mój wynik nieznacznie różni się od wyniku innego narzędzia?
Niektóre narzędzia zaokrąglają współczynnik do jednego miejsca po przecinku lub zaokrąglają go w górę. WCAG porównuje dokładną wartość, dlatego to narzędzie obcina wynik do dwóch miejsc po przecinku. Niewielkie różnice mogą też wynikać z użycia kolorów z kanałem alfa.
A co z nową metodą kontrastu APCA?
APCA to inna metoda, proponowana z myślą o przyszłej wersji WCAG. Nie jest częścią WCAG 2.2, według której działa to narzędzie i do której odwołują się obecne zasady dostępności.
Prywatność
Kolory są sprawdzane w przeglądarce. Żadne dane nie są przesyłane ani zapisywane.