Poprawa dostępności strony w CSS – color-contrast()

Dostępność stron internetowych jest w dzisiejszych czasach bardzo ważna, szczególnie jeśli chodzi o kontrast kolorów na stronach www. Osoby słabo widzące poruszając się w internecie nierzadko mają problem z poprawnym widzeniem treści. Dzisiaj przygotowałem wpis na temat poprawy dostępności strony na podstawie kontrastu w CSS.

Zasady dostępności na stronach – historia

W roku 1999 w materiałach W3C opublikowano spis zasad Web Content Accessibility Guidelines (WCAG 1.0), które miały poprawić komfort osobom niepełnosprawnym podczas przeglądania stron www. Standard WCAG składa się z czterech głównych grup: postrzegalność, funkcjonalność, zrozumiałość i solidność. Następnie w roku 2008 wydano standard WCAG 2.0. Obecnie obowiązującą wersją standardu jest WCAG 2.1 opublikowana w Polsce w kwietniu 2019 roku.

Poprawa kontrastu treści na stronie

Tworząc stronę internetową podczas projektowania jej designu, warto zachować minimalne współczynniki kontrastu treści względem tła, na którym się znajduje. Obecnie zaleca się, aby ten współczynnik wynosił 4,5:1. Najprościej mówiąc, tekst powinien mieć barwę 4,5 raza bardziej kontrastującą niż tło.

Obecnie w przeglądarkach wprowadza się funkcje pozwalające na ułatwienie osobom niedowidzącym poprawne postrzeganie treści.

Przykład color-contrast() w CSS

Jakiś czas temu pisałem o korzyściach ze stosowania Flexbox’a czy responsywnych tabel na stronie, dzisiaj przedstawiam korzyści z funkcji color-contrast(). Funkcja color-contrast() automatycznie wybierze kolor, który przekracza współczynniki kontrastu, wystarczy podać kolor tła oraz listę kolorów do najbardziej kontrastującego.

--bg: hsl(200 50% 80%);
--purple-in-hsl: hsl(300 100% 25%);
color: color-contrast(var(--bg) hsl(200 83% 23%), purple, var(--purple-in-hsl));

W powyższym przykładzie podałem paletę 3 kolorów i funkcja wybierze kolor najbardziej kontrastujący. Oto wynik jaki otrzymamy.

dark