WCAG 1.4.3: Kontrast (minimalny)

Kryterium sukcesu WCAG 1.4.3 „Kontrast (minimalny)” na poziomie AA (WCAG 2.0 i 2.1) określa minimalne wymagania dotyczące współczynnika kontrastu między tekstem (i obrazami tekstu) a tłem. Celem jest zapewnienie, że tekst jest czytelny dla jak najszerszego grona użytkowników, w tym dla osób z różnymi wadami wzroku, takich jak słaby wzrok, zaćma, daltonizm czy inne zaburzenia postrzegania kolorów.

Zgodnie z tym kryterium, standardowy tekst musi mieć współczynnik kontrastu co najmniej 4.5:1, aby być zgodnym. Istnieją jednak pewne wyjątki od tej reguły, które zostaną szczegółowo omówione.

Dlaczego kontrast ma znaczenie?

Odpowiedni kontrast kolorystyczny jest fundamentalnym elementem dostępności i użyteczności strony internetowej. Bez wystarczającego kontrastu, tekst staje się trudny, a czasem niemożliwy do odczytania, co znacząco utrudnia lub uniemożliwia korzystanie z witryny.

• Osoby z wadami wzroku: Użytkownicy z niską ostrością wzroku, jaskrą, zaćmą, retinopatią cukrzycową, czy innymi schorzeniami oczu, często mają problemy z rozróżnianiem kolorów o niskim kontraście. Wysoki kontrast pozwala im lepiej odróżniać tekst od tła.
• Osoby starsze: Wraz z wiekiem naturalnie zmniejsza się zdolność oka do postrzegania kontrastu i kolorów. Odpowiedni kontrast wspiera czytelność treści dla tej grupy użytkowników.
• Osoby z daltonizmem: Chociaż daltonizm dotyczy percepcji kolorów, niektóre kombinacje kolorów o niskim kontraście mogą być szczególnie trudne do odczytania dla osób z różnymi typami daltonizmu.
• Osoby w trudnych warunkach oświetleniowych: Niewystarczający kontrast sprawia, że tekst jest słabo czytelny w jasnym świetle słonecznym, na ekranach niskiej jakości lub gdy ekran jest zabrudzony.
• Osoby z zaburzeniami poznawczymi: Wysoki kontrast zmniejsza obciążenie poznawcze, ułatwiając szybkie przetwarzanie informacji i skupienie się na treści.

Szczegółowe wymagania kryterium 1.4.3

Główna zasada kryterium 1.4.3 stanowi, że tekst i obrazy tekstu muszą mieć współczynnik kontrastu co najmniej 4.5:1 w stosunku do tła. Obrazy tekstu to grafiki zawierające słowa, akapity, czy inne fragmenty tekstu, które nie są renderowane jako prawdziwy tekst, ale jako obrazek.

Wyjątki od zasady kontrastu:

Istnieją określone sytuacje, w których wymagania dotyczące minimalnego kontrastu nie mają zastosowania:

• Duży tekst: Tekst o rozmiarze 18 punktów (ok. 24 pikseli) lub większy, albo tekst pogrubiony o rozmiarze 14 punktów (ok. 18.5 piksela) lub większy, musi mieć współczynnik kontrastu co najmniej 3:1. Wynika to z faktu, że większy tekst jest z natury łatwiejszy do odczytania, nawet przy niższym kontraście.
• Tekst incydentalny (dekoracyjny): Tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika (np. przycisk, który jest wyłączony), które są czysto dekoracyjne, nie są widoczne dla nikogo, lub są częścią obrazka zawierającego inne znaczące treści wizualne, nie mają wymagań dotyczących kontrastu.
  • Przykład tekstu dekoracyjnego: Napis, który jest używany wyłącznie do celów estetycznych i nie przekazuje istotnej informacji, np. powtarzający się wzór tekstowy w tle.
  • Przykład tekstu niewidocznego: Tekst, który jest ukryty poprzez CSS (display: none;, visibility: hidden;) lub poza obszarem widzenia.
  • Przykład tekstu w obrazie: Tekst na zdjęciu, np. napis na billboardzie w tle krajobrazu, gdzie główna treść obrazu nie jest tekstem.
• Logotypy: Tekst, który jest częścią logo lub nazwy marki, nie ma wymagań dotyczących kontrastu. Zakłada się, że logo jest elementem graficznym, a jego wygląd podlega innym zasadom projektowania wizualnego. Ważne jest jednak, aby alternatywny tekst dla logotypu był dostępny, jeśli przekazuje on kluczową informację.

Praktyczne wskazówki dotyczące zgodności

Zapewnienie zgodności z kryterium 1.4.3 wymaga świadomego projektowania i testowania. Oto kluczowe kroki:

