Postrzegalność · Poziom AA

1.4.11 Kontrast elementów nietekstowych

Ważne elementy nietekstowe, na przykład ikony, pola formularzy, przyciski, wykresy i wskaźniki fokusu, muszą być wystarczająco widoczne.

Krótko

Ważne elementy nietekstowe, takie jak ikony, obramowania pól, przyciski, wykresy i wskaźniki fokusu, muszą być wystarczająco widoczne względem tła lub sąsiednich kolorów.

Problem w praktyce

Użytkownik widzi formularz, ale obramowanie pola jest prawie niewidoczne. Ikona błędu jest bardzo jasna. Fokus klawiatury zlewa się z tłem. Wykres używa subtelnych linii, których trudno odróżnić.

W efekcie użytkownik może nie rozpoznać elementu interaktywnego, stanu błędu albo informacji przedstawionej graficznie. To kryterium dotyczy elementów nietekstowych. Tekst i obrazy tekstu ocenia się przede wszystkim w kryterium 1.4.3.

Kogo to dotyczy

  • Osób słabowidzących, które potrzebują wyraźnych granic i kształtów elementów.
  • Osób z zaburzeniami widzenia barw, dla których subtelne różnice kolorów mogą być niewidoczne.
  • Osób starszych, u których spada wrażliwość na kontrast.
  • Osób korzystających z urządzeń mobilnych w słońcu.
  • Osób korzystających z ekranów niskiej jakości albo z obniżoną jasnością.
  • Osób korzystających z klawiatury, które muszą widzieć aktualny fokus.
  • Osób z trudnościami poznawczymi, które potrzebują wyraźnych stanów interfejsu.

Dobry przykład

  • Obramowanie pola formularza jest wyraźnie widoczne.
  • Ikona błędu ma dobry kontrast i towarzyszy jej tekst.
  • Wskaźnik fokusu ma kontrast minimum 3:1 względem tła lub sąsiednich kolorów.
  • Przycisk ma wyraźną granicę albo tło.
  • Linie na wykresie są wystarczająco widoczne.
  • Stan aktywny elementu interfejsu nie opiera się na bardzo subtelnej zmianie koloru.

Zły przykład

  • Jasnoszare obramowanie pola na białym tle.
  • Ikona jako jedyny nośnik błędu i do tego o niskim kontraście.
  • Fokus jako bardzo cienka, blada linia.
  • Przycisk bez widocznej granicy na podobnym tle.
  • Wykres z jasnymi liniami na jasnym tle.
  • Przełącznik, którego stan aktywny jest ledwo zauważalny.

Wymagane wartości kontrastu

  • Ważne elementy nietekstowe muszą mieć kontrast co najmniej 3:1.
  • Dotyczy to między innymi elementów interfejsu i informacji graficznych.
  • Nie każdy element ozdobny musi spełniać 1.4.11.
  • Element dekoracyjny, który nie przekazuje informacji i nie jest potrzebny do obsługi, może być wyjątkiem.
  • Jeśli element jest potrzebny do zrozumienia treści albo obsługi interfejsu, powinien być dobrze widoczny.

Przykłady kodu

Dobry kontrast obramowania pola

Obramowanie pola jest widoczne i pomaga rozpoznać granice kontrolki.

Kod — CSS

.form-field {
  border: 2px solid #5F28B4;
  background-color: #ffffff;
}

Jak to działa

Wyraźna granica pola pomaga zobaczyć, gdzie zaczyna się kontrolka i gdzie można wprowadzić dane.

Zły przykład obramowania

Bardzo jasne obramowanie może być niewidoczne dla wielu użytkowników.

Kod — CSS

.form-field {
  border: 1px solid #eeeeee;
  background-color: #ffffff;
}

Jak to działa

Pole wygląda minimalistycznie, ale jego granica może zniknąć na jasnym tle albo słabszym ekranie.

Dobry wskaźnik fokusu

Wskaźnik fokusu jest wyraźny i pomaga użytkownikowi klawiatury zorientować się, gdzie aktualnie jest.

Kod — CSS

button:focus-visible {
  outline: 3px solid #FA9632;
  outline-offset: 3px;
}

Jak to działa

Gruby, odsunięty obrys jest łatwiejszy do zauważenia niż delikatna zmiana koloru tła.

Przykład graficzny

To jest statyczne demo edukacyjne. Pokazuje różnicę między subtelnym i wyraźnym kontrastem elementów nietekstowych.

Źle

Pole formularza

Obramowanie pola jest tak blade, że granica kontrolki może zniknąć.

Ryzykownie

Subtelna ikona i linia wykresu mogą być trudne do odróżnienia od tła.

Dobrze

Aktywny przycisk

Granica, tło i obrys są wyraźne, więc element łatwo rozpoznać.

Porównanie trzech wariantów kontrastu elementów nietekstowych. Ocena jest opisana tekstowo, a nie tylko kolorem.

Jak sprawdzić

  1. Znajdź elementy nietekstowe na stronie: ikony, przyciski, pola formularzy, obramowania, linie wykresów, stany aktywne i fokus.
  2. Ustal, które z nich są informacyjne albo potrzebne do obsługi.
  3. Sprawdź kontrast tych elementów względem tła albo sąsiednich kolorów.
  4. Dla ważnych elementów nietekstowych przyjmij minimum 3:1.
  5. Sprawdź różne stany komponentów: normalny, hover, focus, active, disabled i error.
  6. Sprawdź formularze: czy granice pól i komunikaty błędów są widoczne.
  7. Sprawdź fokus klawiatury.
  8. Sprawdź wykresy i infografiki.
  9. Użyj narzędzi: Colour Contrast Analyser, WebAIM Contrast Checker, DevTools, axe DevTools albo WAVE.
  10. Nie kończ oceny na automacie. Wiele przypadków wymaga oceny manualnej.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • Część problemów z kontrastem komponentów.
  • Niektóre problemy z kontrastem ikon SVG.
  • Część problemów z obramowaniami i stanami interfejsu.
  • Niektóre przypadki niskiego kontrastu fokusu.

Automat nie oceni pewnie

  • Wszystkich ikon jako elementów informacyjnych.
  • Wykresów i infografik.
  • Elementów generowanych dynamicznie.
  • Kontrastu na złożonym tle.
  • Wszystkich stanów komponentów.
  • Tego, czy element jest dekoracyjny czy potrzebny do zrozumienia treści.

Typowe błędy

  • Bladoszare obramowania pól formularza.
  • Subtelne ikony bez tekstu.
  • Fokus widoczny tylko jako cienka, jasna linia.
  • Przyciski bez wyraźnej granicy.
  • Przełączniki z nieczytelnym stanem włączony/wyłączony.
  • Wykresy z liniami o zbyt niskim kontraście.
  • Komponenty „premium/minimalistyczne”, które są eleganckie, ale niewidoczne.
  • Stany disabled tak blade, że wyglądają jak brakujące elementy.