Barrierefreies Webdesign – Farbkontraste für Texte, Buttons und Hintergründe

Am 28.06.2025 tritt das Barrierefreiheitsstärkungsgesetz (kurz: BFSG) in Kraft. Dieser Beitrag ist der 1. Teil einer Mini-Serie zum Thema barrierefreie Websitegestaltung. Lies dazu auch den Beitrag „Barrierefreie Website – ja oder nein?“

Wenn du nicht sicher bist, ob du vom BFSG betroffen bist, kannst du hier einen kostenlosen Barrierefreiheits-Check* von eRecht24 machen.

Warum Kontraste auf jeder Website wichtig sind

Nach dem BFSG gibt es ganz klare Vorgaben, welchen Kontrast Texte und Hintergründe haben müssen, um der Barrierefreiheit zu entsprechen.

In meinem Einleitungsbeitrag habe ich schon erwähnt, dass es bei dieser Serie nicht so sehr um Barrierefreiheit geht, denn die meisten meiner Kunden sind von dieser Pflicht nicht betroffen. Vielmehr möchte ich dafür sensibilisieren, die Barrieren abzubauen, die wir leicht lösen können und somit zumindest eine barrierearme Website zu haben.

Niemand mag blassgrauen Text lesen

Es begegnet mir immer wieder,: hellgraue Schrift auf weißem Hintergrund, winzige Schriftgrößen oder Buttons ohne erkennbaren Kontrast. Das ist selbst für Menschen ohne Sehbeeinträchtigung anstrengend und schreckt ab.

Deshalb lade ich dich ein, mit den folgenden Tipps mal auf deiner eigenen Website nachzusehen. Vielleicht kannst du hier und da kleine, aber wirkungsvolle Verbesserungen vornehmen.

Welche Vorgaben gibt es?

Nach dem WCAG (Web Content Accessibility Guidelines) gelten folgnede Mindestwerte bei den Kontrasten:

• normaler Text: 4.5 : 1
• großer Text (ab 24 px oder 18 px fett): 3:1

Achtung: Bei Buttons muss der Kontrast auch beim Hover-Zustand stimmen!

So kannst du die Kontraste auf deiner Website checken

Ich sehe die Fragezeigen in deinen Augen, denn wahrscheinlich hast du dich noch nicht mit Kontrastverhältnissen für deine Website auseinander gesetzt. Keine Sorge, das lässt sich sehr leicht herausfinden und auch sehr leicht beheben. Ich stelle dir hier zwei Möglichkeiten vor, wähle einfach, was besser für dich passt:

1. Methode: Kontrastcheck mit den Chrome Developertools

• Öffne deine Website mit Google Chrome
• Klicke oben rechts auf die drei Punkte -> dann weitere Tools -> Entwicklertools. Es öffnet sich ein Fenster, entweder rechts oder unten.
• Klicke oben links im neuen Fenster auf das Mauszeiger-Symbol

• Fahre jetzt mit der Maus über ein Element (z.B. einen Button oder Text)
• Beim Herüberfahren wird dir ein Info-Fenster angezeigt. Darin findest du unter ACCESSIBILITY den Kontrastwert. Grünes Häkchen = gut. Ein Warnzeichen = zu wenig Kontrast.

So kannst du auch deine Texte prüfen – allerdings funktioniert hier die Anzeige nicht so zuverlässig.

2. Methode: Kontrastcheck mit einem kostenlosen Onlinetool

Wenn du es etwas weniger technisch magst, kommt hier der Farbcheck mit einem Onlinetool. Du benötigst für diesen Test deine Farbcodes von Schrift und Hintergründen bzw. Buttonfarbe.

Meine Empfehlung ist der Kontrastchecker von WebAIM, weil du hier auch direkt mit einem Schieberegler deine Farbe soweit anpassen kannst, bis die Contrast Ratio auf grün springt.

So geht es:

• Gib die Farbwerte von Text und Hintergrund ein
• WebAIM zeigt dir das Kontrastverhältnis und ob es den WCAG AA oder AAA Standards entspricht.
• Mit dem Schieberegler passt du die Farben an, bis die einzelnen Werte auf „Pass“ wechseln.

Hinweis: Du siehst hier 2 Varianten:

WCAG AA und
WCAG AAA

Der WCAG AA Standard ist die Mindestanforderung für Barrierefreiheit. WCAG AAA ist wesentlich strenger und erfordert höhere Kontrastwerte. 

Für Websites, die nicht unter das BFSG fallen, ist meines Erachtens WCAG AA ausreichend.

Was tun, wenn der Farbkontrast nicht ausreicht?

Wenn du feststellen solltest, dass die Kontrastwerte auf deiner Website zu niedrig sind, dann passe deine Farben und ggf. auch deine Schriftgröße an.

In der Regel geht das sehr einfach über die Theme Einstellungen bzw. den Customizer. Hast du Fragen zur Anpassung? 

Fazit

Auch wenn du nicht vom BFSG betroffen bist, lohnt es sich, deine Website anzupassen. Wir alle können dazu beitragen, das Internet für alle Menschen nutzbarer zu machen. Schritt für Schritt.

Hast du deine Website schon mal unter dem Aspekt Barrierefreiheit betrachtet? Teile gerne deine Erfahrungen oder Fragen in den Kommentaren.