Kontrastrechner

Was ist ein Kontrastrechner und warum brauchen Sie ihn?

Ein Kontrastrechner misst den Helligkeitsunterschied zwischen einer Textfarbe und ihrem Hintergrund. Danach vergleicht er das Ergebnis mit den Schwellen der WCAG. Heraus kommt ein Verhältnis zwischen 1:1 und 21:1. Bei 1:1 sind beide Farben gleich; 21:1 entspricht schwarzem Text auf Weiß. Dieses Tool rechnet mit der Formel des W3C und zeigt das Ergebnis für AA und AAA passend zu Ihrer Textgröße. Fällt ein Paar durch, schlägt es zudem den nächsten barrierefreien Farbton vor.

Kontrast betrifft nicht nur Menschen mit Sehbehinderung. Denken Sie an jemanden, der sein Handy in der Sonne liest, an ältere Menschen oder an einen gedimmten Laptop. Sie alle spüren schwachen Kontrast. Zudem ist das Problem weit verbreitet. Laut dem Bericht WebAIM Million von 2026 hatten 83,9 % von einer Million Startseiten Text unter der Schwelle AA.

In meinen Projekten im Webdesign prüfe ich jedes Paar aus Text und Hintergrund auf diese Weise, bevor eine Farbpalette live geht. Den größeren Rahmen beschreibe ich in meinem Artikel zur barrierefreien Website nach WCAG und BFSG.

Wie berechnet WCAG das Kontrastverhältnis?

Die Rechnung hat vier Schritte. Zunächst teilen Sie jeden Farbkanal durch 255 und erhalten einen Wert zwischen 0 und 1. Danach kehren Sie die Gammakurve des Bildschirms um. Bis 0,04045 teilen Sie durch 12,92; darüber potenzieren Sie ((c + 0,055) / 1,055) mit 2,4. Anschließend gewichten Sie die Kanäle nach der Empfindlichkeit des Auges. Grün zählt 0,7152, Rot 0,2126 und Blau nur 0,0722.

Schließlich addieren Sie zu beiden Leuchtdichten 0,05 und teilen den helleren Wert durch den dunkleren. Diese 0,05 stehen für Spiegelungen und Umgebungslicht. Deshalb treibt selbst reines Schwarz das Verhältnis nicht ins Unendliche, und die Obergrenze liegt bei 21:1.

Die Gewichte haben praktische Folgen. Gelb und Grün gelten in der Formel als sehr hell, Blau und Violett als dunkel. Zum Beispiel erreicht reines Blau #0000FF auf Weiß 8,59:1. Reines Gelb #FFFF00 kommt auf Schwarz auf 19,55:1, auf Weiß dagegen nur auf 1,07:1. Farbcodes zwischen HEX, RGB und HSL rechnen Sie mit dem Tool HTML Farbcodes um.

AA oder AAA: Welche Stufe sollten Sie anstreben?

AA ist die praktische Basis der WCAG Konformität. Regelwerke wie die europäische Norm EN 301 549 und die deutsche BITV 2.0 bauen auf dieser Stufe auf. Sie verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger und fordert für dieselben Texte 7:1 und 4,5:1. Kurz gesagt: AA heißt, alle können den Text lesen; AAA heißt, man kann ihn lange ohne Ermüdung lesen.

Das W3C rät davon ab, AAA pauschal für ganze Websites vorzuschreiben. Manche Inhalte können schlicht nicht jedes Kriterium der Stufe AAA erfüllen. Mein Ansatz: AA gilt für die gesamte Website, AAA ist das Ziel für lange Fließtexte und Formularbeschriftungen. Vor allem bei Blogartikeln, Vertragstexten und Produktbeschreibungen lohnt sich 7:1 wirklich.

Der Rechner fasst das in einem Abzeichen zusammen. Liegt das Verhältnis über der AAA Schwelle für Ihre Textgröße, steht dort AAA erfüllt. Zwischen beiden Schwellen steht AA erfüllt, darunter AA verfehlt. Die große Zahl folgt derselben Logik: Grün erfüllt, Orange schafft nur 3:1, Rot liegt auch darunter. Wie leicht sich der Text sprachlich liest, prüfen Sie mit dem Tool Lesbarkeit prüfen.

Welche Schwelle gilt für großen Text, Schaltflächen und Icons?

Großer Text hat in WCAG mindestens 18 Punkt oder mindestens 14 Punkt fett. Ein Punkt entspricht 1,333 CSS Pixeln. Also ergeben 18 Punkt 24px und 14 Punkt 18,66px. Die Erläuterung des W3C rundet den zweiten Wert auf etwa 18,5px. Der Rechner nutzt dennoch die exakte Grenze von 18,66px. So zählt eine Überschrift an der Grenze nur dann als groß, wenn die Rechnung es klar hergibt.

Für Elemente, die kein Text sind, gibt es ein eigenes Kriterium: 1.4.11, Kontrast von Nichttextelementen. Es verlangt mindestens 3:1 zur angrenzenden Farbe.

• Eingabefelder: Zeigt nur der Rahmen das Feld an, braucht der Rahmen 3:1.
• Schaltflächen: Füllung oder Rahmen, die den Button abheben, brauchen 3:1. Die Beschriftung darin folgt weiter der Regel für Text.
• Fokusindikator: Die Umrandung bei der Bedienung per Tastatur darf im Hintergrund nicht verschwinden.
• Bedeutungstragende Icons und Diagramme: Auch ein Druckersymbol ohne Beschriftung oder eine Linie im Diagramm braucht 3:1.

