Zu geringer Farbkontrast

WCAG 1.4.3 (AA) · EN 301 549 9.1.4.3

Es gibt Text in {fontSize} mit einem Kontrastverhältnis von {ratio} zum Hintergrund, während die Norm {required} verlangt.

Warum das zählt

Das ist die verbreitetste Barriere und die, die die meisten Menschen betrifft: müde Augen, ein Telefon in praller Sonne, ein billiger Bildschirm. Man braucht keine diagnostizierte Behinderung, um Hellgrau auf Weiß nicht lesen zu können.

Der Text, der üblicherweise durchfällt, ist genau der Text, der verkauft: durchgestrichene Preise, Versandkosten, Lagerhinweise.

So wird es behoben

Dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, bis das geforderte Verhältnis erreicht ist. Normaler Text braucht 4,5:1; ab 24 px (oder 18,66 px fett) genügen 3:1. Grautöne um #999 auf Weiß bestehen so gut wie nie.

/* 2,85:1 — durchgefallen */
.alter-preis { color: #999999; background: #ffffff; }

/* 4,83:1 — bestanden */
.alter-preis { color: #717171; background: #ffffff; }

In Ihrem System

• Shopify

  Im Theme-Editor lassen sich unter Einstellungen › Farben die Farbschemata ändern, ohne Code anzufassen.

• WooCommerce

  Im Customizer unter Farben; bietet das Theme das nicht an, ergänzen Sie es unter Zusätzliches CSS.