Poprawa dostępności strony w CSS – color-contrast()
Dostępność jest w dzisiejszych czasach bardzo ważna, szczególnie jeśli chodzi o kontrast kolorów na stronach internetowych. 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.
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
Przeczytaj także

CSS Container Queries już działa!
Container Queries już działa! Zapowiedzi potwierdziły się i mamy już możliwość korzystania z tego rozwiązania w najnowszych, stabilnych wersjach przeglądarek.

Kolory LCH to przyszłość w CSS?
Jednostki LCH są to nowe jednostki kolorów CSS, które są częścią specyfikacji CSS Color Level 4. Dają one dużo większe możliwości niż np. HEX czy RGB.

Nowa składnia media query w CSS
Budowanie nowoczesnego designu strony powinno być oparte o poprawne wypełnienie ekranu treścią i przedstawienie jej w efektowny sposób. Z pomocą przychodzi nam tutaj technika zwana @media query.