Deaktivierte Elemente, Logos und Markennamen fallen nicht unter diese Pflicht. Platzhaltertext ist dagegen keine Ausnahme. Das W3C nennt ihn ausdrücklich unter 1.4.3, also braucht er 4,5:1.

Kontrastrechner für transparente Farben und Text auf Bildern

Designsysteme legen Textfarben oft mit Transparenz fest, etwa als #00000099. Auf dem Bildschirm erscheint dann eine Mischung aus Text und Hintergrund. Der Rechner mischt beide mit C = a × C Text + (1 - a) × C Hintergrund. Danach rundet er auf die 8 Bit Farbe, die ein Bildschirm darstellen kann, und misst diese echte Farbe. Zum Beispiel ergibt 50 % Schwarz auf Weiß die Farbe #808080 und damit 3,94:1.

Ist der Hintergrund selbst transparent, weiß der Rechner nicht, was darunter liegt. Deshalb nimmt er Weiß als Untergrund an und zeigt dazu einen Hinweis im Panel. Prüfen Sie eine halbtransparente Karte auf einer dunklen Seite? Dann geben Sie die endgültige Bildschirmfarbe der Karte direkt als Hintergrund ein.

Bei Text auf Fotos und Verläufen reicht eine Messung nicht. Nehmen Sie mit der Pipette des Browsers die hellste und die dunkelste Stelle hinter dem Text auf und testen Sie beide. Fällt ein Paar durch, legen Sie eine dunkle, halbtransparente Fläche hinter den Text. Danach geben Sie deren Bildschirmfarbe als Hintergrund ein und messen erneut.

Wie korrigieren Sie eine Farbe, die durchfällt?

Bei einem schwachen Paar dunkelt der Rechner die Farbe nicht zufällig ab. Er hält Farbton und Sättigung fest und tastet die Helligkeit im HSL Modell in Schritten von 0,5 Punkten in beide Richtungen ab. Dann liefert er die nächste Farbe, die die Schwelle erreicht. Somit bleibt der Vorschlag in der Farbfamilie Ihrer Marke. Rot bleibt Rot und wird nur dunkler oder heller.

Die Vorschläge kommen in zwei Gruppen: Textfarbe ändern oder Hintergrund ändern. Welche Wahl passt, hängt vom Design ab.

• Bei Buttons und Badges wirkt meist eine dunklere Füllung besser, denn weißer Text ist schon so hell wie möglich.
• Im Fließtext behalten Sie den Hintergrund und dunkeln den Text ab; so bleibt das Gesamtbild der Seite erhalten.
• Auf mittleren Grautönen wie #777777 erreicht keine Textfarbe AAA. Der Rechner zeigt dann Mit diesem Farbton nicht erreichbar, ein Zeichen, dass sich der Hintergrund ändern muss.

Lassen Sie freigegebene Farben nicht als einmalige Korrektur stehen. Legen Sie sie stattdessen im Designsystem als benannte Werte ab, etwa Text, Sekundärtext und Buttonfläche. Mehr dazu steht in meinem Artikel über das Design System. Wie Farbe und Oberfläche zusammenspielen, zeigen meine UI Design Best Practices.

Was bedeutet das BFSG für den Kontrast Ihrer Website?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt den European Accessibility Act in deutsches Recht um. Seit dem 28. Juni 2025 gelten seine Anforderungen für viele Produkte und Dienstleistungen für Verbraucher. Dazu zählen auch Dienstleistungen im elektronischen Geschäftsverkehr, also typische Onlineshops. Technisch stützt sich die Umsetzung auf die Norm EN 301 549, deren Kapitel für das Web auf den WCAG Kriterien aufbaut.

Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind ausgenommen, soweit sie Dienstleistungen anbieten. Für Produkte gilt diese Ausnahme nicht. Einzelheiten erklärt die Bundesfachstelle Barrierefreiheit. Prüfen Sie bei kritischen Fragen dennoch immer die aktuelle Rechtslage.

Aus meiner Sicht ist AA beim Kontrast für jede kommerzielle Website die Untergrenze. Ein Button, den niemand lesen kann, kostet zuerst Umsatz und erst danach Nerven. Wer den Rest der Website ebenfalls prüfen will, beginnt am besten mit einem UX Audit.

Was ist APCA und ersetzt es das WCAG 2 Verhältnis?

APCA (Accessible Perceptual Contrast Algorithm) entstand im Umfeld der Arbeiten an WCAG 3. Die Methode soll der menschlichen Wahrnehmung näher kommen. Ihr Ergebnis ist kein Verhältnis, sondern ein Lc Wert. Auch das Vorzeichen zählt: Positiv heißt dunkler Text auf hellem Grund, negativ heißt heller Text auf dunklem Grund.

Allerdings gehört APCA heute zu keiner geltenden Norm, und WCAG 3 ist noch ein Arbeitsentwurf. Daher zeigt der Rechner den Lc Wert nur zur Information. Ob ein Paar besteht, entscheidet immer das Verhältnis nach WCAG 2.2.

Beide Methoden weichen vor allem auf mittleren Farbtönen voneinander ab. Konkret erreicht schwarzer Text auf dem Orange #F97316 nach WCAG 2 den Wert 7,49:1 und damit AAA. Weißer Text verfehlt mit 2,80:1 jede Schwelle. APCA bewertet dagegen den weißen Text höher: Lc -58,4 gegenüber Lc 50,9. Richten Sie sich in so einem Fall zuerst nach WCAG. Dann wählen Sie eine Lösung, die beide Werte stärkt, etwa größere Schrift oder einen dunkleren Hintergrund.