1.4.11Poziom AA1.4 Distinguishable

Kontrast elementów nietekstowych

Visual presentation of user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors, with exceptions for inactive components and where appearance is determined by the user agent.

Zobacz specyfikację W3C ↗axe: color-contrast

Co to oznacza

Zrozumieć KS Kontrast elementów nietekstowych | Jak spełnić KS 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.

Failing example

/* Fails: checkbox border barely visible on white background */
input[type="checkbox"] {
  border: 1px solid #cccccc; /* ~1.6:1 contrast on white */
}

How to fix it

/* Pass: checkbox border meets 3:1 on white */
input[type="checkbox"] {
  border: 2px solid #767676; /* 4.5:1 on white — exceeds 3:1 */
}

Jak A11yRisk to wykrywa

A11yRisk wykrywa to kryterium automatycznie.

Skanuj swoją witrynę pod kątem tego naruszenia →