Kostenloses Tool: Barrierefreiheit

Farbkontrast-Check

Vergleichen Sie hier direkt eine Textfarbe mit einer Hintergrundfarbe nach WCAG 2.2, oder geben Sie eine Seitenadresse ein, um jeden Text unter dem Kontrastminimum zu finden, mit den gemessenen Farben und der nächstliegenden Farbe, die besteht.

Kontrastrechner

Geben Sie eine Textfarbe und eine Hintergrundfarbe ein. Alles wird in Ihrem Browser berechnet.

So sieht normaler Text mit 16 Pixeln aus.

Großer Text mit 24 Pixeln

Ein Button-Rahmen

Kontrastverhältnis4.54:1

WCAG-2.2-Ergebnisse für diese Farben
Normaler Text, AAWCAG 1.4.3, erfordert 4.5:1Bestanden
Großer Text, AAWCAG 1.4.3, erfordert 3:1Bestanden
Normaler Text, AAAWCAG 1.4.6, erfordert 7:1Nicht bestanden
Großer Text, AAAWCAG 1.4.6, erfordert 4.5:1Bestanden
Icons, Rahmen und FormularfelderWCAG 1.4.11, erfordert 3:1Bestanden

Nächstliegende Textfarben, die auf diesem Hintergrund bestehen

Großer Text bedeutet mindestens 24 Pixel oder 18,66 Pixel in Fettschrift. Verhältnisse werden abgerundet, daher wird 4.499:1 als 4.49:1 angezeigt und besteht nicht, so wie es WCAG vorsieht.

Oder durchsuchen Sie eine Seite nach Text mit zu geringem Kontrast

Kostenlos. Prüft die eingegebene Adresse in etwa 20 Sekunden.

Was dieses Tool prüft

  • Das WCAG-Verhältnis zweier beliebiger Farben

    Der Rechner nutzt die Formel für die relative Leuchtdichte aus den Begriffsbestimmungen von WCAG 2.2 und zeigt das Ergebnis für normalen Text, großen Text und Teile der Benutzeroberfläche, jeweils für AA und AAA. Er läuft in Ihrem Browser.

  • Eine Farbe, die besteht, fertig berechnet

    Besteht ein Paar nicht, sucht er die nächstliegende Textfarbe im selben Farbton, die 4.5:1 oder 7:1 erreicht, damit Sie so wenig wie möglich an Ihrem Design ändern müssen.

  • Jeder Text mit zu geringem Kontrast auf einer Seite

    Der Seitenscan führt die axe-core-Regel color-contrast in einem echten Chrome-Browser aus und listet jedes fehlerhafte Element mit Textfarbe, Hintergrundfarbe, Schriftgröße und Verhältnis auf.

  • Nach Farbpaaren gruppiert

    Fehler werden nach Text- und Hintergrundfarbe gruppiert, denn eine einzige Änderung an einer Theme-Farbe behebt meist jedes Element, das sie verwendet.

  • Der richtige Grenzwert für großen Text

    Text ab 24 Pixeln oder ab 18,66 Pixeln in Fettschrift braucht 3:1 statt 4.5:1. Der Scan wendet auf jedes Element anhand seiner berechneten Schriftgröße und Schriftstärke den richtigen Grenzwert an.

  • Was er nicht messen konnte, und warum

    Text über Bildern, Farbverläufen oder überlappenden Elementen wird mit dem Grund getrennt aufgeführt, sodass Sie genau wissen, was Sie per Augenschein prüfen müssen.

Was es nicht prüfen kann

  • Text über Fotos, Farbverläufen oder Videos messen. Software kann nicht wissen, welcher Teil eines Bildes hinter jedem Buchstaben liegt, daher werden diese Stellen zur Prüfung für Sie aufgeführt.
  • Hover-, Fokus- oder andere Zustände prüfen. Der Scan sieht die Seite so, wie sie lädt; prüfen Sie diese Farben mit dem Rechner.
  • Icons, Rahmen und Formularfelder auf der Seite nach WCAG 1.4.11 scannen. Der Rechner zeigt das Ergebnis für 3:1 bei jedem Paar, das Sie eingeben.
  • Text lesen, der Teil eines Bildes ist, etwa ein Banner, in das die Wörter fest eingebettet sind.
  • Mehr als die eingegebene Seite testen. Der vollständige kostenlose Scan testet bis zu fünf wichtige Seiten.

Warum das wichtig ist

Zu geringer Kontrast ist der häufigste Barrierefreiheitsfehler im Web. Die WebAIM-Analyse 2026 der Startseiten der Top-1-Million-Websites fand Text mit zu geringem Kontrast auf 83,9 % davon, mit durchschnittlich 34 Fundstellen pro Seite.

Blasser Text ist schwer lesbar für Menschen mit Sehbehinderung oder Farbsehschwäche und für alle, die ein Smartphone in hellem Sonnenlicht nutzen. Das WCAG-2.2-Erfolgskriterium 1.4.3 der Stufe AA legt das Minimum auf 4.5:1 für normalen Text und 3:1 für großen Text fest.

Zugleich ist es eines der am günstigsten zu behebenden Probleme: Auf den meisten Websites verursacht eine Handvoll Theme-Farben fast alle Fehler, und wenn Sie diese ändern, ist jede Seite auf einmal korrigiert.

