Farbe und Kontrast im Interface: Palette und Dark Mode

Warum das Layout eines Anfängers wie ein Jahrmarkt aussieht

Weißt du, wo der Haken liegt? Man will alle Lieblingsfarben auf einmal ins Layout stopfen. Blauer Button. Grüne Überschrift. Rotes Banner. Lila Hintergrund. Und alles brüllt gleichzeitig. Das Auge findet keinen Halt - wenn alle schreien, hört man niemanden.

Guter Geschmack bei Farbe heißt überhaupt nicht „hundert schöne Töne kennen“. Es ist die Fähigkeit, sich zu beschränken. Stell dir eine Band auf der Bühne vor: ein Solist, der Rest singt im Hintergrund mit. Singen alle als Solisten, gibt es ein Chaos. Mit Farbe ist es genau dasselbe: ein bis zwei Akzent-Solisten und ein Haufen bescheidener Neutraltöne im Hintergrund. Das ist das ganze Geheimnis einer teuren Palette.

Was eine durchdachte Arbeit mit Farbe bringt

Farbe trifft das Auge zuerst - noch bevor man auch nur ein Wort gelesen hat. In Sekundenbruchteilen entscheidet sie: teuer oder billig, ruhig oder unruhig. Und wenn du ein Interface vibecodest oder eine Landingpage baust, arbeitet Farbe entweder für dich oder gegen dich - ein Dazwischen gibt es hier nicht.

• Du hörst auf, „papageienbunte“ Layouts zu bauen, in denen zehn Farben um Aufmerksamkeit kämpfen.
• Du verstehst, warum dein Text schwer zu lesen ist - und reparierst es mit einer einzigen Regel.
• Du baust einen Dark Mode, von dem die Augen nicht nach fünf Minuten müde werden.
• Du kannst deinem Vibecode-Assistenten Vibecoding - das Bauen von Apps und Websites zusammen mit KI, bei dem du in Worten beschreibst und das neuronale Netz den Code schreibt. Hier ist es besonders wichtig, die Palette in Worten vorgeben zu können, sonst kippt das Modell jede Menge grelle Standardfarben rein. klare Befehle zur Farbe geben statt „mach es schön“.

Neun von zehn „hässlichen“ Interfaces liegen nicht an schlechter Farbe, sondern an zu vielen Farben und schwachem Kontrast. Das kuriert man durch Weglassen, nicht durch Hinzufügen.

Wie man die Palette einer Website baut: Solist und Chor

Wähl Farben nicht einzeln aus, „welche gefällt mir“. Wähl Rollen - und such erst dann für jede Rolle den passenden Ton. Der Ansatz ändert sich komplett.

Neutraltöne nehmen fast den ganzen Bildschirm ein

Neutraltöne sind nicht mal eine Farbe. Sie sind Luft. Grautöne unterschiedlicher Helligkeit, fast Weiß für den Hintergrund, fast Schwarz für den Text. Es gibt viele davon, und sie sind unauffällig - genau das ist der Sinn. Sie halten die Bühne, damit der Akzent glänzen kann. Auf einem echten Bildschirm nehmen die Neutraltöne meist den Großteil der Fläche ein, und für knallige Farben bleibt nur ganz wenig.

Wie viele Akzentfarben man nimmt

Der Akzent ist deine Markenfarbe. Der „Kaufen“-Button, der aktive Link, die wichtige Zahl. Ein Hauptakzent reicht schon dicke. Einen zweiten kannst du als Kontrapunkt dazunehmen - sagen wir, warm zu kalt. Ein dritter aber ist fast immer überflüssig: Er verstärkt den ersten nicht, sondern klaut ihm Aufmerksamkeit. Gier lohnt sich hier nicht.

Kontrast und Lesbarkeit von Text: die Regel 4,5 zu 1

Kontrast Kontrast - der Unterschied in der Helligkeit zwischen zwei Farben, zum Beispiel Text und Hintergrund. Wird als Verhältnis gemessen: je größer die Zahl, desto stärker hebt sich der Text vom Hintergrund ab und desto leichter liest er sich. dreht sich um Helligkeit, nicht darum, „wie verschieden die Farben sind“. Gelb und Weiß sind völlig verschiedene Farben, aber ihre Helligkeit ist fast gleich - deshalb ist gelber Text auf Weiß überhaupt nicht lesbar. Schwarz auf Weiß dagegen liest sich perfekt, obwohl das streng genommen gar keine Farben sind.

