Elemente müssen einen ausreichenden Farbkontrast haben.

Warum es diese Prüfung gibt

Das ist der mit Abstand häufigste Fehlschlag im Web, auf mehr als vier von fünf Startseiten. Er trifft alle mit verringerter Kontrastempfindlichkeit, und das sind irgendwann die meisten Menschen über sechzig.

Was sie üblicherweise auslöst

• fällt durchGrauer Platzhalter- oder Hilfetext auf Weiß — das klassische #999 auf #fff sind 2,8:1.
• fällt durchWeißer Text auf einer Markenfarbe, die für ein Logo gewählt wurde und nicht für Fließtext.
• fällt durchText über einem Foto ohne abdunkelnde Fläche.
• fällt durchEin deaktivierter Zustand, so weit ausgeblichen, dass niemand liest, was deaktiviert ist.

So beheben Sie es

• tunMessen Sie, bevor Sie ausliefern. Großer Text heißt 18,66 px fett oder 24 px normal — alles andere braucht 4,5:1.
• tunDunkeln Sie eher den Text ab, als den Hintergrund aufzuhellen; das erhält den Entwurf meist besser.
• tunÜber Bildern eine deckende Abdunklung oder einen Textschatten, der selbst das Verhältnis erfüllt.
• tunBei deaktivierten Bedienelementen den Text lesbar halten und den Zustand in Worten anzeigen.

Wie es gemeldet wird

A11ySignal meldet das mit der Schwere schwerwiegend. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:

https://dequeuniversity.com/rules/axe/4.13/color-contrast ↗

Prüfung umgesetzt in axe-core 4.13.0, © Deque Systems, MPL-2.0.