Wystarczający kontrast kolorów decyduje o tym, czy tekst pozostaje czytelny dla wszystkich – również przy słabym wzroku, w ostrym słońcu czy na ekranach niskiej jakości. Za pomocą Sprawdzanie kontrastu kolorów (WCAG) sprawdzisz dwa kolory względem Wytycznych dotyczących dostępności treści internetowych (WCAG 2.1) w kilka sekund. Ten przewodnik wyjaśnia wzór, progi oraz częsty przypadek graniczny z rzeczywistych projektów.
Jak oblicza się współczynnik kontrastu
Współczynnik kontrastu opisuje różnicę jasności między kolorem pierwszego planu a tłem. Wyznacza się go z luminancji względnej L obu kolorów:
Współczynnik kontrastu = (L_jasny + 0,05) / (L_ciemny + 0,05)
L_jasny to luminancja względna jaśniejszego koloru, a L_ciemny – ciemniejszego (WCAG 2.1). Luminancja względna waży składowe czerwoną, zieloną i niebieską zgodnie z percepcją człowieka. Wartości mieszczą się w zakresie od 1:1 (brak kontrastu, identyczne kolory) do 21:1 – maksimum dla czystej czerni na czystej bieli.
Progi WCAG dla AA i AAA
WCAG wyróżnia dwa poziomy zgodności (AA, AAA) i dwa rozmiary tekstu. „Duży tekst" oznacza od 18 pt lub od 14 pt pogrubiony. Mniejszy tekst o normalnej grubości traktowany jest jako tekst zwykły.
| Wymóg | Tekst zwykły | Duży tekst |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA to poziom minimalny wymagany przez większość przepisów i przetargów, a AAA to bardziej wymagające zalecenie. Duży tekst może mieć niższy kontrast, ponieważ grubsze kształty liter pozostają czytelne nawet przy mniejszej różnicy.
Przykład: ciasny przypadek graniczny
Częstym błędem jest użycie średniej szarości do tekstu ciągłego. Czysta szarość #777777 na białym tle daje współczynnik kontrastu około 4,48:1. To wartość tuż poniżej progu AA wynoszącego 4,5:1 – nie jest więc dostępna dla tekstu ciągłego, choć na pierwszy rzut oka wydaje się wystarczająca. Dopiero nieco ciemniejsza szarość osiąga wymagane 4,5:1. Właśnie takie przypadki graniczne kalkulator niezawodnie ujawnia.
Jak przeprowadzić sprawdzenie
Wprowadź kolor pierwszego planu i tła jako wartości szesnastkowe, na przykład #333333 na #FFFFFF. Kalkulator zwraca współczynnik i pokazuje dla każdej kombinacji poziomu i rozmiaru tekstu, czy jest zaliczona. Kolory tekstu zawsze sprawdzaj względem rzeczywistego tła, także w przyciskach, linkach w stanie hover i tekście na obrazach. Dzięki temu masz pewność, że projekt jest nie tylko atrakcyjny, ale i w wykazany sposób dostępny.
