Barrierefreie Farben: WCAG-Kontrast aus HEX/RGB berechnen

Ob eine Textfarbe lesbar ist, entscheidet nicht das Auge des Designers, sondern eine nachpruefbare Zahl: das Kontrastverhaeltnis. Es ergibt sich direkt aus den HEX- oder RGB-Werten von Vordergrund und Hintergrund und laesst sich mit der offiziellen WCAG-Formel exakt berechnen. Dieser Ratgeber zeigt, wie aus zwei Farbcodes ein Verhaeltnis von 1:1 bis 21:1 entsteht, welche Schwellenwerte die Stufen AA und AAA verlangen und warum seit dem 28. Juni 2025 mit dem Barrierefreiheitsstaerkungsgesetz (BFSG) reale rechtliche Pflichten dranhaengen.

Was das Kontrastverhaeltnis ist und woher es kommt

Das Kontrastverhaeltnis beschreibt, wie stark sich zwei Farben in ihrer wahrgenommenen Helligkeit unterscheiden. Definiert ist es im W3C-Erfolgskriterium 1.4.3 (Contrast Minimum) als (L1 + 0,05) / (L2 + 0,05). L1 ist die relative Luminanz der helleren Farbe, L2 die der dunkleren. Der kleinste moegliche Wert ist 1:1, wenn beide Farben identisch sind. Der groesste ist 21:1, naemlich reines Schwarz (#000000) auf reinem Weiss (#FFFFFF).

Wichtig ist: Es geht nicht um den blossen Farbunterschied, sondern um Luminanz, also um Helligkeit unter Beruecksichtigung der unterschiedlichen Empfindlichkeit des menschlichen Auges fuer Rot, Gruen und Blau. Deshalb koennen zwei kraeftige, sehr verschiedene Farben (etwa ein mittleres Rot und ein mittleres Gruen) trotzdem einen schwachen Kontrast haben: Ihre Luminanz ist aehnlich, auch wenn der Farbton stark abweicht. Genau das ist der Grund, warum man Kontrast rechnen muss und nicht schaetzen darf.

Schritt 1: Von HEX/RGB zur relativen Luminanz

Bevor zwei Farben verglichen werden koennen, braucht jede einzelne ihre relative Luminanz. Der Weg dorthin ist immer derselbe und besteht aus drei Teilschritten je Farbkanal.

1. HEX in RGB zerlegen: Aus #1A56DB werden die Kanaele R=26, G=86, B=219. Jeder Wert liegt zwischen 0 und 255.
2. Auf 0 bis 1 normalisieren: Jeden Kanal durch 255 teilen. R=0,1020, G=0,3373, B=0,8588.
3. Gamma-Korrektur (sRGB linearisieren): Ist der normalisierte Wert c kleiner oder gleich 0,03928, gilt c / 12,92. Andernfalls gilt ((c + 0,055) / 1,055) hoch 2,4.

Aus den drei linearisierten Werten R, G und B ergibt sich die relative Luminanz mit der gewichteten Summe L = 0,2126 R + 0,7152 G + 0,0722 B. Die Gewichte spiegeln wider, dass das Auge auf Gruen am empfindlichsten reagiert und auf Blau am schwaechsten. Diese Koeffizienten stammen aus der sRGB-Definition und sind in der WCAG so festgeschrieben.

Schritt 2: Das Kontrastverhaeltnis am konkreten Beispiel

Nehmen wir das Markenblau #1A56DB als Textfarbe auf weissem Hintergrund (#FFFFFF). Weiss hat per Definition die relative Luminanz 1,0. Fuer das Blau ergibt der oben beschriebene Rechenweg rund 0,1116. Eingesetzt in die Formel:

L_weiss  = 1,0000
L_blau   = 0,1116

Kontrast = (1,0000 + 0,05) / (0,1116 + 0,05)
         = 1,0500 / 0,1616
         = 6,50 : 1

Ein Verhaeltnis von 6,50:1 liegt komfortabel ueber den 4,5:1 fuer AA bei normalem Text und sogar knapp unter AAA (7:1). Das Blau ist als Fliesstextfarbe auf Weiss also AA-konform. Wuerde man dasselbe Blau jedoch auf einem mittelgrauen Hintergrund (#888888, Luminanz rund 0,2462) verwenden, faellt das Verhaeltnis auf etwa 1,77:1 und damit klar durch. Dieselbe Vordergrundfarbe, ein anderer Hintergrund, ein voellig anderes Ergebnis: Das ist der wichtigste praktische Merksatz.

In JavaScript laesst sich der gesamte Rechenweg in wenigen Zeilen abbilden, etwa fuer eine Live-Pruefung im Browser:

function luminanz(hex) {
  const v = hex.replace('#','').match(/.{2}/g)
    .map(h => parseInt(h, 16) / 255)
    .map(c => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
}

function kontrast(a, b) {
  const [l1, l2] = [luminanz(a), luminanz(b)].sort((x, y) => y - x);
  return (l1 + 0.05) / (l2 + 0.05);
}

kontrast('#1A56DB', '#FFFFFF'); // 6.50

Schritt 3: Welche Schwellenwerte gelten?

Die WCAG unterscheiden nach Textgroesse und Konformitaetsstufe. Grosser Text ist definiert als mindestens 18,66px (14pt) fett oder mindestens 24px (18pt) regulaer. Logos und reine Dekoration sind von den Anforderungen ausgenommen.

Recht: Was das BFSG seit Juni 2025 verlangt

Das Barrierefreiheitsstaerkungsgesetz setzt die europaeische Richtlinie (EU) 2019/882 (European Accessibility Act) in deutsches Recht um und gilt seit dem 28. Juni 2025. Betroffen sind unter anderem Onlineshops, Bank- und Zahlungsdienste, Buchungs- und Ticketsysteme sowie Telekommunikationsdienste, die sich an Verbraucher richten. Diese muessen barrierefrei gestaltet sein, und Farbkontrast ist ein zentraler, leicht pruefbarer Bestandteil davon.

Der technische Massstab ist nicht das BFSG selbst, sondern die harmonisierte europaeische Norm EN 301 549. Sie verweist fuer Webinhalte auf WCAG 2.1 Stufe AA, womit die 4,5:1- und 3:1-Schwellen praktisch verbindlich werden. Ausnahmen bestehen fuer Kleinstunternehmen (weniger als 10 Beschaeftigte und hoechstens 2 Millionen Euro Jahresumsatz) bei der Erbringung von Dienstleistungen, sowie in Faellen unverhaeltnismaessiger Belastung. Die Marktueberwachung liegt bei den Laendern, koordiniert durch die Marktueberwachungsstelle der Laender (MLBF).

Praxis: Kontrast zuverlaessig in Projekten sichern

Kontrastpruefung sollte kein einmaliger Schritt am Ende sein, sondern fest im Workflow verankert. Drei Massnahmen haben sich bewaehrt:

• Designtokens pruefen, nicht Screenshots: Legen Sie Vordergrund- und Hintergrundpaare als Tokens an und berechnen Sie deren Verhaeltnis automatisiert. So faellt eine schwache Kombination auf, bevor sie ins Design kommt.
• Alle Zustaende abdecken: Hover, Fokus, Disabled, Fehler und Erfolg haben oft eigene Farben. Jeder Zustand braucht einen eigenen Kontrast-Check, insbesondere der sichtbare Fokus-Ring (WCAG 2.4.11).
• Text auf Bildern absichern: Ueber Fotos hilft ein halbtransparenter Overlay oder ein Textschatten, um eine definierte Mindestluminanz des Hintergrunds zu garantieren.

Wer die Werte schnell pruefen will, gibt Vorder- und Hintergrundfarbe einfach als HEX in einen Converter ein und liest die RGB-Werte sowie die Luminanz ab. Unser HEX zu RGB Converter rechnet beide Farben lokal im Browser um, ganz ohne Upload, sodass Sie die Kanalwerte direkt in die Kontrastformel uebernehmen koennen.

Haeufige Fragen zum WCAG-Kontrast

Quellen

• W3C, WCAG 2.2: Web Content Accessibility Guidelines 2.2 (Erfolgskriterien 1.4.3, 1.4.6, 1.4.11)
• W3C, Understanding Success Criterion 1.4.3 Contrast (Minimum) inklusive Kontrastformel
• MDN Web Docs, Color contrast
• ETSI, EN 301 549 (Harmonisierte Norm fuer Barrierefreiheitsanforderungen)
• Bundesfachstelle Barrierefreiheit, Informationen zum BFSG (Barrierefreiheitsstaerkungsgesetz)

Verwandte Artikel