WCAG 1.4.6: Kontrast (zwiększony)

WCAG 1.4.6 Kontrast (zwiększony) – Poziom AAA

Kryterium sukcesu WCAG 1.4.6, znane jako „Kontrast (zwiększony)”, wymaga, aby wizualna prezentacja tekstu i obrazów tekstu miała współczynnik kontrastu wynoszący co najmniej 7:1. Jest to wymaganie na poziomie AAA, co oznacza, że stanowi wyższy standard dostępności niż kryterium WCAG 1.4.3 (Kontrast (minimum), poziom AA, wymagający 4.5:1).

Celem tego kryterium jest zapewnienie maksymalnej czytelności treści tekstowych dla szerokiego grona użytkowników, zwłaszcza tych z poważnymi wadami wzroku.

Dlaczego to kryterium jest ważne?

Zwiększony kontrast jest kluczowy dla wielu grup użytkowników i znacząco wpływa na ogólne doświadczenie z korzystania ze strony:

• Osoby z poważnymi wadami wzroku: Użytkownicy z umiarkowanymi lub znacznymi problemami wzrokowymi, takimi jak zaćma, jaskra czy inne schorzenia oczu, często mają trudności z odczytaniem tekstu o niskim kontraście. Zastosowanie wysokiego kontrastu ułatwia im czytanie.
• Osoby starsze: Z wiekiem wzrok pogarsza się naturalnie (presbiopia), co często objawia się zmniejszoną zdolnością do rozróżniania kontrastu. Zwiększony kontrast ułatwia im nawigację i czytanie treści.
• Użytkownicy w trudnych warunkach oświetleniowych: Osoby korzystające z urządzeń w jasnym słońcu, przy słabym oświetleniu lub na ekranach o niskiej jakości mogą mieć problemy z dostrzeżeniem tekstu o niskim kontraście.
• Osoby z dysfunkcjami poznawczymi: Niektórzy użytkownicy z dysfunkcjami poznawczymi, takimi jak dysleksja, mogą również czerpać korzyści z tekstu o wyższym kontraście, ponieważ poprawia to czytelność i zmniejsza obciążenie poznawcze.

Wymagania kryterium sukcesu 1.4.6

Głównym wymogiem tego kryterium jest, aby tekst i obrazy tekstu miały współczynnik kontrastu co najmniej 7:1.

Istnieją jednak następujące wyjątki od tej zasady:

• Duży tekst: Duży tekst i obrazy dużego tekstu (co najmniej 18 punktów lub 24 piksele, lub 14 punktów lub 18,66 pikseli w przypadku pogrubionego tekstu) muszą mieć współczynnik kontrastu co najmniej 4.5:1. Oznacza to, że dla dużego tekstu wymaganie 7:1 jest złagodzone do 4.5:1, co odpowiada poziomowi AA kryterium WCAG 1.4.3 dla zwykłego tekstu.
• Tekst incydentalny: Tekst lub obrazy tekstu, które są częścią nieaktywnych komponentów interfejsu użytkownika, czystej dekoracji, nie zawierają żadnych informacji lub są częścią obrazu, który zawiera inne istotne treści wizualne, nie mają wymagań dotyczących kontrastu.
• Logotypy: Tekst, który jest częścią logotypu lub nazwy marki, nie ma wymagań dotyczących kontrastu.
• Niezbędny: Jeśli specyficzna prezentacja tekstu lub obrazu tekstu jest niezbędna do przekazania informacji (np. logo, zrzuty ekranu, schematy medyczne, gdzie kolory są diagnostyczne), to wymagania dotyczące kontrastu mogą być złagodzone.

Praktyczne wskazówki dotyczące zgodności

Aby spełnić kryterium WCAG 1.4.6, należy wziąć pod uwagę następujące aspekty:

1. Wybór kolorów: Starannie dobieraj kolory tekstu i tła, aby uzyskać współczynnik kontrastu co najmniej 7:1. Używaj narzędzi do sprawdzania kontrastu na wczesnym etapie projektowania.
2. Narzędzia do sprawdzania kontrastu: Korzystaj z dostępnych narzędzi online (np. WebAIM Contrast Checker (otwiera nową kartę), Colour Contrast Analyser, Lighthouse) lub wbudowanych w przeglądarkę, aby dokładnie zmierzyć współczynnik kontrastu.
3. Testowanie w różnych warunkach: Testuj wygląd strony na różnych urządzeniach, ekranach i w różnych warunkach oświetleniowych, aby upewnić się, że kontrast jest wystarczający.
4. Personalizacja: Jeśli to możliwe, zapewnij użytkownikom opcje dostosowania kontrastu, np. poprzez wybór motywu (jasny/ciemny tryb) lub zwiększenie kontrastu bezpośrednio na stronie.
5. Unikaj złożonych teł: Tekst na złożonym tle (np. obrazach, gradientach) jest trudniejszy do odczytania. Jeśli musisz użyć takiego tła, upewnij się, że tekst ma wyraźne, jednolite tło za sobą (np. półprzezroczysty prostokąt).

