Warum Farbkontrast wichtig ist
Farbkontrast entscheidet darüber, ob Menschen deine Oberfläche überhaupt lesen können. Kontrastarmer Text mag auf dem kalibrierten Monitor des Designers elegant wirken, wird aber bei Sonnenlicht, auf billigen Displays oder für die etwa jeden zwölften Mann und jede zweihundertste Frau mit einer Farbsehschwäche unlesbar. Guter Kontrast ist einer der wirkungsvollsten und zugleich einfachsten Schritte zu mehr Barrierefreiheit.
Die Web Content Accessibility Guidelines (WCAG) drücken Kontrast als Verhältnis zwischen der relativen Leuchtdichte zweier Farben aus – von 1:1 (kein Kontrast, identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß). Das Tool oben berechnet dieses Verhältnis für jedes Farbpaar deiner Palette exakt nach der WCAG-2.1-Formel.
WCAG-Kontraststufen erklärt
- AA – normaler Text: mindestens
4,5:1. Die Basis, die die meisten Gesetze und Audits für Fließtext verlangen. - AA – großer Text: mindestens
3:1. „Groß" bedeutet rund 24 px, oder 19 px fett. - AAA – normaler Text: mindestens
7:1. Die erhöhte Stufe, empfohlen wo Lesbarkeit kritisch ist. - AAA – großer Text: mindestens
4,5:1. - Nicht-Text (UI & Grafik): Bedienelemente und aussagekräftige Grafiken sollten mindestens
3:1zu ihrer Umgebung erreichen.
Faustregel: Erreiche überall AA und betrachte AAA als Ziel für Fließtext und kleine Schrift.
Farbharmonien verstehen
Eine Harmonie ist ein Satz von Farben, deren Farbtöne in einer festen Beziehung auf dem Farbkreis stehen. Harmonien geben einer Palette Absicht, statt zufällig zu wirken. Der Generator oben erzeugt fünf klassische Typen:
- Komplementär – zwei genau gegenüberliegende Farbtöne (180° Abstand). Maximaler Kontrast; ideal für Call-to-Action-Akzente.
- Analog – benachbarte Farbtöne (±30°). Ruhig und stimmig, häufig in der Natur.
- Triade – drei Farbtöne im gleichmäßigen Abstand von 120°. Lebendig und dennoch ausgewogen.
- Tetrade – vier Farbtöne, die ein Rechteck auf dem Kreis bilden. Reichhaltig, braucht aber eine dominante Farbe.
- Monochrom – ein einziger Farbton in verschiedenen Helligkeiten. Elegant und leicht barrierefrei zu halten.
Harmonie lässt eine Palette gut aussehen; Kontrast lässt sie funktionieren. Deshalb vereint dieses Tool beides – erzeuge ein Schema, das dir gefällt, und prüfe sofort, ob die geplanten Text-/Hintergrund-Paare tatsächlich die WCAG bestehen.
So nutzt du das Tool
- Starte mit der Standard-Palette oder wähle eine Basisfarbe und wende eine Harmonie an.
- Feinjustiere jede Farbe per Farbwähler oder durch Eingabe eines Hex-Werts.
- Lies die Matrix: grünliche Zellen bestehen AA für normalen Text, bernsteinfarbene nur für großen Text, rote fallen durch.
- Klicke auf einen Hex-Code, um ihn in die Zwischenablage zu kopieren.
FAQ
Was ist ein guter Farbkontrast-Wert?
Für normalen Fließtext mindestens 4,5:1 (WCAG AA) oder 7:1 (AAA). Großer Text benötigt 3:1 (AA) bzw. 4,5:1 (AAA). Das Maximum liegt bei 21:1.
Was ist der Unterschied zwischen AA und AAA?
AA ist die geforderte Basis für barrierefreie Seiten; AAA ist die strengere Stufe für höchste Lesbarkeit. Für die meisten Projekte ist AA das praktische Ziel.
Hängt das Kontrastverhältnis von der Schriftgröße ab?
Das Verhältnis selbst nicht, aber der Schwellenwert, den du erreichen musst: Für großen Text genügt ein niedrigeres Verhältnis (3:1 für AA), weil größere Formen leichter lesbar sind.
Werden meine Farbdaten hochgeladen?
Nein. Alles wird lokal in deinem Browser mit JavaScript berechnet. Es wird nichts an einen Server gesendet.