Ueberblick
Dieses Tool richtet sich an Designer, Entwickler und Reviewer, die Farbpaarungen nicht nach Gefuehl bewerten wollen. Es zeigt das Kontrastverhaeltnis zweier Farben und hilft dir, den Wert in echtem UI-Kontext zu verstehen: Fliesstext, Labels, Buttons, Karten und Flaechen. Sinnvoll ist es beim Anpassen von Themes, beim Pruefen von Markenfarben und vor dem Livegang einzelner Komponenten. Besonders hilfreich ist es dort, wo Farben auf den ersten Blick gut wirken, aber in kleinen Schriftgroessen, deaktivierten Zustaenden oder auf getoenten Flaechen an Klarheit verlieren.
Anwendungsfaelle
- Fliesstext auf hellem HintergrundPruefen, ob ein Absatz auf Weiss, Creme oder sehr hellen Karten lesbar bleibt.
- Button-Beschriftung auf MarkenfarbeTesten, ob weisse, dunkle oder leicht getoente Schrift auf einer gefuellten Schaltflaeche klar genug ist.
- Sekundaertext in DatenansichtenUeberpruefen, ob Metadaten, Zeitstempel und Hilfstexte in dichten Dashboards noch hervorstechen.
- Dark-Mode-PruefungText auf anthrazitfarbenen Panels, Karten und Overlay-Flachen vor dem Release absichern.
So funktioniert es
- 1
Textfarbe und Hintergrundfarbe auswaehlen.
- 2
Das Tool berechnet das Kontrastverhaeltnis zwischen beiden Farben.
- 3
Das Ergebnis fuer normalen Text, groesseren Text und UI-Flaechen mit Blick auf Lesbarkeit pruefen.
Beispiele
Redaktionstext auf Weiss
Eingabe: Text #1F2937 / Hintergrund #FFFFFF
Ausgabe: Hohes Kontrastverhaeltnis; geeignet fuer normalen Lesetext.
Eine typische neutrale Kombination fuer Artikel, Formulare und Dokumentation.
Weisse Beschriftung auf blauem Button
Eingabe: Text #FFFFFF / Hintergrund #2563EB
Ausgabe: Gut lesbar fuer eine Aktionsschaltflaeche; Schriftgroesse mitpruefen.
Praktisch, um zu sehen, ob ein primärer CTA mit weisser Schrift funktionieren kann.
Helles Grau auf Karte
Eingabe: Text #6B7280 / Hintergrund #F3F4F6
Ausgabe: Niedrigeres Kontrastverhaeltnis; eher fuer kleinere Nebenhinweise ungeeignet.
Zeigt, warum feine Grautoene auf sehr hellen Flaechen schnell zu schwach werden.
FAQ
Was sagt mir das Kontrastverhaeltnis genau?
Es beschreibt den Helligkeitsunterschied zweier Farben. Ein hoeherer Wert bedeutet in der Regel deutlichere Trennung von Text und Hintergrund.
Warum wirkt eine Farbkombination gut, obwohl das Ergebnis schwach ist?
Gesattigte Farben koennen lebendig aussehen, aber eine zu geringe Helligkeitsdifferenz haben. Das Verhaeltnis basiert auf Luminanz, nicht auf Farbstaerke.
Spielt die Schriftgroesse bei der Bewertung eine Rolle?
Ja. Kleine Schrift braucht mehr Kontrast als grosse Ueberschriften. Was fuer einen Titel reicht, kann fuer Fliesstext oder Formulare zu schwach sein.
Welcher Fehler passiert bei Buttons und Badges am haeufigsten?
Oft wird nur der Standardzustand geprueft, nicht Hover, Disabled oder Outline. Diese Varianten koennen den Kontrast verringern und die Lesbarkeit verschlechtern.