Kontrastverhältnis-Rechner

Farbkontrast beschreibt den Unterschied der relativen Leuchtdichte zwischen Vorder- und Hintergrund. Ausreichender Kontrast erleichtert Menschen mit Sehschwäche, abweichendem Farbsehen, altersbedingten Sehproblemen, Blendung oder minderwertigen Displays das Lesen und Bedienen digitaler Oberflächen. Dieser Rechner wandelt zwei HEX- oder RGB-Farben in die von den Web Content Accessibility Guidelines definierten relativen Leuchtdichten um. Das Ergebnis reicht von 1:1 bei gleicher Leuchtdichte bis 21:1 für Schwarz auf Weiß. Die Berechnung vergleicht nicht einfach die rohen Rot-, Grün- und Blauwerte. Jeder sRGB-Kanal wird normalisiert und zur Berücksichtigung des Display-Gammas linearisiert. Die linearen Rot-, Grün- und Blauwerte erhalten die Gewichte 0.2126, 0.7152 und 0.0722, weil das menschliche Auge am empfindlichsten für grünes Licht ist. Für den endgültigen Kontrast wird die hellere Leuchtdichte plus 0.05 durch die dunklere Leuchtdichte plus 0.05 geteilt. Dieses Standardverfahren liefert unabhängig von der Eingabereihenfolge dasselbe Ergebnis. WCAG 2.x, Erfolgskriterium 1.4.3, verlangt auf Stufe AA mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Auf Stufe AAA steigen die Werte auf 7:1 und 4.5:1. Großer Text bedeutet üblicherweise mindestens 18 Punkt in normaler oder 14 Punkt in fetter Schrift, unter üblichen Browserannahmen etwa 24 CSS-Pixel beziehungsweise 18.66 CSS-Pixel. Für Bedienelemente und bedeutungstragende grafische Objekte gelten gesonderte Anforderungen, häufig 3:1 gegenüber benachbarten Farben. Ein ausreichendes Verhältnis ist wichtig, garantiert aber keine barrierefreie Gestaltung. Dünne oder ungewöhnliche Schriften, Verläufe, Bilder, Hover-Zustände, Transparenz, Kantenglättung und wechselnde Hintergründe beeinflussen die tatsächliche Lesbarkeit. Platzhaltertext und deaktivierte Bedienelemente sollten ebenfalls bewusst geprüft werden, auch wenn einzelne Kriterien sie anders behandeln. Vermitteln Sie Zustände nicht allein durch Farbe, sondern ergänzen Sie Beschriftungen, Symbole, Muster oder andere Hinweise. Testen Sie Fokusmarkierungen und jeden interaktiven Zustand, nicht nur den Standard-Screenshot. Geben Sie sechs- oder dreistellige HEX-Werte oder die übliche kommagetrennte RGB-Schreibweise ein. Der Rechner prüft Kanalwerte von null bis 255 und bewertet exakt die eingegebenen Farben. Liegt das Ergebnis knapp unter einem Grenzwert, dunkeln Sie den Vordergrund ab oder hellen Sie den Hintergrund auf und rechnen Sie erneut. Automatische Kontrastprüfungen sollten durch Tastaturtests, Zoom- und Umbruchprüfungen, Screenreader-Tests und Rückmeldungen von Menschen mit Behinderungen ergänzt werden. Nutzen Sie das Werkzeug in Entwurf und Umsetzung, um grundlegende Farbprobleme früh zu finden, und prüfen Sie die fertig gerenderte Oberfläche unter realistischen Bedingungen.