Ranyboskie!

Kontrast ma znaczenie

TL;DR


“It’s the wild colour scheme that freaks me,” [...] “Every time you try to operate on one of these weird black controls that are labelled in black on a black background, a little black light lights up black to let you know you’ve done it.
Douglas Adams, 'Restaurant at the End of the Universe'

Fakt, że tekst powinien być czytelny wydaje się być oczywisty. Niestety, rzeczywistość jak zwykle rozczarowuje. Raport przeprowadzony przez organizację WebAim wykazał, że niewystarczający kontrast tekstu był najczęściej występującym błędem dostępności na badanych stronach.

Czym jest kontrast?

W kontekście stron internetowych kontrastem nazywa się stosunek jasności lub koloru tekstu do jego tła, i najczęściej wyraża się go jako stosunek dwóch liczb. Przykładowo, czarny tekst na białym tle (#000 i #fff) będzie miał kontrast wynoszący 21:1, a kontrast żółtego tekstu na białym tle (#ff0 i #fff) wyniesie 1.07:1.

Aby spełnić wymagania standardu WCAG 2.1 minimalny kontrast tekstu nie powinien być mniejszy niż 4.5:1, lub 3:1 dla rozmiaru czcionki powyżej 24px. Zasadzie tej nie podlegają jedynie teksty które pełnią wyłącznie rolę dekoracji, oraz logotypy.

Zdawać by się mogło, że spełnienie tych wytycznych jest rzeczą banalnie prostą. Wystarczy po prostu używać odpowiednich kombinacji kolorów. Niestety jednak, WebAim pokazuje, że zdecydowana większość stron w internecie cierpi na problemy z kontrastem.

przycisk z tekstem o kontraście nie spełniającym wytycznych WCAG inspektowany w narzędziach dostępności w firefoksie

Można pomyśleć, że w gruncie rzeczy niedobory kontrastu nie są aż tak poważnym problemem. Skoro ja jestem w stanie coś przeczytać to każda inna osoba na świecie również nie powinna mieć z tym problemów.

Ale:

W praktyce oznacza to, że olbrzymia ilość użytkowników potencjalnie może mieć problemy z przeczytaniem tekstu na naszej stronie. Stanowi to problem moralny, ale niektórych bardziej przekona problem biznesowy.

Jeśli, na przykład, klient sklepu internetowego nie zobaczy przycisku "kup produkt" to nie kupi tego produktu. Czytanie tekstu o mniejszym kontraście może być również męczące, a jeśli użytkownik będzie musiał się wysilać przy korzystaniu z naszej strony, to po prostu przestanie z niej korzystać.

Kontrast a design

Miejska legenda głosi, że strony projektowane z myślą o dostępności nie są najpiękniejsze. Podobnie, wysoki kontrast może kojarzyć się ze szpitalną atmosferą, warto jednak pamiętać, że dostępność nie jest zamiennikiem estetyki. Jedno nie wyklucza drugiego, a w wielu przypadkach dostępna strona będzie przyjemniejsza w odbiorze dla wszystkich.

Dodatkowo, nawet najmodniejszy dizajn nie zachwyci odbiorcy jeśli strona będzie po prostu nieczytelna.

Testowanie kontrastu 🔎

Jeśli nie mamy problemów ze wzrokiem, łatwo przeoczyć nieczytelne teksty, dlatego przy projektowaniu stron warto skorzystać z jednego z wielu dostępnych narzędzi.

Najprostszym sposobem na "przetestowane" kontrastu będzie skorzystanie z zakładki dostępności w Lighthouse lub z wtyczki aXe. Narzędzia te powiedzą nam które elementy na stronie nie spełniają norm WCAG.

Jeśli chcemy sprawdzić kontrast konkretnego elementu warto skorzystać z inspektora dostępności w firefoksie lub chromie.

Kiedy natomiast projektujemy paletę kolorów dla naszej strony i szukamy bezpiecznych zestawień barw tła i tekstu, możemy użyć narzędzia stworzonego przez WebAim.

Rozmiar tekstu a kontrast

Narzędzia do walidacji kontrastu są bardzo przydatne, jednak posiadają pewne ograniczenia, gdyż nie biorą pod uwagę grubości danej czcionki.

W poniższym przykładzie przedstawione są dwa paragrafy o grubości 700 i 100. Mimo, że drugi tekst zdaje się być prawie niewidzialny, inspektor kontrastu pokaże, że to właśnie ten element spełnia normy WCAG 2.1.

Przykład tego, jak grubość czcionki wpływa na postrzegany kontrast

`font-weight: 700`

`font-weight: 100`

Kontrast koloru

Kolejną bardzo ważną rzeczą jest kontrast koloru. Dwa kolory są tym bardziej kontrastowe im bardziej są od siebie oddalone na kole barw. Kontrastowe zestawienia kolorów mogą być łatwiejsze do rozróżnienia, problem tylko w tym, że postrzeganie koloru nie zawsze jest rzeczą oczywistą.

Szacuje się, że około 8% społeczeństwa może mieć problemy z rozróżnianiem barw. Na przykład osoby z deuteranopią mogą mieć poważne trudności z przeczytaniem zielonego tekstu na czerwonym tle

Dodatkowo kolory zielony i czerwony są do siebie zbliżone jasnością, więc w skali szarości (np. przeglądarka kindla) mogą stać się zupełnie nierozróżnialne.

Poniższy przykład dobrze obrazuje problem:

Kontrast koloru nie równa się kontrastowi jasności


Kilka fajnych linków na koniec

(@aneta, dzięki za sugestie 🐥)

← Wróć