W skrócie:
- współczynnik kontrastu dla tekstu lub obrazu tekstu powinien wynosić przynajmniej 4,5:1,
- dla treści nietekstowych (wykresy, obramowania tabel itp.) i dużego tekstu oraz obrazu takiego tekstu przynajmniej 3:1,
- weryfikacji współczynnika kontrastu np. za pomocą darmowego oprogramowania Colour Contrast Analyser.
- szczegóły poniżej.
Prawidłowy współczynnik kontrastu jest bardzo ważnym elementem dostępności zasobów cyfrowych.
Współczynnik kontrastu dla elementów tekstowych
Współczynnik kontrastu dla tekstu lub obrazu tekstu powinien wynosić przynajmniej 4,5:1.
Optymalnym rozwiązaniem jest stosowanie kontrastu na poziomie 7:1 (poziom AAA), najlepszym - czarny kolor czcionki i białe tło.
Wyjątki od powyższej zasady
- współczynnik kontrastu dla dużego tekstu oraz obrazu takiego tekstu powinien wynosić przynajmniej 3:1,
- kryterium kontrastu nie stosuje się w przypadku gdy tekst lub obraz tekstu:
- jest częścią nieaktywnego elementu interfejsu użytkownika,
- jest czystą dekoracją,
- nie jest widoczny dla nikogo,
- jest częścią obrazu, który zawiera inne istotne treści wizualne,
- jest częścią logo lub nazwy własnej produktu (marki)
Współczynnik kontrastu dla elementów nietekstowych
Współczynnik kontrastu wizualnej prezentacji nietekstowych elementów względem sąsiednich kolorów powinien wynosić przynajmniej 3:1.
Dotyczy m.in.: wykresów, obramowań tabel, ikon przenoszących znaczenie, punktorów list itp.
Weryfikacja współczynnika kontrastu
Weryfikacji współczynnika kontrastu można dokonać za pomocą darmowego oprogramowania np. Colour Contrast Analyser.
Kryteria sukcesu WCAG dla kontrastu
WCAG 2.1, kryterium sukcesu: 1.4.3 Kontrast (minimum) (poziom AA)
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.
WCAG 2.1, kryterium sukcesu: 1.4.11 Kontrast elementów nietekstowych (poziom AA)
Wizualna prezentacja następujących elementów ma współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów:
- Komponenty interfejsu użytkownika: Informacje wizualne wymagane do identyfikacji komponentów interfejsu użytkownika i ich stanów , z wyjątkiem nieaktywnych składników lub gdy wygląd komponentu jest określony przez agenta użytkownika i nie jest modyfikowany przez autora;
- Obiekty graficzne: Części grafiki wymagane do zrozumienia treści, z wyjątkiem sytuacji, gdy konkretna prezentacja grafiki ma istotne znaczenie dla przekazywanych informacji.
WCAG 2.1, kryterium sukcesu: 1.4.6 Kontrast (wzmocniony) (poziom AAA - niewymagane/zalecane)
Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 7:1, poza następującymi wyjątkami:
- Duży tekst: Duży tekst oraz grafiki takiego tekstu posiadają kontrast przynajmniej 4,5: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ą wzmocnionego kontrastu;
- Logotyp: Tekst, który jest częścią logo lub nazwy własnej produktu (marki), nie wymaga wzmocnionego kontrastu.