1.4.11Niveau AA1.4 Distinguishable

Contrast van niet-tekstuele content

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.

Bekijk W3C-specificatie ↗axe: color-contrast

Wat het betekent

Contrast van niet-tekstuele content begrijpen | Hoe te voldoen aan Contrast van niet-tekstuele content (Niveau AA) De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren: Componenten van de gebruikersinterface Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur; Grafische objecten Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.

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

Hoe A11yRisk dit detecteert

A11yRisk detecteert dit criterium automatisch.

Scan uw site op deze overtreding →