Text (Überschriften, Fließtexte, Text auf Buttons etc.) müssen zum Hintergrund einen Mindestkontrast von 4,5:1 haben.

Das gilt für Texte, die kleiner als 24px sind. Texte, die größer sind, dürfen einen Kontrast von 3:1 haben. Wir würden aber empfehlen, nie unter 4,5:1 zu gehen.

Text in oder auf Bildern müssen die Kontrastanforderungen von 4,5:1 erfüllen. Außer der Text ist über 24px groß, dann reicht 3:1.

Die Kontraste von Elemente in Infografiken müssen mindestens 3:1 sein – soweit sie für das Verständnis der Grafik nötig sind. Und auch die Elemente zueinander müssen einen Kontrast von 3:1 haben.

Bedienelemente (Buttons, klickbare Icons, Inputfelder) müssen einen Kontrast von 3:1 zum Hintergrund haben.

Wenn der Text eines Bedienelements (z. B. Button) die Kontrastanforderung (4,5:1) zum Hintergrund schon erfüllt, muss es das Bedienelement selbst nicht tun.

Wir würden trotzdem empfehlen, den Kontrast des Bedienelements von 3:1 immer einzuhalten.

Linktexte benötigen einen Kontrast von 4,5:1 zum Hintergrund, in all ihren Zuständen (Hover, Aktiv, Fokus etc.)

Links, die sich in Texten (Fließtexten, Labels etc.) befinden, müssen einen Mindestkontrast von 3:1 zu den anderen Texten drumherum aufweisen. (wenn der Link nur durch Farbe gekennzeichnet ist.

Der Kontrast von Fokusrahmen um Bedienelemente muss mindestens 3:1 zu seinem Hintergrund haben.

Ab besten ist ein doppelter Fokusrahmen mit schwarzer und weißer Linien. Siehe Artikel von Sara Soueidan (englisch).

Bedienelemente (Buttons, Icons etc.), die (gerade) nicht klickbar sind, müssen keine Kotrastanforderungen erfüllen. Wir würden es dennoch empfehlen, sich an den Mindestkontrast von 3:1 zu halten!

Logos müssen leider keinerlei Kontrastanforderungen erfüllen – es sei denn, sie werden als klickbares Bedienelement genutzt (z. B. um zur Startseite zu verlinken).