1.4.3 Kontrast (minimalny) - poziom AA

Wymaganie mówi o tym, żeby tekst dało się normalnie przeczytać, nawet jeśli ktoś ma słabszy wzrok, korzysta z telefonu w słońcu albo ma ustawiony inny kontrast ekranu. Dlatego WCAG wprowadza konkretne progi kontrastu między tekstem a tłem. 

O co chodzi w praktyce?

Jeśli na stronie masz tekst, który jest „jasnoszary na białym”, „żółty na białym”, „granatowy na czarnym”, to dla części osób taki tekst po prostu znika. I nawet jeśli Tobie wydaje się czytelny, to przy innym ekranie, innym oświetleniu albo przy powiększeniu może być nie do przeczytania. To kryterium ma temu zapobiegać. 

Jakie są progi kontrastu?

WCAG podaje dwa podstawowe wymagania:

1. Dla zwykłego tekstu kontrast ma wynosić co najmniej 4,5:1.
2. Dla dużego tekstu kontrast ma wynosić co najmniej 3:1.

To nie jest kwestia gustu, tylko mierzalny wskaźnik. W samym kryterium jest też doprecyzowanie, co WCAG rozumie jako duży tekst (większy/cięższy), bo to wpływa na czytanie i na to kiedy jest łatwiejsze, dlatego próg może być niższy w przypadku dużego tekstu.

Kiedy 1.4.3 nie wymaga kontrastu?

WCAG wskazuje wyjątki, które w praktyce często pojawiają się w komunikacji wizualnej:

• Jeśli tekst jest częścią logo lub znaku firmowego, to wymóg nie obowiązuje.
• Tekst jest incydentalny (czyli nie jest istotny dla zrozumienia treści) albo jest elementem dekoracyjnym.

Warto tu myśleć prosto: jeżeli użytkownik musi to przeczytać, żeby zrozumieć stronę albo wykonać zadanie, to kontrast ma znaczenie.

Gdzie najczęściej strony niespełniają 1.4.3?

Najczęściej problem dotyczy drobnych, ale kluczowych elementów: tekstów pomocniczych w formularzach, placeholderów, opisów pod polami, informacji o błędach, linków w treści, filtrów i etykiet w listach, przycisków z jasnym tekstem na jasnym tle, napisów na banerach.

Jak to szybko sprawdzić przed publikacją?

Najprościej: wybierz kilka miejsc na stronie, gdzie tekst jest najmniejszy i najjaśniejszy (to zwykle najsłabsze punkty) i sprawdź kontrast narzędziem do mierzenia kontrastu. Jeśli dla zwykłego tekstu nie osiągasz 4,5:1, to 1.4.3 nie jest spełnione. Jeśli to duży tekst, celujesz w 3:1. Proste prawda?

Pełny tekst kryterium 1.4.3 Kontrast (minimalny) 

Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza następującymi wyjątkami:

• Duży tekst - duży tekst oraz grafiki takiego tekstu posiadają kontrast przynajmniej 3:1;
• Incydentalne - tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika, które są czystą dekoracją , które nie są widoczne lub które są częścią obrazu zawierającego inne istotne treści wizualne, nie wymagają minimalnego kontrastu;
• Logotyp - tekst, który jest częścią logo lub nazwy własnej produktu (marki), nie wymaga minimalnego kontrastu.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#kontrast-minimum

Chcesz wiedzieć więcej?

• 1.1.1 Treść nietekstowa - poziom A
• 1.2.1 Tylko audio lub tylko wideo (nagranie) - poziom A
• 1.2.2 Napisy rozszerzone (nagranie) - poziom A
• 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Poziom A
• 1.2.4 Napisy rozszerzone (na żywo) - poziom AA
• 1.2.5 Audiodeskrypcja (nagranie) - poziom AA
• 1.2.6 Język migowy (nagranie) - poziom AAA
• 1.2.7 Rozszerzona audiodeskrypcja (nagranie) - poziom AAA
• 1.2.8 Alternatywa dla mediów (nagranie) - poziom AAA
• 1.2.9 Tylko audio (na żywo) - poziom AAA
• 1.3.1 Informacje i relacje - poziom A
• 1.3.2 Zrozumiała kolejność - poziom A
• 1.3.3 Właściwości zmysłowe - poziom A
• 1.3.4 Orientacja - poziom AA
• 1.3.5 Określenie pożądanej wartości - poziom AA
• 1.3.6 Określenie przeznaczenia - poziom AAA
• 1.4.1 Użycie koloru - poziom A
• 1.4.2 Kontrola odtwarzania dźwięku - poziom A
• 1.4.3 Kontrast (minimalny) - poziom AA
• 1.4.4 Zmiana rozmiaru tekstu - poziom AA
• 1.4.5 Obrazy tekstu - poziom AA
• 1.4.6 Kontrast (wzmocniony) - poziom AAA
• 1.4.7 Niska głośność lub bez dźwięków w tle - poziom AAA
• 1.4.8 Prezentacja wizualna - poziom AAA
• 1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA
• 1.4.10 Dopasowanie do ekranu - poziom AA
• 1.4.11 Kontrast elementów nietekstowych - poziom AA
• 1.4.12 Odstępy w tekście - poziom AA
• 1.4.13 Treść spod kursora lub fokusu - poziom AA