1.4.11 Kontrast elementów nietekstowych (ang.) Non-text Contrast

Specjalizacje:

Content Creator
Designer
Deweloper

Elementy:

Formularze
Nawigacja
Obrazy i grafiki
Przyciski i kontrolki

Poziomy:

Spis treści

Istota i cel kryterium

Celem tego kryterium jest zapewnienie, że kluczowe elementy interfejsu oraz istotne grafiki są dostrzegalne dla osób o obniżonej wrażliwości na kontrast. Wymaga ono, aby informacje wizualne niezbędne do zidentyfikowania komponentów oraz ich stanów, a także istotne części grafik, miały współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów.

Zastosuj to kryterium, aby użytkownicy mogli bez trudu rozpoznać, gdzie mogą wejść w interakcję ze stroną (np. gdzie kończy się pole edycji) oraz poprawnie zinterpretować dane przekazywane obrazem (np. segmenty wykresu).

Definicja w j. angielskim

Definicja dostępna pod adresem (link otworzy się w nowej karcie):
https://www.w3.org/WAI/WCAG22/quickref/#non-text-contrast

Definicja w j. polskim

Definicja dostępna pod adresem (link otworzy się w nowej karcie):
https://www.w3.org/Translations/WCAG21-pl/#kontrast-elementow-nietekstowych

Komponenty interfejsu użytkownika: –
To wszystkie interaktywne części strony, takie jak przyciski, pola edycyjne, menu rozwijane czy suwaki.

Obiekty graficzne: –
Nieaktywne elementy wizualne, których zrozumienie jest niezbędne do pojęcia treści (np. ikony, infografiki).

Sąsiednie kolory: –
Barwy znajdujące się bezpośrednio obok testowanego elementu na ekranie.

Wpływ na dostępność (Kogo wspierasz?)

Użytkownicy w trudnych warunkach oświetleniowych: Osoby korzystające z urządzeń w pełnym słońcu lub przy silnych odblaskach na ekranie, gdzie percepcja barw drastycznie spada.
Osoby z zaburzeniami poznawczymi: Wyraźne rozdzielenie elementów wizualnych pomaga w szybszym zrozumieniu układu strony i zmniejsza wysiłek potrzebny na przetworzenie informacji.
Seniorzy: Osoby, u których wraz z wiekiem naturalnie osłabła wrażliwość na kontrast i zdolność rozróżniania detali.
Osoby z wadami wzroku: Użytkownicy słabowidzący oraz osoby z daltonizmem, dla których zbyt jasne obramowania lub ikony stają się niemal niewidoczne.

Zasady wdrażania i wymagania techniczne

Podczas projektowania i kodowania musisz skupić się na dwóch głównych obszarach:

Elementy sterujące i ich stany:
- Każdy komponent (przycisk, kontrolka, suwak) musi posiadać widoczne granice lub tło o kontraście minimum 3:1.
- Pamiętaj o stanach interaktywnych. Zmiana wyglądu po najechaniu kursorem ((ang.) hover), otrzymaniu fokusu ((ang.) focus) czy oznaczeniu błędu również musi spełniać wymóg kontrastu.
- Wskaźniki fokusu powinny być szczególnie wyraźne, aby użytkownik klawiatury zawsze wiedział, gdzie się znajduje.
Obiekty graficzne (grafika informacyjna):
- Jeśli ikona przekazuje informację (np. koperta oznaczająca wiadomość), jej kształt musi odcinać się od tła z zachowaniem proporcji 3:1.
- W przypadku wykresów, poszczególne serie danych (linie, słupki) muszą być łatwe do odróżnienia od siebie nawzajem lub od tła.

Wyjątki i sytuacje szczególne

Wymóg kontrastu 3:1 nie jest bezwzględny w następujących przypadkach:

Standardy przeglądarki: Elementy, których wygląd nie został w żaden sposób zmodyfikowany przez autora i zależą wyłącznie od ustawień (ang.) User Agent.
Logotypy: Elementy graficzne będące częścią logo lub nazwy marki własnej.
Treści nieaktywne: Przyciski lub pola formularzy, które w danym momencie są wyłączone ((ang.) disabled).
Specyfika informacji: Zdjęcia rzeczywiste, zrzuty ekranu czy diagramy medyczne, gdzie podbicie kontrastu mogłoby zmienić merytoryczny sens przekazu.

