blog na temat dostępności stron internetowych

Przejdź do głównej treści

Kontrast

Odpowiednio wysoki kontrast pomiędzy tekstem a tłem sprawia, że tekst ten jest dobrze widoczny, a co za tym idzie bardziej czytelny. Pojęcie “odpowiednio wysoki” jest jednak względne: podczas gdy kontrast pomiędzy pewnymi elementami może być całkowicie wystarczający dla niektórych osób, dla innych osób elementy te mogą być trudne do rozróżnienia. Jak zatem zmierzyć kontrast i jaki poziom uznaje się za “odpowiednio wysoki”?

Wytyczne WCAG 2.0 a kwestia kontrastu

Organizacja W3C opracowała algorytm, który pozwala na obliczenie tzw. współczynnika kontrastu (ang. “contrast ratio”). Wytyczne WCAG 2.0 zawierają dwa kryteria sukcesu (jedno na poziomie AA, a drugie na poziomie AAA), które określają minimalny poziom tego współczynnika.

1.4.3 Kontrast (minimalny)

Aby zapewnić zgodność z WCAG 2.0 na poziomie AA należy upewnić się, że współczynnik kontrastu pomiędzy tekstem a tłem wynosi przynajmniej 4.5:1, poza pewnymi wyjątkami (opisanymi poniżej). Warto również pamiętać, że kryterium to dotyczy nie tylko tekstu, ale także obrazków zawierających tekst.
Dla przykładu, czarny tekst na białym tle daje kontrast 21.0:1, a współczynnik kontrastu pomiędzy tekstem a tłem w przycisku ‘Szukaj’ zamieszczonym na górze tej strony wynosi 7:48:1.

Wyjątki:

  1. W przypadku dużego i/lub pogrubionego tekstu wymagania te są nieco złagodzone, gdyż tego typu tekst jest z zasady bardziej czytelny niż tekst napisany mniejszą czcionką. Dlatego też wymagana wartość współczynnika kontrastu pomiędzy dużym tekstem a tłem to jedynie 3:1. A jak zdefiniowany jest “duży” tekst? Jest to tekst o normalnej grubości (“font-weight: normal“) i rozmiarze większym bądź równym 18pt, lub tekst pogrubiony większy bądź równy 14pt. Ważne jest tu zwrócenie uwagi na jednostki, w których podany jest wymagany rozmiar tekstu – są to punkty (“pt”), a nie piksele (“px”). Chociaż niemożliwe jest podanie uniwersalnego przelicznika z punktów na piksele (wielkość tekstu, który użytkownik widzi na ekranie, zależy nie tylko od rozmiaru zdefiniowanego przez twórcę strony, ale także od czcionki, ekranu, na którym tekst jest wyświetlony oraz ustawień przeglądarki i systemu operacyjnego), w większości przypadków można założyć, że:
    • 14pt to mniej więcej tyle samo co 1.2em (120%) podstawowego rozmiaru czcionki (czyli ok. 19px)
    • 18pt to w przybliżeniu 1.5em / 150% / 24px

    W razie wątpliwości bądź też tekstu będącego na pograniczu tekstu “normalnego” i “dużego” zawsze lepiej jest przyjąć bardziej restrykcyjną wartość współczynnika kontrastu – 4.5:1.

  2. Drugim wyjątkiem od tej reguły jest tekst, który został użyty w celach czysto dekoracyjnych, bądź też taki, który jest częścią nieużywanych części interfejsu użytkownika.

  3. Trzeci wyjatek to logo – tekst, który jest jego częścią nie musi spełniać kryterium sukcesu 1.4.3. Warto jednak pamiętać, że kolorystyka serwisów internetowych często bazuje na kolorach użytych w logo. Dobrym przykładem jest tu strona Orange – choć logo firmy (biały tekst na pomarańczowym tle) nie musi spełniać wytycznych WCAG, kolorystyka strony silnie do niego nawiązuje. Pomarańczowe przyciski zawierające biały tekst nie zapewniają wystarczającego kontrastu, a w odróżnieniu od logo elementy te nie są wyjątkiem od wytycznych WCAG. Dlatego też warto pamiętać o zapewnieniu dostatecznego kontrastu nawet przy tworzeniu logo.

    fragment strony Orange pokazujący pomarańczowy tekst na białym tle, biały tekst na pomarańczowym tle, i pomarańczowy przycisk zawierający biały tekst
    Przykłady kombinacji koloru białego z pomarańczowym o współczynniku kontrastu poniżej 3:1