Es gibt eine bewährte Orientierung aus dem Barrierefreiheitsstandard WCAG. Die haben alle vernünftigen Designer im Kopf:

• Normaler Text zum Hintergrund - mindestens 4,5 zu 1.
• Große Schrift (große Überschrift, fett) - darf sanfter sein, 3 zu 1.
• Icons und wichtige Interface-Elemente - ebenfalls etwa 3 zu 1.

Im Kopf rechnen musst du nicht. Es gibt jede Menge kostenlose Kontrast-Checker: du fügst zwei Farben ein - siehst die Zahl. Aber auch ohne sie funktioniert ein einfacher Augen-Test, dazu unten mehr.

Kneif die Augen zusammen und schau den Text aus der Ferne an. Verschwimmen die Buchstaben zu Brei - dann ist zu wenig Kontrast da.
Mach einen Screenshot und wandle ihn in Schwarz-Weiß um. Ist der Text weg oder kaum zu sehen - dann hat die Farbe alles allein getragen, und es fehlt die Helligkeit.
Vergleich mit schwarzem Text auf Weiß - das ist der Maßstab. Deine Variante sollte in der Schärfe nah dran sein, nicht spürbar schwächer.
Schau es dir auf dem Handy bei Tageslicht draußen an. Überlebt es - dann ist es okay.

Dark Mode: der Hintergrund ist nicht Schwarz, sondern Dunkelgrau

Der häufigste Anfängerfehler im Dark Mode ist, den Hintergrund reinschwarz zu füllen und knallweißen Text draufzuwerfen. Die Logik scheint eisern: maximaler Kontrast eben. In Wahrheit kommt dabei ein ins Auge schneidendes Flimmern heraus - die weißen Buchstaben summen geradezu auf dem Schwarz, und lange lesen ist unmöglich.

Profis machen es anders. Material Design (das ist das Designsystem von Google) empfiehlt direkt, als Grundhintergrund für den Dark Mode ein sehr dunkles Grau zu nehmen, kein Schwarz - rund um #121212. Schieb es etwas ins Warme, Richtung Braun oder Petrol - und es wird fürs Auge noch sanfter.

Dark Mode Dark Mode - eine Interface-Variante mit hellem Text auf dunklem Hintergrund. Ein guter Dark Mode nutzt kein reines Schwarz, sondern Dunkelgrau, und gedämpfte Akzente statt greller. lebt nach eigenen Regeln, und die sind spiegelverkehrt zum hellen.

Drei Regeln für den Dark Mode

• Hintergrund - warmes Dunkelgrau, nicht #000000. Reines Schwarz wirkt wie ein Loch und verstärkt das Textflimmern. Dunkelgrau ist sanfter und lässt Raum für Schatten.
• Text - nicht reinweiß. Nimm Hellgrau, leicht gedämpft. Perfektes Weiß auf Schwarz blendet. Den sekundären Text machst du noch matter - so entsteht eine Hierarchie.
• Akzente dämpfen. Die knallige Farbe, die auf hellem Hintergrund cool aussah, schneidet auf dunklem ins Auge. Mach sie weniger gesättigt und etwas heller - damit sie noch beim Kontrast durchkommt, aber nicht brüllt.

Häufige Fehler bei Farbe und Kontrast

• Farben wie aus dem Filzstiftkasten. Fünf Akzente heißt: kein einziger. Lass ein bis zwei übrig, der Rest sind Neutraltöne.
• Schwacher Kontrast der Ästhetik zuliebe. Hellgrauer Text auf Weiß sieht „luftig“ aus, ist aber nicht lesbar. Schön und unlesbar ist einfach nur unlesbar.
• Bedeutung über Farbe allein. „Fehler/Erfolg“ nur über Farbe zu zeigen heißt, einen Teil der Leute zu verlieren. Verdopple es mit Text oder Symbol.
• Reines Schwarz im Dark Mode. #000000 mit weißem Text summt. Nimm warmes Dunkelgrau und gedämpften Text.
• Grelle Akzente auf dunklem Hintergrund. Eine gesättigte Farbe, die auf hellem glänzte, schneidet auf dunklem ins Auge. Dämpfen und leicht aufhellen.
• Warme und kalte Akzente grundlos durcheinander. Warm und Kalt können miteinander streiten. Bist du unsicher, halt dich an eine Temperaturfamilie.