• Wybór palety kolorów: Na etapie projektowania, wybieraj kolory tekstu i tła, które zapewniają odpowiedni kontrast. Preferuj wysoki kontrast dla kluczowych elementów treści.
• Użycie narzędzi do sprawdzania kontrastu: Istnieje wiele darmowych narzędzi online i rozszerzeń przeglądarkowych, które mogą mierzyć współczynnik kontrastu między dwoma kolorami. Przykłady to WebAIM Contrast Checker, Colour Contrast Analyser (do pobrania), lub wbudowane narzędzia w przeglądarkach (np. DevTools w Chrome, Firefox).
• Testowanie rzeczywistych treści: Nie polegaj wyłącznie na projektach. Sprawdzaj kontrast na rzeczywistej stronie, biorąc pod uwagę wszystkie style CSS, które mogą wpływać na kolory (np. linki w stanie :hover, :focus, :active).
• Dynamiczne zmiany kolorów: Jeśli strona oferuje tryby jasne/ciemne lub możliwość personalizacji kolorów przez użytkownika, upewnij się, że wszystkie warianty kolorystyczne spełniają wymagania kontrastu.
• Obrazy tekstu: Unikaj obrazów tekstu, jeśli to możliwe. Zawsze lepiej jest używać prawdziwego tekstu, ponieważ umożliwia to użytkownikom skalowanie, zmianę czcionki i dostosowywanie, a także ułatwia SEO. Jeśli musisz użyć obrazu tekstu, upewnij się, że jego kontrast jest zgodny z kryterium.

Przykłady implementacji

Przykład 1: Tekst standardowy (wymagany kontrast 4.5:1)

Niepoprawna implementacja:

<style>
  .low-contrast-text {
    color: #888; /* Jasnoszary */
    background-color: #f0f0f0; /* Jasne tło */
    font-size: 16px;
  }
</style>
<p class="low-contrast-text">Ten tekst ma zbyt niski kontrast (np. 2.0:1) i jest trudny do odczytania.</p>
Skopiuj tekst

Poprawna implementacja:

<style>
  .high-contrast-text {
    color: #333; /* Ciemnoszary */
    background-color: #f0f0f0; /* Jasne tło */
    font-size: 16px;
  }
</style>
<p class="high-contrast-text">Ten tekst ma wystarczający kontrast (np. 7.6:1) i jest łatwo czytelny.</p>
Skopiuj tekst

Przykład 2: Duży tekst (wymagany kontrast 3:1)

Niepoprawna implementacja:

<style>
  .low-contrast-large-text {
    color: #999; /* Jasnoszary */
    background-color: #fff; /* Białe tło */
    font-size: 24px; /* Duży tekst */
    font-weight: normal;
  }
</style>
<h2 class="low-contrast-large-text">Ten duży nagłówek ma zbyt niski kontrast.</h2>
Skopiuj tekst

Poprawna implementacja:

<style>
  .high-contrast-large-text {
    color: #767676; /* Średnioszary */
    background-color: #fff; /* Białe tło */
    font-size: 24px; /* Duży tekst */
    font-weight: normal;
  }
</style>
<h2 class="high-contrast-large-text">Ten duży nagłówek ma wystarczający kontrast.</h2>
Skopiuj tekst

Przykład 3: Obrazy tekstu

Załóżmy, że zamiast standardowego HTML, używamy obrazu z tekstem.

Niepoprawna implementacja:

<img src="niskokontrastowy-tekst.png" alt="Ważna informacja o niskim kontraście">
<!-- obraz niskokontrastowy-tekst.png zawiera tekst o kontraście 2.8:1 -->
Skopiuj tekst

Poprawna implementacja:

<img src="wysokokontrastowy-tekst.png" alt="Ważna informacja o wysokim kontraście">
<!-- obraz wysokokontrastowy-tekst.png zawiera tekst o kontraście 5.5:1 -->
Skopiuj tekst

Dobre praktyki i typowe pułapki

• Nie polegaj wyłącznie na kolorze: Kontrast to tylko jeden z aspektów. Używaj również innych wizualnych wskazówek, takich jak rozmiar czcionki, pogrubienie, podkreślenie, aby wyróżnić ważne informacje. To pomaga również osobom z daltonizmem.
• Testowanie dynamicznych stanów: Pamiętaj, aby sprawdzać kontrast linków, przycisków i innych interaktywnych elementów w ich różnych stanach (:hover, :focus, :active). Często projektanci zapominają o tych stanach, tworząc niedostępne interakcje.
• Unikaj gradientów jako tła tekstu: Umieszczanie tekstu na tle z gradientem może sprawić, że części tekstu będą miały dobry kontrast, a inne – niewystarczający. Jeśli musisz użyć gradientu, upewnij się, że każdy fragment tekstu ma minimalny kontrast wobec przylegającego tła.
• Tło obrazów: Umieszczanie tekstu bezpośrednio na obrazie tła jest ryzykowne. Kolory obrazu mogą być zmienne, co utrudnia utrzymanie spójnego kontrastu. Jeśli to konieczne, użyj półprzezroczystego tła (overlay) za tekstem, aby zapewnić stały kontrast.
• Oprogramowanie do testowania: Zintegruj narzędzia do sprawdzania kontrastu z procesem rozwoju i testowania. Automatyczne testy mogą wychwycić podstawowe błędy, ale ręczne sprawdzenie jest kluczowe dla kontekstowych przypadków.
• Uwaga na JavaScript: Jeśli JavaScript zmienia style lub treści dynamicznie (np. przełączając motywy jasny/ciemny), upewnij się, że wszystkie dynamicznie generowane lub modyfikowane treści również spełniają wymogi kontrastu.

Podsumowanie

Zgodność z WCAG 1.4.3 jest kluczowa dla zapewnienia czytelności i dostępności cyfrowych treści. Staranne planowanie kolorystyki, regularne testowanie i świadomość wyjątków od reguły 4.5:1 (i 3:1 dla dużego tekstu) pomogą w tworzeniu stron internetowych, które są użyteczne dla wszystkich użytkowników, niezależnie od ich zdolności wzrokowych. Inwestycja w dobry kontrast to inwestycja w uniwersalny design i pozytywne doświadczenia użytkowników.