Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Schwerwiegend

Text ist wegen zu geringen Kontrasts schwer lesbar

Einige Texte sind zu hell für ihren Hintergrund, zum Beispiel grauer Text auf Weiß oder weißer Text auf einem blassen Button.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Kunden, die weniger scharf sehen, ältere Menschen und alle, die das Smartphone im Freien nutzen, übersehen womöglich Preise, Lieferbedingungen oder Button-Beschriftungen. Schwer lesbarer Text führt zu Zögern und abgebrochenen Warenkörben.

Wen es betrifft

  • Menschen mit Sehschwäche
  • ältere Kundinnen und Kunden
  • Menschen mit Farbsehschwäche
  • Smartphone-Nutzer bei hellem Licht

So beheben Sie es

Sorgen Sie für ein Kontrastverhältnis von mindestens 4.5:1 bei normalem Text und 3:1 bei großem Text (24px oder 18.66px fett). Prüfen Sie Platzhalter, deaktiviert wirkende Zustände, Text auf Bildern und Rabatt-Badges. Passen Sie Farben in den Design-Tokens oder im CSS an statt Element für Element.

Bei Shopify

Meist durch das Farbschema des Themes bedingt. Passen Sie zuerst Text- und Hintergrundfarben in den Farbeinstellungen des Theme-Editors an; sind Farben im Theme fest codiert, ändern Sie sie im CSS oder in den Liquid-Sections des Themes.

Bei Shoptet (CZ)

Meist durch das gewählte Template und seine Farbeinstellungen bedingt. Passen Sie die Farben in den Template-Einstellungen an oder ergänzen Sie eigenes CSS über die Optionen für eigenen Code, die Shoptet bietet.

Bei PrestaShop

Meist im CSS des Themes definiert. Überschreiben Sie Farben in der Custom-CSS-Datei des Themes oder in einem Child-Theme; manche Themes bieten Farboptionen in ihrem Konfigurationsmodul.

Bei WooCommerce

Meist durch das aktive Theme oder den Page-Builder festgelegt. Ändern Sie die Farben im Customizer oder in den globalen Stilen des Themes oder überschreiben Sie sie im CSS eines Child-Themes, damit Updates die Korrektur nicht rückgängig machen.

Standards

Standards
StandardAbschnitt
WCAG 2.2 1.4.3 (AA) Contrast (Minimum)
WCAG 2.1 1.4.3 (AA) Contrast (Minimum)
WCAG 2.0 1.4.3 (AA) Contrast (Minimum)
EN 301 549 4.1.1 9.1.4.3
EN 301 549 3.2.1 9.1.4.3
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.4.3

Automatische Prüfung: axe-core-Regel color-contrast. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen