WCAG Kontrast-Checker & Farbrechner

WCAG Kontrast-Checker & Farbrechner

WCAG-Kontrastverhältnis und Farb-Barrierefreiheit präzise berechnen. Text- und Hintergrundfarben nach WCAG 2.1/2.2 (AA/AAA) sowie BITV 2.0 prüfen und barrierefreie Farbkorrekturen generieren.

✨ Voreinstellungen:
Farbeingaben & Konfiguration
255, 255, 255
Alpha-Deckkraft100%
H:0° S:0% L:100%
24, 24, 27
H:240° S:6% L:10%
Leuchtdichte: 0.0093
Typografie-Skalierungs-Engine (WCAG 1.4.3)Normaler Text (mind. 4,5:1 AA)
Schriftgröße (px)16px
W3C Kolorimetrische Berechnungs-PipelineO(1) Standard-Mathematik
sRGBsRGB-EingabewerteC^2.4Lineare Gamma-ExpansionL1/L2Relative Leuchtdichte (Y)RatioKontrastverhältnis (L1+0,05)/(L2+0,05)AAAKonformitätsprüfung
Aktive Engine: W3C 2.1 Kolorimetrische PipelineVG-Leuchtdichte: 1.0000 | HG-Leuchtdichte: 0.0093
Kontrastverhältnis
17.72:1AAA BESTANDEN

APCA-Wahrnehmungswert: Lc -106.7

1:14.5:17:121:1

aaNormal

Schwellenwert: 4.5:1

BESTANDEN
Prüfergebnis17.72:1

aaLarge

Schwellenwert: 3:1

BESTANDEN
Prüfergebnis17.72:1

aaaNormal

Schwellenwert: 7:1

BESTANDEN
Prüfergebnis17.72:1

aaaLarge

Schwellenwert: 4.5:1

BESTANDEN
Prüfergebnis17.72:1

uiComponents

Schwellenwert: 3:1

BESTANDEN
Prüfergebnis17.72:1

apcaLc

Schwellenwert: 60:1

BESTANDEN
PrüfergebnisLc -106.7
W3C-Spezifikationskonformität verifiziertAPCA Lc: -106.7 | Skala: 16px (400)
Kontrastverhältnis
17.72:1
WCAG-Konformitätsstatus
AAA BESTANDEN
Wahrnehmungskontrast (APCA)
Lc -106.7

W3C WCAG 2.1/2.2 Mathematische Engine

Exakte sRGB-Gamma-Expansion und relative Leuchtdichtegewichtung nach W3C-Algorithmen ohne Gleitkomma-Drift.

100 % clientseitige Privatsphäre

Sämtliche Farbtransformationen, Daltonisierungs-Simulationen und Design-Tokens werden rein lokal im Browser verarbeitet.

APCA & Wahrnehmungsbasierte Dynamik

Gegenüberstellung klassischer WCAG-Kontrastverhältnisse mit modernen W3C-APCA-Metriken unter Berücksichtigung von Ortsfrequenz und Polarität.

Technische Referenz & Architektur-Leitfaden

WCAG Farbkontrast-Prüfer & Rechner — Referenzhandbuch

WCAG-Kontrastverhältnisse und Barrierefreiheit sofort berechnen. Text- und Hintergrundfarben nach WCAG 2.1 (AA/AAA) sowie BFSG & BITV 2.0 prüfen und barrierefreie Farbkorrekturen ermitteln.

WCAG Farbkontrast-Prüfer & Rechner — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss
WCAG Farbkontrast-Prüfer & Rechner — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss

Wichtige Parameter & Einstellungen

Relative Leuchtdichte (L)Normalisierter sRGB-Floatwert (0,000 bis 1,000)