Przykłady implementacji

Najczęstsze błędy

F78: Całkowite usuwanie domyślnego obrysu fokusu (np. za pomocą zapisu outline: none lub outline: 0) bądź stylizowanie obramowań i konturów w taki sposób, że wskaźnik fokusu staje się niewidoczny lub zlewa się z tłem.
Stosowanie bardzo jasnych, szarych obramowań wokół pól tekstowych na białym tle.
Projektowanie ikon informacyjnych w pastelowych kolorach bez dodatkowego wzmocnienia ich widoczności.
Ignorowanie stanów interaktywnych elementów i projektowanie wyglądu dla :hover lub :active bez zachowania minimalnego progu kontrastu 3:1.

Najlepsze praktyki

Wielowymiarowość przekazu: Nie polegaj tylko na kolorze. Jeśli ikona zmienia stan, wspieraj to dodatkowym symbolem, tekstem lub zmianą grubości linii.
Grubość linii: Pamiętaj, że cieńsze linie wymagają większej precyzji w doborze kontrastu, by pozostały widoczne.
Dokumentacja stylu: Stwórz bibliotekę komponentów z gotowymi, sprawdzonymi parami kolorystycznymi, które gwarantują zgodność z WCAG.
Weryfikacja luminancji: Testuj kontrast w skali szarości – jeśli elementy stają się nieodróżnialne, prawdopodobnie nie spełniają kryterium.

Metody testowania

WCAG Color contrast checker: Wykorzystaj to narzędzie do precyzyjnego zmierzenia współczynnika kontrastu między elementem nietekstowym a jego tłem. Sprawdzaj parametry dla każdego stanu interaktywnego.
Narzędzie deweloperskie ((ang.) Developer Tools): W inspektorze kodu zweryfikuj wartości kolorów w formacie HEX/RGB i sprawdź, czy style CSS nie nadpisują widoczności wskaźnika fokusu.

Sprawdź swoją wiedzę

W linku poniżej znajduje się 5 elementów interfejsu (przyciski, ikony, wykresy). Twoim zadaniem jest ocena, czy ich granice lub istotne części graficzne mają wystarczający kontrast (minimum 3:1) względem tła.

Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
Proponowane narzędzia: WCAG Color contrast checker, Narzędzie deweloperskie ((ang.) Developer Tools)

Link: https://pdc.ambiscale.com/training/wcag-1-4-11/

#1 BŁĄD

Problem: Obramowanie przycisku ma kolor #e0e0e0. Kontrast względem białego tła wynosi 1.32:1.
Dlaczego: Użytkownik słabowidzący może nie zauważyć granic przycisku i potraktować go jako zwykły tekst. Wymagane jest 3:1.
Naprawa: Przyciemnić ramkę (np. do #767676).

#2 DOBRZE

Dlaczego: Obrys serca ma kolor #595959. Kontrast względem tła wynosi 7:1, co znacznie przekracza wymagane minimum 3:1. Ikona jest wyraźna.

#3 BŁĄD

Problem: Jasnożółty i jasnoniebieski segment stykają się bezpośrednio. Kontrast między nimi jest znikomy (~1.1:1).
Dlaczego: Trudno odróżnić, gdzie kończy się jeden segment, a zaczyna drugi. Wykres staje się nieczytelny.
Naprawa: Dodać kontrastową linię podziału (np. białą lub czarną ramkę) między segmentami.

#4 BŁĄD

Problem: Pole input ma zbyt jasne tło (#f5f5f5) bez ramki, a dodatkowo usunięto wskaźnik fokusu (outline: none).
Dlaczego: Pole jest niemal niewidoczne („niewidzialny input”) w stanie spoczynku (kontrast 1.09:1). Po kliknięciu użytkownik nadal nie widzi, że element jest aktywny, co jest krytycznym błędem dostępności.
Naprawa: Dodać stałe obramowanie o kontraście min. 3:1 oraz przywrócić wyraźny wskaźnik fokusu.