Barrierefreiheit von Text- und Hintergrundfarben nach WCAG 2.1 AA/AAA überprüfen.
Ausreichender Farbkontrast zwischen Text und Hintergrund ist das wichtigste Fundament für digitale Barrierefreiheit (Accessibility) nach den Web Content Accessibility Guidelines (WCAG 2.1 und 2.2). Dieser Kontrastrechner berechnet das exakte Kontrastverhältnis zwischen zwei Farbwerten und prüft in Echtzeit, ob die gesetzlichen Konformitätsstufen AA und AAA für Fließtext, Großtext und grafische UI-Elemente erfüllt werden.
Eine UI-Designerin gestaltet einen Call-to-Action-Button für ein barrierefreies Behördenportal. Sie wählt als Textfarbe Weiß (#FFFFFF) und testet ein helles Türkisblau (#00A8E8) als Hintergrund. Das Tool berechnet blitzschnell ein Kontrastverhältnis von 2,85:1 und markiert die Stufen WCAG AA (Mindestanforderung 4,5:1) und AAA (7,0:1) als FEHLGESCHLAGEN. Über den interaktiven Helligkeitsregler dunkelt die Designerin die Hintergrundfarbe stufenweise auf #006B96 ab, bis das Kontrastverhältnis auf 5,14:1 steigt und das grüne Prüfsiegel WCAG AA Bestanden für Fließtext erscheint.
Alle Kontrastberechnungen und Farbraum-Transformationen laufen vollständig Client-seitig in Ihrem Webbrowser ab. Ihre Unternehmens-Farbpaletten, Markenrichtlinien und Designentwürfe werden zu keinem Zeitpunkt an externe Server übertragen.
Kontrastverhältnis = (L1 + 0.05) / (L2 + 0.05) ; L = 0.2126×R + 0.7152×G + 0.0722×B (relative Leuchtdichte)
Berechnet die relative Leuchtdichte der normalisierten sRGB-Farbwerte nach WCAG-Standards und bildet das Verhältnis zwischen der helleren (L1) und dunkleren (L2) Farbe.