1.4.6 Kontrast (wzmocniony)

Kryterium sukcesu na poziomie AAA jest bardzo zbliżone do 1.4.3, z jedną różnicą – minimalny poziom współczynnika kontrastu jest tu wyższy: 7:1 dla normalnego tekstu i 4.5:1 dla dużego / pogrubionego tekstu (za wyjątkiem logo oraz elementów dekoracyjnych).

Im wyższy kontrast tym lepiej?

Taki wniosek może nasunąć się po lekturze wytycznych WCAG; choć opisane powyżej kryteria sukcesu wyznaczają minimalną wartość współczynnika kontrastu, jego maksymalna wartość nie jest nigdzie zdefiniowana. Badania pokazują jednak, że bardzo wysoki kontrast nie jest optymalnym rozwiązaniem dla wszystkich grup osób. Na przykład dla osób z dysleksją łatwiejsze jest czytanie treści wyświetlonej na tle, którego współczynnik kontrastu w stosunku do tekstu nie jest zbyt wysoki. Osoby te preferują bardziej stonowane barwy, dlatego też należy unikać jaskrawych kombinacji, takich jak czarny kolor (#000000) na białym (#FFFFFF) tle, czy też żółty kolor w połączeniu z czarnym.

Jak spełnić kryteria sukcesu dotyczące kontrastu?

W zasadzie mamy do wyboru dwa rozwiązania: albo cały serwis musi spełniać wytyczne na wybranym poziomie (AA lub AAA), albo też powinien zawierać kontrolki do zmiany kontrastu. Najczęściej są to trzy przyciski wyświetlone u góry strony, za pomocą których użytkownik może zmienić wersję kolorystyczną serwisu. Jeden przycisk zazwyczaj odpowiada standardowej wersji, drugi zmienia tekst i tło na kolory zapewniające wysoki kontrast (ponad 7:1), a trzeci odpowiada wersji o umiarkowanym kontraście, stosującej stonowane barwy i przyciemnione tło.

Jak zmierzyć kontrast?

Wiemy już zatem, ile powininen wynosić minimalny współczynnik kontrastu. Ale w jaki sposób można go zmierzyć?
Istnieje wiele narzędzi do sprawdzania kontrastu. Ja najczęściej korzystam z darmowej aplikacji Colour Contrast Analyser (dostępna jest zarówno wersja na Windows jak i OSX). Narzędzie to umożliwia manualne sprawdzenie kontrastu pomiędzy dwoma wybranymi kolorami albo przez użycie tzw. pipety, albo przez wprowadzenie kodu porównywanych kolorów (w formacie rgb lub hex). Oprócz współczynnika kontrastu aplikacja ta podaje również, czy badana kombinacja spełnia wytyczne WCAG (z podziałem na poziom AA i AAA oraz normalny i duży tekst).

okienko aplikacji Colour Contrast Analyser wyświetlające wartość współczynnika kontrastu dla dwóch wybranych kolorów
Przykładowy wynik testu dla białego tekstu na ciemnoróżowym tle

Istnieje też szereg automatycznych narzędzi, które sprawdzają kontrast wszystkich elementów tekstowych na danej stronie (np. “Check my colours“). Zaletą tego typu narzędzi jest szybkość: w przeciągu kilku sekund podane są wyniki wszystkich kombinacji kolorystycznych użytych na stronie. Wadą jest to, że automatyczne testy kontrastu zwykle generują wiele fałszywych wyników, oceniając kombinacje kolorystyczne, które w rzeczywistości nie są wyświetlone na ekranie.

Tworzenie kolorystyki zgodnej z zasadami dostępności

Kwestia odpowiedniego kontrastu musi być rozpatrywana na etapie wykonywania projektów graficznych. Każda osoba pracująca na stanowisku grafika / web designera powinna znać wymagania dotyczące minimalnego kontrastu i stosować je na codzień. Warto pamiętać, że (jak to często bywa zaleceniami dotyczącymi dostępności) dobry kontrast jest istotny dla wszystkich grup użytkowników, nie tylko dla osób niedowidzących. Czytanie tekstu, który ma odpowiednio wysoki współczynnik kontrastu z tłem, jest łatwiejsze dla wszystkich, zwłaszcza przy złym oświetleniu, np. gdy przeglądamy stronę na telefonie na zewnątrz w słoneczny dzień.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>