Die relative Helligkeit eines Bildpunkts im Farbraum, normiert von 0,0 für tiefstes Schwarz (#000000) bis 1,0 für reinstes Weiß (#FFFFFF). Die Berechnung erfolgt über die IEC 61966-2-1 sRGB-Gamma-Expansion (C_linear = C <= 0.04045 ? C/12.92 : ((C+0.055)/1.055)^2.4) und photometrische ITU-R BT.709-Koeffizienten (L = 0,2126*R + 0,7152*G + 0,0722*B).

Standard: L1 = 1,000, L2 = 0,038
Kontrastverhältnis (CR)Photometrisches Verhältnis (1,00:1 bis 21,00:1)

Berechnet nach der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren und L2 die der dunkleren Farbe darstellt. Die Konstante 0,05 modelliert den standardisierten diffusen Umgebungslicht-Reflexionsgrad auf Monitorglas.

Standard: 4,50:1
WCAG-AA-Mindestanforderung (BITV / EN 301 549)Gesetzlicher Mindeststandard (BFSG / BITV 2.0)

Erfordert ein Mindest-Kontrastverhältnis von 4,5:1 für Standard-Fließtext (< 18 pt normal oder < 14 pt fett) sowie 3,0:1 für Großtext (>= 18 pt / 24 px normal bzw. >= 14 pt / 18,66 px fett) und essenzielle grafische UI-Komponenten.

Standard: 4,5:1 (Standard) / 3,0:1 (Großtext)
WCAG-AAA-Erfolgsstufe (Erhöhter Standard)Erweiterte Barrierefreiheitsstufe

Verlangt ein geschärftes Kontrastverhältnis von 7,0:1 für Standard-Fließtext und 4,5:1 für Großtext. Garantiert uneingeschränkte Lesbarkeit für Nutzer mit stark beeinträchtigtem Sehvermögen oder bei widrigem Blendlicht.

Standard: 7,0:1 (Standard) / 4,5:1 (Großtext)

Profi-Tipps & Best Practices

Die 0,05-Umgebungslicht-Konstante und Subpixel-Rendering

Die W3C-Kontrastformel addiert +0,05 zu beiden Luminanzwerten, um diffuse Raumlichtreflexionen auf Bildschirmglas zu simulieren. Da Betriebssysteme Subpixel-Font-Smoothing (ClearType oder CoreText) anwenden, verlieren extrem zarte Schriftschnitte (Font-Weight 100–300) an optischer Flächendeckung: Eine Farbkombination mit rechnerisch validen 4,5:1 verfehlt bei Ultra-Light-Schnitten die wahrnehmungsbezogene Lesbarkeit, sofern sie nicht mindestens mit Font-Weight 400 gerendert wird.

Halbtransparente Alphakanäle gefährden Konformitätsnachweise

Werden CSS-Werte wie rgba() oder 8-stellige Hex-Farben genutzt, hängt der resultierende Kontrast dynamisch von variierenden Hintergrundebenen ab. WCAG 2.1 verlangt die Kontrastprüfung gegen das ungünstigste zusammengesetzte Pixel (Worst-Case-Komposit). Blenden Sie Alphakanäle vor der Konformitätsprüfung stets über dem soliden Trägerhintergrund ein (Alpha-Compositing: C_out = C_fg * alpha + C_bg * (1 - alpha)).

APCA vs. WCAG 2.1: Asymmetrie der menschlichen Polaritätswahrnehmung

WCAG 2.1 bewertet Kontraste rein symmetrisch (Schwarz auf Weiß erzielt denselben Wert von 21:1 wie Weiß auf Schwarz). Die menschliche Sehphysiologie verarbeitet dunklen Text auf hellem Hintergrund (positive Polarität) durch Pupillenverengung und minimierte Lichthofbildung jedoch deutlich schärfer. Der APCA-Algorithmus ermittelt asymmetrische Lc-Werte: Ein im Light-Mode valides Farbpaar erfordert im Dark-Mode häufig eine spürbar größere Helligkeitsdifferenz.

Häufige Fehlerquellen & Fehlerbehebung

⚠️Unsere primäre Markenfarbe erreicht auf weißem Grund nur 4,1:1 und verfehlt WCAG AA für normalen Text knapp.

Vermeiden Sie ein kostspieliges CI-Rebranding: Reservieren Sie den 4,1:1-Farbton für Überschriften (>= 24 px bzw. >= 18,66 px fett) oder interaktive UI-Flächen, für die der 3,0:1-Grenzwert gilt. Für 16-px-Fließtext nutzen Sie den integrierten Auto-Fixer, um die HSL-Helligkeit minimal abzusenken und 4,54:1 zu erreichen, während Originalfarbton (Hue) und Sättigung (Chroma) exakt erhalten bleiben.

⚠️Hover- oder Deaktiviert-Zustände (Disabled) von Buttons fallen bei Barrierefreiheits-Audits durch.

Nach WCAG 2.1 Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast) müssen aktive Steuerelementränder mindestens 3,0:1 zu angrenzenden Hintergrundfarben wahren. Obwohl rein inaktive (disabled) Elemente formal ausgenommen sind, verlangt professionelle UX-Praxis nach BITV/BFSG, inaktive Zustände mit aria-disabled='true' und sichtbaren Tooltips auszustatten, anstatt den Kontrast unter 2,5:1 absinken zu lassen.

Häufig gestellte Fragen (FAQ)

Wie wird das WCAG-Farbkontrastverhältnis exakt berechnet?▼

