Warum deine UI-Farben nach Anfänger aussehen: 6 Fixes mit exakten Codes
Sechs Farbfehler, die eine Oberfläche nach Anfänger aussehen lassen, und die Profi-Lösung für jeden mit den exakten Codes: ein Akzent, Farbe plus Icon plus Worte, getönte Flächen, dunklerer Akzenttext, dunkler Text auf Gelb und ein Farbton pro Zustand.
Anfänger-Farbe ist selten ein Farbklecks-Desaster. Es sind sechs kleine Gewohnheiten: zu viele Akzente, Farbe, die allein einen Job erledigen soll, volle Farbflächen überall, eine helle Markenfarbe für Text, Weiß auf Gelb und ein Farbton für jeden Zustand. Profi-Farbe wirkt ruhig, weil es für jeden dieser Punkte eine Regel gibt. Hier sind die sechs, mit den Codes.
1. Ein Akzent, für Aktionen
Rot
Grün
Bernstein
Violett
Neutral
Neutral
Neutral
Akzent #6440E0
Wenn jedes Element seine eigene Farbe hat, bedeutet Farbe nichts mehr. Das Auge findet keinen Landeplatz, und die echte Aktion konkurriert mit Dekoration.
Wähle einen Akzent und setze ihn nur bei dem ein, womit Leute etwas tun können: der Hauptbutton, der gewählte Tab, der Link. Alles andere wird neutral. Wenn du auf ein farbiges Element zeigen und sagen kannst „das ist nicht antippbar“, nimm ihm die Farbe. Die 60-30-10-Regel ist dieselbe Idee in Proportionen: Der Akzent sind die kleinen zehn.
2. Farbe, Icon und Worte
✕ Anfänger: ein roter Rand und sonst nichts
Gib die vollständige Adresse an, z. B. sam@mail.com.
✓ Profi: Farbe, Icon und Worte
✕ Anfänger: welches Feld ist falsch?
Gib die vollständige Adresse an, z. B. sam@mail.com.
✓ Profi: immer noch eindeutig
Etwa 8 Prozent der Männer nordeuropäischer Abstammung haben Schwierigkeiten, Rot von Grün zu unterscheiden, die übliche Zahl „1 von 12 Männern“. Für sie und für alle, die ihr Handy in der Sonne benutzen, ist ein roter Rand ein grauer Rand.
Ein Zustand braucht also drei Signale: eine Farbe, ein Icon davor und Worte, die sagen, was zu tun ist. Das ist WCAG 1.4.1, Verwendung von Farbe: Farbe darf eine Botschaft unterstützen, aber nie der einzige Weg sein, sie zu vermitteln. Die komplette Fehlerpalette steht in unserem Paper zur Farbe von Fehlermeldungen.
3. Große Flächen tönen
Hol dir Pro für 4 $
Offline-Karten, keine Werbung und Reisen teilen.
Upgraden✕ Anfänger: die ganze Karte in voller Farbe
Hol dir Pro für 4 $
Offline-Karten, keine Werbung und Reisen teilen.
Upgraden✓ Profi: ein Tönung, und volle Farbe auf dem Button
Ein großer Block in voller Farbstärke ist laut und verbraucht deinen Akzent. Dann hat der Button darin nichts mehr, womit er herausstechen kann, weil alles um ihn herum schon dieselbe Farbe hat.
Tönde stattdessen die große Fläche und spare die volle Farbe für den Teil auf, der die Arbeit macht. Hier liegt die Karte auf #E6DDFF, einer blassen Stufe desselben Violetts, und der Button hat das volle #6440E0. Nutze denselben Kniff für Banner, ausgewählte Zeilen und Hervorhebungsbereiche. Unser Paper zu Markenfarbpaletten zeigt, wie du die Tönungsstufen aus einem Farbton aufbaust.
4. Akzenttext abdunkeln
Helles Violett auf Weiß
Dunkleres Violett auf Weiß
Eine helle Markenfarbe ist als Fläche in Ordnung und als Text schwach. #9A79FC wirkt auf einem Button freundlich und bricht als 14-px-Link auf Weiß zusammen. Die Lösung behält den Farbton und senkt die Helligkeit: #6440E0 ist dasselbe Violett, tief genug zum Lesen.
Für alle, die die Entscheidung verteidigen müssen: #9A79FC auf Weiß hat 3,22 zu 1, unter den 4,5 zu 1, die WCAG für Text verlangt, und #6440E0 hat 6,27 zu 1. Unser Paper zu barrierefreiem Farbkontrast erklärt die Zahlen und wie du sie prüfst.
Halte von jeder Markenfarbe zwei Versionen bereit: die leuchtende für Flächen und Illustrationen und die tiefere für Text und dünne Icons.
5. Dunkler Text auf Gelb
Weiß auf Gelb
Dunkel auf Gelb
Gelb und andere helle Farben sind von Natur aus hell, deshalb hat Weiß darauf kaum einen Helligkeitsunterschied. Weiß auf #FED480 hat 1,41 zu 1. Ein Fast-Schwarz wie #161513 auf demselben Gelb hat 12,99 zu 1.
Die Regel gilt für jede helle Fläche: Pastellgelb, Mint, Himmelblau, Pfirsich. Ist der Hintergrund hell, ist der Text dunkel. Für Designer, die Weiß auf einer Markenfarbe gewohnt sind, fühlt sich das verkehrt an, und es ist einer der schnellsten Wege, einen Button professionell wirken zu lassen.
6. Ein Farbton pro Zustand
Standard
Gedrückt
Deaktiviert
Ein Button, der gedrückt genauso aussieht wie im Ruhezustand, gibt kein Feedback, und ein deaktivierter Button in derselben Farbe wie ein aktiver wirkt kaputt. Gib jedem Zustand seine eigene Abstufung desselben Farbtons: #6440E0 standardmäßig, #4422B2 gedrückt und eine blasse Tönung wie #E6DDFF mit einem lesbaren #9A79FC-Label bei deaktiviert.
Deaktiviert ist der einzige Zustand, in dem niedriger Kontrast akzeptabel ist, und WCAG nimmt ihn aus, aber das Label sollte noch lesbar genug sein, damit Leute verstehen, was der Button tun würde. Dasselbe Set aus drei Abstufungen funktioniert für Links, Tabs und Schalter.
Die sechs Fixes in einer Tabelle
| Anfänger | Profi | Der Wert |
|---|---|---|
| Viele Akzente | Ein Akzent, für Aktionen | #6440E0 auf dem einen Ding zum Antippen |
| Nur Farbe | Farbe, Icon und Worte | Nie das einzige Signal |
| Flächen in voller Farbe | Getönte Flächen | #E6DDFF dahinter, #6440E0 auf dem Button |
| Helle Markenfarbe als Text | Dunklerer Akzenttext | #6440E0, nicht #9A79FC |
| Weiß auf Gelb | Dunkler Text auf Gelb | #161513 auf #FED480 |
| Ein Farbton für alle Zustände | Ein Farbton pro Zustand | #6440E0, #4422B2, #E6DDFF mit #9A79FC-Label |
FAQ
Was lässt eine UI-Farbpalette amateurhaft aussehen?
Zu viele Akzente, Farbe allein als Bedeutungsträger, volle Farbflächen auf großen Bereichen und helle Markenfarben als Text. Diese vier zu beheben bringt meist mehr, als die Palette selbst zu ändern.
Wie viele Akzentfarben sollte eine UI haben?
Eine. Nutze sie nur für das, was Leute antippen oder womit sie handeln können, und halte alles andere neutral. Statusfarben wie Rot für Fehler sind etwas anderes und kommen immer mit Icon und Worten.
Welche Textfarbe gehört auf einen gelben Hintergrund?
Eine dunkle. #161513 auf #FED480 hat etwa 13 zu 1, Weiß auf demselben Gelb etwa 1,4 zu 1. Dasselbe gilt für jeden hellen Hintergrund.
Wie mache ich eine helle Markenfarbe als Text lesbar?
Behalte den Farbton und senke die Helligkeit. #9A79FC hat auf Weiß etwa 3,2 zu 1, und #6440E0, dasselbe Violett, hat etwa 6,3 zu 1.
Welche Farbe sollte ein gedrückter Button haben?
Einen dunkleren Ton des Standards, etwa #4422B2 gegenüber #6440E0. Das gibt Leuten Feedback, dass der Tipp angekommen ist, ohne den Farbton zu ändern.
Müssen deaktivierte Buttons die Kontrastanforderungen erfüllen?
WCAG nimmt deaktivierte Elemente vom Mindestkontrast aus, aber halte das Label lesbar, damit Leute erkennen, was der Button tut.
Quellen
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4,5 zu 1 für Text, deaktivierte Komponenten ausgenommen) und 1.4.1 Use of Color.
- Kontrastverhältnisse berechnet mit der WCAG-Formel für relative Luminanz: #9A79FC auf #FFFFFF 3,22 zu 1, #6440E0 auf #FFFFFF 6,27 zu 1 (beide Farbton etwa 254 Grad), #FFFFFF auf #FED480 1,41 zu 1, #161513 auf #FED480 12,99 zu 1.
- Rot-Grün-Farbsehschwäche betrifft laut National Eye Institute etwa 8 Prozent der Männer nordeuropäischer Abstammung.
- Die Zustandsfarben (#4422B2 gedrückt, #E6DDFF mit #9A79FC-Label deaktiviert) sind unsere eigene Palette. Die Filterfarben in Abschnitt 1 sind beispielhaft.
- Zuerst veröffentlicht als Karussell auf UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