Przykłady implementacji

Przykład 1: Poprawna implementacja (tekst o wysokim kontraście)

Poniższy przykład demonstruje tekst o wysokim kontraście (czarny na białym), który znacznie przekracza wymagany współczynnik 7:1.

<style>
  .high-contrast-text {
    color: #000000; /* Czarny */
    background-color: #FFFFFF; /* Biały */
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
  }
</style>

<p class="high-contrast-text">Ten tekst ma współczynnik kontrastu 21:1, spełniając WCAG 1.4.6.</p>
Skopiuj tekst

Współczynnik kontrastu dla #000000 na #FFFFFF wynosi 21:1.

Przykład 2: Poprawna implementacja (tekst o kontraście 7:1 dla zwykłego tekstu)

Poniższy przykład przedstawia tekst z minimalnym współczynnikiem kontrastu 7:1.

<style>
  .min-enhanced-contrast {
    color: #333333; /* Ciemnoszary */
    background-color: #F0F0F0; /* Jasnoszary */
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
  }
</style>

<p class="min-enhanced-contrast">Ten tekst ma współczynnik kontrastu około 7.7:1, spełniając WCAG 1.4.6.</p>
Skopiuj tekst

Współczynnik kontrastu dla #333333 na #F0F0F0 wynosi około 7.7:1.

Przykład 3: Poprawna implementacja (duży tekst spełniający 4.5:1)

Dla dużego tekstu, minimalny współczynnik kontrastu to 4.5:1. Ten przykład to spełnia.

<style>
  .large-text-contrast {
    color: #666666; /* Średnioszary */
    background-color: #F8F8F8; /* Bardzo jasny szary */
    font-family: Georgia, serif;
    font-size: 24px; /* Duży tekst */
    font-weight: bold;
    padding: 10px;
  }
</style>

<p class="large-text-contrast">Ten duży, pogrubiony tekst ma współczynnik kontrastu około 4.9:1, spełniając wyjątek WCAG 1.4.6.</p>
Skopiuj tekst

Współczynnik kontrastu dla #666666 na #F8F8F8 wynosi około 4.9:1. Ponieważ tekst jest duży (24px bold), 4.5:1 jest wystarczające zgodnie z wyjątkiem.

Przykład 4: Niepoprawna implementacja (niski kontrast)

Poniższy przykład przedstawia tekst o zbyt niskim kontraście, który nie spełnia ani 7:1, ani 4.5:1.

<style>
  .low-contrast-text {
    color: #AAAAAA; /* Jasnoszary */
    background-color: #FFFFFF; /* Biały */
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
  }
</style>

<p class="low-contrast-text">Ten tekst ma współczynnik kontrastu 2.3:1 i nie spełnia WCAG 1.4.6.</p>
Skopiuj tekst

Współczynnik kontrastu dla #AAAAAA na #FFFFFF wynosi 2.3:1, co jest znacznie poniżej wymaganego 7:1 (lub 4.5:1 dla dużego tekstu) i narusza kryterium 1.4.6.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Domyślny wysoki kontrast: Projektuj strony z domyślnie wysokim kontrastem, aby wszyscy użytkownicy mogli czerpać z tego korzyści.
• Używaj sprawdzonych palet kolorów: Korzystaj z palet kolorów, które zostały przetestowane pod kątem dostępności.
• Alternatywne style CSS: Zapewnij użytkownikom możliwość przełączania się na wersję o wysokim kontraście za pomocą alternatywnych arkuszy stylów lub przełączników w interfejsie.
• Testowanie w realnych warunkach: Poza automatycznymi narzędziami, przeprowadzaj testy z udziałem użytkowników i na różnych urządzeniach.
• Zawsze preferuj tekst: Jeśli to możliwe, używaj prawdziwego tekstu HTML zamiast obrazów tekstu, ponieważ tekst jest łatwiejszy do skalowania i dostosowania kontrastu.

Typowe pułapki:

• Niewystarczający kontrast w stanach interaktywnych: Kolory tekstu i tła elementów w stanach takich jak :hover, :focus czy :active również muszą spełniać wymagania kontrastu.
• Tekst nałożony na obrazy: Tekst umieszczony bezpośrednio na skomplikowanych obrazach często ma zmienny kontrast, co utrudnia czytanie. Należy unikać tego lub zapewnić jednolite tło pod tekstem.
• Używanie tylko koloru do przekazywania informacji: Samo zmienianie koloru tekstu w celu wskazania stanu lub znaczenia jest niedostępne. Zawsze używaj dodatkowych wskazówek wizualnych (np. podkreślenia, ikony, pogrubienie).
• Niski kontrast dla tekstu pomocniczego: Nawet „mniej ważny” tekst (np. etykiety pól formularzy, małe opisy) musi spełniać wymagania kontrastu.
• Zignorowanie ikon tekstowych: Ikony, które są obrazami tekstu (np. czcionki ikonowe), również podlegają wymaganiom kontrastu.