Das Kontrastverhältnis nach WCAG 2.1 basiert auf der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe bezeichnet. Zur Ermittlung der Leuchtdichte werden 8-Bit-sRGB-Farbkanäle (0 bis 255) in lineare Lichtwerte überführt: Für C / 255 <= 0,04045 gilt linear C = (C / 255) / 12,92; andernfalls linear C = (((C / 255) + 0,055) / 1,055)^2,4. Diese Werte werden gemäß ITU-R BT.709 gewichtet: L = 0,2126*R + 0,7152*G + 0,0722*B. Die Skala reicht von 1,00:1 (identische Farben) bis 21,00:1 (reines Schwarz #000000 auf reinem Weiß #FFFFFF).

Worin liegt der Unterschied zwischen WCAG-AA- und AAA-Kontrastanforderungen?▼

WCAG Level AA bildet den gesetzlich verbindlichen Standard für das Barrierefreiheitsstärkungsgesetz (BFSG), die BITV 2.0 sowie die EU-Norm EN 301 549 (in den USA ADA Title III und Section 508). Er fordert ein Mindestverhältnis von 4,5:1 für Standardtext (unter 18 pt / 24 px normal bzw. unter 14 pt / 18,66 px fett) und 3,0:1 für Großtext sowie UI-Komponenten. Level AAA stellt die Maximalstufe für stark sehbehinderte Personen dar und verlangt 7,0:1 für Fließtext sowie 4,5:1 für Großtext. Enterprise-Design-Systeme setzen AA global voraus und nutzen AAA gezielt für kritische Hinweise, medizinische Applikationen oder behördliche Formulare.

Welche Schriftgröße gilt nach WCAG offiziell als großer Text?▼

Nach den WCAG-2.1-Richtlinien gilt Text dann als groß, wenn er mindestens 18 Point (entspricht 24 CSS-Pixeln bei Standardauflösung von 96 DPI) oder mindestens 14 Point fett formatiert ist (entspricht 18,66 CSS-Pixeln mit font-weight 700 oder höher). Für großen Text genügt ein reduziertes Kontrastverhältnis von 3,0:1 für Konformitätsstufe AA sowie 4,5:1 für Stufe AAA, da breitere Glyphenstriche eine größere Netzhautfläche im menschlichen Auge stimulieren.

Warum fallen Platzhaltertexte und inaktive Buttons häufig durch Kontrastprüfungen?▼

Standard-Browser-Platzhalter (#767676 auf Weiß) erreichen oft knapp 4,5:1. Zahlreiche CSS-Frameworks reduzieren jedoch die Opacity auf 0,4 oder 0,5, wodurch der Kontrast auf rund 2,2:1 einbricht. Während WCAG 1.4.3 inaktive Oberflächenelemente formell von Mindestkontrasten befreit, gilt diese Ausnahme NICHT für Eingabefeld-Platzhalter, sofern sie essenzielle Ausfüllhinweise enthalten. Durch Floating Labels oder persistente Hilfetexte lässt sich die 4,5:1-Norm zuverlässig einhalten, ohne auf unleserliche Platzhalter angewiesen zu sein.

Wie unterscheidet sich der neue APCA-Algorithmus (WCAG 3.0) von WCAG 2.1?▼

WCAG 2.1 nutzt ein starres mathematisches Verhältnis (1:1 bis 21:1) rein anhand relativer Helligkeit, ignoriert dabei jedoch Ortsfrequenzen (Schriftstärke, Strichbreite) und Kontrastpolarität (Hell-auf-Dunkel vs. Dunkel-auf-Hell). Der für WCAG 3.0 entwickelte APCA-Algorithmus (Accessible Perceptual Contrast Algorithm) berechnet stattdessen einen vorzeichenbehafteten Helligkeitskontrastwert (Lc 0 bis 108+), basierend auf menschlicher Photorezeptor-Dynamik und kortikaler visueller Signalverarbeitung. Bei APCA erfordern filigrane Schriften wesentlich höhere Lc-Werte als fette Schnitte, und Dark-Mode-Designs verlangen höhere Luminanzabstände als Light-Mode-Gegenstücke.

Verwandte Tools & Hilfsprogramme

Alle Tools →
Tapetenrechner & RollenbedarfDesign

Berechnen Sie Tapetenrollen, Wandflächen und Verschnitt mit Rapport-Musterabgleich, Fensterabzügen und Rollenformaten für Standard- oder Individualräume.

Tool öffnen→
CSS Box-Shadow-Generator & SchattenDesign

Erstellen Sie fotorealistische Mehrschicht-CSS-Box-Shadows und weiche Elevation. Konfigurieren Sie Versatz, Unschärfe, Ausbreitung sowie Inset-Schatten und exportieren Sie CSS- oder Tailwind-Tokens.

Tool öffnen→
CSS Clip-Path Generator & FormenDesign

Erstellen Sie individuelle CSS-clip-path-Polygone mit interaktiven Anfassern. Kopieren Sie browserübergreifenden CSS-Code, SVG-Pfade und responsive Prozentkoordinaten.

Tool öffnen→
Farbpalette aus Bild & FarbschemaDesign

Farbpaletten sofort aus Bildern extrahieren. Dominante HEX-, RGB- und HSL-Farbfelder generieren, CSS- oder Tailwind-Tokens exportieren und WCAG-Barrierefreiheit auf Kontrast prüfen.

Tool öffnen→
Goldener Schnitt Rechner & RechteckDesign

Berechnen Sie Maße im Goldenen Schnitt und Proportionen des Goldenen Rechtecks sofort. Längen nach Phi (1,618) teilen, Typografie skalieren und responsive Raster erstellen.

Tool öffnen→
CSS Neumorphismus Generator & Soft UIDesign

Erstellen Sie erhabene, vertiefte und flache Soft-UI-Schatten mit dem Neumorphismus-Generator. Kopieren Sie sauberen CSS-, Tailwind- und SCSS-Code mit optischer Lichtfeld-Vorschau in Echtzeit.

Tool öffnen→