So lesen Sie die Ergebnisse

Kontrastverhältnis
Von 1:1 (zweimal dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). Verhältnisse werden abgerundet, daher verfehlt ein Paar, das 4.49:1 zeigt, das Minimum von 4.5:1.
Normaler Text, AA (4.5:1)
Das Minimum für Fließtext, Links, Labels und Button-Text nach WCAG 1.4.3.
Großer Text, AA (3:1)
Für Text ab 24 Pixeln oder ab 18,66 Pixeln in Fettschrift. WCAG definiert großen Text als 18 Punkt oder 14 Punkt fett.
AAA (7:1 und 4.5:1)
Die erweiterte Stufe in WCAG 1.4.6. Für die Konformität mit AA ist sie nicht nötig, sie hilft aber mehr Lesern.
Icons, Rahmen und Formularfelder (3:1)
WCAG 1.4.11 verlangt 3:1 gegenüber angrenzenden Farben für die Teile von Bedienelementen und Grafiken, die man sehen muss, um sie zu nutzen.
Fehlerhafter Text
Jedes Element, das der Scan unter seinem Grenzwert gemessen hat, mit Selektor, Farben, Größe und Verhältnis. Öffnen Sie eines, um sein Markup und, sofern vorhanden, einen Screenshot zu sehen.
Per Augenschein zu prüfen
Text, den axe-core nicht messen konnte, mit dem Grund, zum Beispiel ein Bild oder ein Farbverlauf dahinter.

So beheben Sie die häufigsten Probleme

  • Grauer Text auf Weiß

    #767676 ist etwa das hellste Grau, das auf Weiß 4.5:1 erreicht (4.54:1). Hellere Grautöne wie #999999 (2.84:1) sind eine häufige Fehlerursache in Footern, Bildunterschriften, Platzhaltern und Preisen.

  • Weißer Text auf einem Button in Markenfarbe

    Besteht weißer Text auf Ihrer Markenfarbe nicht, dunkeln Sie den Button-Hintergrund einige Stufen ab oder verwenden Sie dunklen Text. Prüfen Sie auch die Farben für Hover und Fokus, da sie oft heller werden.

  • Platzhaltertext in Formularen

    Platzhaltertext ist ebenfalls Text und braucht 4.5:1. Noch besser: Verwenden Sie ein sichtbares Label über dem Feld, damit der Platzhalter nicht die einzige Anleitung ist.

  • Text über Bildern und Slidern

    Setzen Sie den Text auf eine deckende oder halbtransparente Hintergrundfläche oder legen Sie eine dunkle Überlagerung auf das Bild, und prüfen Sie dann den hellsten Teil des Bildes, der hinter dem Text liegt.

  • Sale-Badges und Kleingedrucktes

    Text in deaktivierten Bedienelementen ist von 1.4.3 ausgenommen, Sale-Badges, Preise und rechtliches Kleingedrucktes aber nicht. Das ist oft der blasseste Text auf den Seiten eines Shops.

Zu geringer Farbkontrast: warum er wichtig ist und wie Sie ihn in Shopify, WooCommerce und auf jeder Website beheben

Fragen zu diesem Tool

Welches Kontrastverhältnis verlangt WCAG?

Für Stufe AA 4.5:1 für normalen Text und 3:1 für großen Text (Erfolgskriterium 1.4.3) sowie 3:1 für Bedienelemente und bedeutungstragende Grafiken (1.4.11). Stufe AAA verlangt 7:1 und 4.5:1 (1.4.6).

Was gilt als großer Text?

WCAG definiert großen Text als mindestens 18 Punkt oder 14 Punkt fett. In CSS-Pixeln sind das etwa 24 px oder 18,66 px in Fettschrift.

Müssen Logos das Kontrastminimum erfüllen?

Nein. WCAG 1.4.3 nimmt Logos und Text, der Teil eines Logos oder Markennamens ist, ausdrücklich aus, ebenso rein dekorativen Text und Text in inaktiven Bedienelementen.

Warum führt der Scan Text über einem Bild zur Prüfung auf?

axe-core misst einheitliche Farben. Liegt ein Bild, ein Farbverlauf oder ein anderes Element hinter dem Text, kann es nicht erkennen, welche Farben aufeinandertreffen, und meldet das Element daher zur Prüfung durch einen Menschen, statt zu raten.

Brauche ich Kontrast nach AAA?

AAA ist für die Konformität mit Stufe AA nicht erforderlich, und das W3C empfiehlt nicht, AAA für ganze Websites vorzuschreiben. 7:1 für Fließtext zu erreichen ist trotzdem gute Praxis, wo Ihr Design es zulässt.

Ist APCA Teil von WCAG?

Nein. APCA ist eine andere Methode zur Kontrastberechnung, die für WCAG 3 diskutiert wurde, das noch ein Entwurf ist. Konformität wird heute mit dem WCAG-2-Verhältnis gemessen, das dieses Tool berechnet.

Quellen

Verwandte Tools

Der Barrierefreiheits-Report ($174, einmalig) baut auf dem vollständigen kostenlosen Scan auf und ergänzt weitere Seiten, die nötige Änderung für jeden Befund, ein PDF und Nachtests, mit denen Sie Ihre Korrekturen überprüfen.

Mehr zum Barrierefreiheits-Report