So nutzen Sie den Kontrast-Rechner
Der Kontrast-Rechner analysiert das Kontrastverhältnis zwischen Vordergrundfarbe und Hintergrundfarbe in Echtzeit. Mit dem Online-Werkzeug können Sie Farbcodes in gängigen Webformaten wie HEX, RGB oder HSL eingeben und sofort überprüfen, ob Ihre Gestaltung die internationalen Barrierefreiheitsstandards der Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) erfüllt.
- Farben eingeben — Tragen Sie Vordergrund- und Hintergrundfarbe in die Eingabefelder ein (z. B. Hexadezimalwerte wie
#111827oder RGB-Angaben wiergb(17, 24, 39)). - Kontrastverhältnis ablesen — Der Kontrast-Rechner zeigt das berechnete Verhältnis (von 1:1 bis 21:1) sowie die relative Leuchtdichte beider Farben übersichtlich an.
- WCAG-Konformität prüfen — Kontrollieren Sie die automatische Auswertung für normalen Text, großen Text und grafische Benutzeroberflächen nach Level AA und Level AAA.
- Farbvarianten optimieren — Passen Sie Helligkeit oder Sättigung schrittweise an, bis alle gewünschten Prüfkriterien als bestanden ausgewiesen werden.
Der Kontrast-Rechner eignet sich ideal für Webdesigner, Frontend-Entwickler und Barrierefreiheitsbeauftragte, um Farbpaletten frühzeitig im Designprozess abzusichern.
Formeln & mathematische Grundlagen im Kontrast-Rechner
Die mathematische Berechnung im Kontrast-Rechner basiert auf der relativen Leuchtdichte ($L$) beider Farben im sRGB-Farbraum gemäß den W3C-Spezifikationen.
Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05)| Variable | Beschreibung | Wertebereich |
|---|---|---|
| L1 | Relative Leuchtdichte der helleren Farbe | $0{,}0$ bis $1{,}0$ |
| L2 | Relative Leuchtdichte der dunkleren Farbe | $0{,}0$ bis $1{,}0$ |
| 0,05 | Umgebungslicht-Offset zur Vermeidung von Divisionen durch Null | Konstante |
| Ergebnis | Berechnetes Kontrastverhältnis nach WCAG | $1:1$ bis $21:1$ |
Berechnung der relativen Leuchtdichte ($L$)
Um die relative Leuchtdichte zu ermitteln, werden die 8-Bit-RGB-Farbkanäle ($R$, $G$, $B$) zunächst in standardisierte lineare Farbwerte ($R_{\text{linear}}$, $G_{\text{linear}}$, $B_{\text{linear}}$) umgerechnet:
Farbkanal sRGB = Kanal_8bit / 255
Wenn sRGB <= 0,04045:
Kanal_linear = sRGB / 12,92
Sonst:
Kanal_linear = ((sRGB + 0,055) / 1,055) ^ 2,4Anschließend berechnet der Kontrast-Rechner die Gesamtluminanz nach der menschlichen Helligkeitswahrnehmung:
L = 0,2126 * R_linear + 0,7152 * G_linear + 0,0722 * B_linearDa das menschliche Auge für Grünanteile am empfindlichsten ist, wird der Grünkanal in der Formel am stärksten gewichtet.
WCAG-Konformitätsstufen im Überblick
Die Web Content Accessibility Guidelines (WCAG) unterscheiden verschiedene Konformitätsstufen für Textgrößen und Bedienelemente:
| Kriterium | Stufe AA (Mindestanforderung) | Stufe AAA (Erweiterter Standard) |
|---|---|---|
| Normaler Text (< 18 pt / < 24 px) | Mindestens 4,5:1 | Mindestens 7:1 |
| Großer Text (>= 18 pt bzw. >= 14 pt fett) | Mindestens 3:1 | Mindestens 4,5:1 |
| UI-Komponenten & Grafiken | Mindestens 3:1 | Nicht gesondert gefordert |
Im europäischen Raum und nach dem Barrierefreiheitsstärkungsgesetz (BFSG) gilt die WCAG-Stufe AA als gesetzlich geforderter Mindeststandard.
Praxisbeispiel: Farbkontrast berechnen mit dem Kontrast-Rechner
Angenommen, Sie möchten dunkelblauen Text (#1E3A8A) auf einem hellgrauen Hintergrund (#F3F4F6) testen:
- Leuchtdichte Vordergrund ($L1$ / dunkler): Der Kontrast-Rechner ermittelt für Dunkelblau eine Luminanz von $L \approx 0{,}052$.
- Leuchtdichte Hintergrund ($L2$ / heller): Für das Hellgrau errechnet sich eine Luminanz von $L \approx 0{,}905$.
- Verhältnis bilden: $$\text{Kontrastverhältnis} = \frac{0{,}905 + 0{,}05}{0{,}052 + 0{,}05} = \frac{0{,}955}{0{,}102} \approx 9{,}36:1$$
Mit einem Ergebnis von 9,36:1 meldet der Kontrast-Rechner ein klares „Bestanden“ für alle Konformitätsstufen (AA und AAA, sowohl für normalen als auch für großen Text).
Best Practices für barrierefreies Farbdesign
- Nicht allein auf Farbton verlassen: Unterschiedliche Farben mit ähnlicher Leuchtdichte (wie kräftiges Rot auf kräftigem Grün) bieten oft unzureichenden Kontrast. Prüfen Sie Farbkombinationen stets im Kontrast-Rechner.
- Zustände berücksichtigen: Testen Sie im Designprozess nicht nur Standardzustände, sondern auch
:hover-,:focus- und:active-Farben von Buttons und Links. - Transparenzen beachten: Wenn Sie Alphakanäle verwenden, berechnen Sie den resultierenden Farbwert auf dem tatsächlichen Hintergrund vor der Eingabe im Kontrast-Rechner.
Anwendungsbereiche für den Kontrast-Rechner
Der Kontrast-Rechner ist ein unverzichtbares Werkzeug in modernen digitalen Produktteams:
- Web- und App-Entwicklung — Sicherstellung barrierefreier Farbpaletten für Websites, Web-Apps und mobile Anwendungen.
- Design-Systeme & Styleguides — Dokumentation geprüfter und konformer Farbpaarungen im Design-System.
- Barrierefreiheits-Audits — Schnelle Verifikation verdächtiger Kontraste während BITV- oder WCAG-Konformitätsprüfungen.
- Redaktion & Content-Management — Überprüfung von Textboxen, Teasern und Call-to-Action-Buttons vor der Veröffentlichung.
Nutzen Sie den Kontrast-Rechner, um Ihre digitalen Angebote inklusiv und barrierefrei zu gestalten.