1.4.11Stufe AA1.4 Distinguishable

Nicht-Text-Kontrast

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.

W3C-Spezifikation ansehen ↗axe: color-contrast

Was es bedeutet

Nicht-Text-Kontrast verstehen (englisch) | Nicht-Text-Kontrast erfüllen (englisch) (Stufe AA) Ein Kontrastverhältnis von mindestens 3:1 zu benachbarten Farben gilt für die visuelle Präsentation von: Bestandteilen der Benutzerschnittstelle Visuelle Informationen, die zur Identifizierung von Bestandteilen der Benutzerschnittstelle und Zuständen benötigt werden, außer bei inaktiven Bestandteilen oder wenn das Aussehen des Bestandteils durch den Benutzeragenten bestimmt und nicht vom Autor geändert wird; Grafische Objekte Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind, es sei denn, eine bestimmte Präsentation von Grafiken ist unentbehrlich für die zu vermittelnde Information.

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

So erkennt A11yRisk dieses Kriterium

A11yRisk erkennt dieses Kriterium automatisch.

Website auf diesen Verstoß prüfen →