1.4.11Niveau AA1.4 Distinguishable

Contraste du contenu non textuel

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.

Voir la spécification W3C ↗axe: color-contrast

Ce que cela signifie

Comprendre Contraste du contenu non textuel (en anglais) | Comment satisfaire à Contraste du contenu non textuel (en anglais) (Niveau AA) La présentation visuelle des éléments suivants a un rapport de contraste d’au moins 3:1 avec la ou les couleurs adjacentes : Composants d’interface utilisateur informations visuelles nécessaires à l’identification des composants et des états de l’interface utilisateur, à l’exception des composants inactifs ou lorsque l’apparence du composant est déterminée par l’agent utilisateur et non modifiée par l’auteur ; Objets graphiques parties d’éléments graphiques nécessaires à la compréhension du contenu, sauf si une présentation spécifique de ces éléments est essentielle à l’information transmise.

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 */
}

Comment A11yRisk détecte cela

A11yRisk détecte ce critère automatiquement.

Analyser votre site pour cette violation →