Kaum eine Design-Entscheidung wird so lange diskutiert wie die Farbfrage. Und kaum eine wird so oft falsch beantwortet: nicht mit der falschen Farbe, sondern mit zu vielen.
In dieser Lektion baust du das Farb-Handwerk auf. Eine kleine Palette mit festen Rollen, abgeleitet aus deiner Marke, geprüft an harten Kontrastgrenzen.
Kurzantwort
Welche Farben gehören auf eine Website?
Weniger, als die meisten Entwürfe verwenden. Professionelle Seiten stehen auf einer neutralen Basis aus Weiß, Grautönen und einem dunklen Ton, dazu kommen eine Markenfarbe und genau eine Akzentfarbe für alles Klickbare.
Farbwirkung entsteht dabei über Kontrast, Konsistenz und Kontext, nicht über Bedeutungstabellen. Wer die Akzentfarbe konsequent den Handlungen vorbehält, zeigt jedem Besucher ohne Worte, wo es weitergeht.
📌 Für wen ist das relevant: Für alle, die ihre Website selbst gestalten oder einen Entwurf abnehmen und wollen, dass sie professionell wirkt und Anfragen bringt.
- Am durchlaufenden Beispiel der Schreinerei Brenner entsteht Schritt für Schritt eine komplette Palette
- Mit 60-30-10, Grauleiter und Akzent-Regel bekommt jede Farbe eine feste Aufgabe
- Am Ende prüfst du jede Farbkombination selbst auf Kontrast und Tauglichkeit
Das lernst du in dieser Lektion
Du kannst den Farbwildwuchs auf einer Seite erkennen und sagen, welche Farbe keine Aufgabe hat.
Du kannst eine Palette mit festen Rollen aufschreiben: Basis für Flächen, Grauleiter für Struktur, ein Akzent für Handlungen.
Du kannst aus einer Markenfarbe helle und dunkle Varianten ableiten, statt neue Farben zu erfinden, und dunkle Sektionen einsetzen, ohne dass sie absaufen.
Du kannst jede Farbkombination auf Kontrast prüfen und weißt, warum Information nie nur an einer Farbe hängen darf.
Inhalt
01 ·
Weniger Farben, mehr Wirkung
Der häufigste Farb-Fehler auf Websites ist nicht die falsche Wahl, sondern die fehlende Begrenzung. Jede Sektion bekommt einen eigenen Ton, jeder Button eine eigene Farbe, dazu bunte Icons und ein farbiges Siegel. Einzeln wirkt jede dieser Entscheidungen harmlos, zusammen ergeben sie Lärm.
Die Schreinerei Brenner, das durchlaufende Beispiel dieses Kurses, ist genau in diese Falle getappt. Ihr erster Farbentwurf hat einen blauen Termin-Button, ein rotes Angebots-Siegel, eine orangefarbene Headline, einen türkisen Katalog-Button und lila gerahmte Kacheln. Sechs Farben, und keine davon hat eine Aufgabe.
Dass Bedeutungstabellen wie “Blau wirkt seriös” bei dieser Entscheidung nicht weiterhelfen, hast du in der Lektion zu den Design-Prinzipien gesehen: Farbwirkung entsteht über Kontrast, Konsistenz und Kontext, nicht über die Bedeutung einzelner Töne. Deshalb beginnt gutes Farb-Handwerk nicht mit der Frage “welche Farbe passt zu meiner Branche”, sondern mit der Frage “welche Aufgabe hat jede Farbe auf meiner Seite”.
Schau dir daraufhin die Websites an, die du selbst professionell findest. Sie stehen fast immer auf einer neutralen Basis: Weiß oder sehr helles Grau für die Flächen, ein dunkler Ton für den Text, Grautöne für alles dazwischen. Farbe kommt gezielt dazu, als Markenfarbe an wenigen Stellen und als eine einzige Akzentfarbe für das Klickbare.
Schaubild: dieselbe Brenner-Hero zweimal. Links konkurrieren sechs Farben, rechts tragen eine neutrale Basis, ein Holzton und ein Akzent die ganze Seite.
Sieh dir an, was rechts passiert ist. Kein Inhalt wurde entfernt, aber fünf Farben haben ihre Bühne verloren: Die Headline wurde dunkel, das Siegel verschwand, die Buttons wurden sortiert. Übrig bleiben die neutrale Basis, der Holzton der Marke und ein einziges Grün, das jetzt unübersehbar auf dem Hauptweg sitzt.
💡 Merke
Jede Farbe braucht eine Aufgabe. Eine Farbe ohne Aufgabe ist Dekoration, und jede Dekoration konkurriert mit dem einen Element, das den Besucher zur Anfrage führen soll. Wenn du nicht sagen kannst, wofür ein Ton auf deiner Seite zuständig ist, gehört er gestrichen.
💡 Praxis-Tipp
Mach heute die Farb-Inventur auf deiner Startseite. Nimm einen Screenshot, geh ihn von oben nach unten durch und schreib jede Farbe auf, die kein Grau ist: Buttons, Links, Icons, Siegel, Hintergründe, Überschriften. In den Entwickler-Tools des Browsers kannst du jeden Wert mit der Pipette exakt auslesen.
Kommst du auf mehr als drei Töne neben Weiß, Grau und deinem Textton, hast du Wildwuchs. Schreib hinter jede Farbe ihre Aufgabe, und wo keine steht, hast du deinen ersten Streichkandidaten.
Für die Conversion heißt das: Eine Seite mit einer klaren Handlungsfarbe bringt dem Besucher in Sekunden bei, was klickbar ist. Eine bunte Seite bringt ihm bei, dass Farbe nichts bedeutet, und dann muss er den Anfrage-Button suchen.
02 ·
Die Palette bauen: das 60-30-10-Handwerk
Eine Website-Palette ist keine Farbsammlung, sondern ein Rollenplan. Drei Rollen reichen: eine Basis für die Flächen, eine Sekundärebene für die Struktur und ein Akzent für die Handlungen.
Die Faustregel dafür heißt 60-30-10, und sie stammt aus der Innenraumgestaltung: Handwerkskonvention, kein Naturgesetz, aber ein verlässlicher Startpunkt. Die Zahlen beschreiben ein Verhältnis, kein Messergebnis. Wichtig ist, dass die Rollen klar getrennt sind und die kleinste die lauteste sein darf.
Die Basis trägt rund 60 Prozent der Seite: Weiß oder ein sehr helles Grau für Hintergründe, Boxen und Sektionen. Sie ist die Bühne, auf der alles andere steht, und sie darf unspektakulär sein. Genau diese Zurückhaltung lässt später den Akzent laut wirken.
Die Sekundärebene übernimmt rund 30 Prozent und liefert die Struktur: den dunklen Textton, Grautöne für Nebentext und Linien, dazu dunkle Sektionen als Gegengewicht. Sie macht die Seite lesbar und gegliedert, ohne selbst um Aufmerksamkeit zu kämpfen.
Der Akzent bekommt die restlichen rund zehn Prozent, und für ihn gilt die wichtigste Regel dieser Lektion: Der Akzent gehört den Handlungen. Buttons, Links, aktive Menüpunkte, der Fokusrahmen im Formular. Nirgendwo sonst darf er auftauchen, nicht auf Deko-Icons, nicht auf Überschriften, nicht als Hintergrund, damit es freundlicher wirkt.
Schaubild: die Anatomie einer Website-Palette. Drei Rollen mit klaren Zuständigkeiten, und die kleinste Rolle trägt die einzige laute Farbe.
Warum die Regel so streng ist, zeigt ein Gedankenexperiment. Wenn dein Grün auf dem Anfrage-Button, aber auch auf zwölf Deko-Häkchen und drei Überschriften sitzt, sagt es nichts mehr aus. Sitzt es nur auf Klickbarem, wird es zur Wegmarkierung, und der Besucher folgt ihr, ohne darüber nachzudenken.
💡 Merke
Der Akzent gehört den Handlungen. Jeder dekorative Einsatz verbraucht ihn, und ein verbrauchter Akzent kostet Anfragen, weil der Besucher das Klickbare nicht mehr vom Schmuck unterscheiden kann. Wie streng dieses Prinzip auf Seiten mit einem einzigen Ziel wird, zeigt unser Beitrag zu Landing Pages.
Die Grauleiter: das Arbeitspferd der Palette
Der unterschätzte Teil jeder Palette sind die Grautöne, und ein Grau ist nie genug. Überschriften brauchen einen fast schwarzen Ton, Nebentext ein mittleres Grau, Linien ein helles, Flächen ein noch helleres. Vier Aufgaben, vier Helligkeiten, und alle vier gehören fest in die Palette geschrieben.
Ohne diese Leiter passiert, was auf vielen selbstgebauten Seiten zu sehen ist: Jeder Kasten bekommt ein neues, gefühltes Grau, und die Seite wirkt fleckig. Mit der Leiter greifst du bei jeder Entscheidung auf dieselben vier oder fünf Werte zurück. Das ist Konsistenz zum Nulltarif.
Schaubild: die Grauleiter der Brenner-Palette. Fünf feste Werte statt gefühlter Grautöne bei jeder neuen Box.
💡 Praxis-Tipp
Mach heute den Akzent-Rollen-Check. Geh deine Startseite durch und markiere auf einem Screenshot alles, was deine Akzentfarbe trägt. Stell bei jedem Fund dieselbe Frage: Ist das klickbar?
Alles, was die Frage mit Nein beantwortet, färbst du auf einen Grauton deiner Leiter um. Danach hat deine Seite eine Handlungsfarbe statt einer Lieblingsfarbe, und das ist die günstigste Conversion-Maßnahme dieser Lektion.
Damit kannst du eine Palette als Rollenplan aufschreiben, bevor auch nur eine konkrete Farbe feststeht: Basis, Grauleiter, Akzent, je mit Zuständigkeit. Welche Töne diese Rollen bei der Schreinerei Brenner tatsächlich bekommen, klärt die nächste Sektion.
03 ·
Farben konkret wählen
Die gute Nachricht: Du beginnst fast nie bei null. Deine Markenfarbe steht meist schon fest, im Logo, auf dem Firmenwagen, im Briefpapier. Und falls nicht, liefern Branche und Material den natürlichen Ausgangspunkt.
Bei der Schreinerei Brenner ist das der Werkstoff selbst. Holz bringt seine Farbe mit, ein warmes Braun wie #8B5A2B, und genau dieser Ton wird zum Markenanker: im Logo, in der Bildwelt, in einer hellen Variante als Fond für einzelne Sektionen. Die Seite riecht dadurch nach Werkstatt, ohne dass irgendwo ein Hobel abgebildet sein muss.
Ein Farbton schlägt drei
Die wichtigste Wahl-Regel ist zugleich die entlastendste: Ein Farbton plus Neutrale wirkt souveräner als drei Farbtöne, die miteinander harmonieren sollen. Mehrere kräftige Töne aufeinander abzustimmen ist eine Aufgabe für erfahrene Gestalter, und selbst die scheitern oft daran. Die Kombination aus einem Ton und einer Grauleiter kann dagegen kaum schiefgehen.
Die zweite Regel betrifft die Dosierung: gedeckte Töne für Flächen, satte Töne nur für Akzente. Ein sattes Braun über eine ganze Sektion erschlägt den Inhalt, dieselbe Farbe stark aufgehellt trägt ihn. Deshalb bekommt der Brenner-Sektionsfond ein helles #F3EAE0 und niemals das volle Markenbraun.
HSL: heller und dunkler statt neuer Farben
Für diese Varianten brauchst du keine neuen Farben, sondern ein Werkzeug, das deine eine Farbe systematisch verändert. Es heißt HSL, und du findest es in jedem Farbwähler, von den Browser-Entwicklertools bis zum Grafikprogramm.
ℹ️ Was HSL bedeutet
HSL beschreibt jede Farbe über drei Regler: H ist der Farbton (Hue, 0 bis 360 Grad auf dem Farbkreis), S die Sättigung (wie kräftig der Ton ist) und L die Helligkeit (Lightness, von Schwarz bis Weiß).
Der Handgriff für deine Palette: H festhalten, L bewegen. Stell im Farbwähler von Hex auf HSL um, lass den Farbton deiner Marke stehen und schieb nur die Helligkeit. So entstehen dunklere und hellere Geschwister derselben Farbe, die automatisch zusammenpassen.
So entsteht aus dem einen Brenner-Braun eine ganze Familie. Eine dunkle Stufe für Text auf dem hellen Holzfond, die Markenfarbe selbst für Logo und Markenmomente, eine helle Stufe für die Bildwelt und eine sehr helle als Sektionshintergrund. Vier Werte, ein Farbton, null Harmonie-Risiko.
Schaubild: die Brenner-Holzfamilie. Alle vier Werte entstehen aus derselben Markenfarbe, indem nur der Helligkeitsregler bewegt wird.
Bleibt der Akzent, die eine Stelle, an der eine echte zweite Farbe auf die Seite darf. Er muss zwei Bedingungen erfüllen: Er hebt sich deutlich von Basis und Markenfarbe ab, und er kommt nirgendwo sonst vor. Brenner wählt ein kräftiges Grün wie #22c55e, nicht weil Grün etwas bedeutet, sondern weil es neben dem warmen Braun und der neutralen Basis unverwechselbar heraussticht.
Genau so leitest du deine eigene Palette ab: Markenfarbe festhalten, per Helligkeit eine Familie daraus ziehen, Grauleiter danebenlegen, einen abhebenden Akzent bestimmen. Das Ergebnis passt zusammen, weil fast alles aus einer einzigen Quelle stammt.
04 ·
Dunkle Sektionen und Farbflächen
Bisher war die Basis hell, und das bleibt sie auch. Aber eine lange Seite, auf der wirklich jede Sektion weiß ist, hat ein eigenes Problem: Nichts setzt Grenzen, nichts betont, alles fließt ineinander.
Die Lösung ist Rhythmus. Helle Sektionen bilden den Grundton, einzelne dunkle oder getönte Flächen setzen Zäsuren. Eine dunkle Sektion wirkt dabei wie eine Bühne mit gedimmtem Saallicht: Was auf ihr steht, bekommt automatisch Gewicht, und deshalb legt die Schreinerei Brenner ihre Anfrage-Sektion auf Dunkel.
Die Regeln auf dunklem Grund
Auf Dunkel gilt zuerst: kein reines Schwarz als Fläche. Ein fast schwarzes Grau wie #1a1a1a wirkt weicher als #000000 und lässt der Seite Luft nach unten. Der Unterschied ist klein, aber er entscheidet mit, ob die Sektion edel oder hart aussieht.
Zweitens braucht Text auf Dunkel deutlich mehr Helligkeit, als das Gefühl vorschlägt. Fließtext nie dunkler als ein helles Grau wie #cccccc, Nebentext nicht unter einem mittleren Grau. Wer sein gewohntes Textgrau einfach auf die dunkle Fläche stellt, produziert Absätze, die im Hintergrund versinken.
Drittens leuchtet der Akzent auf Dunkel stärker als auf Weiß. Das ist ein Geschenk für den einen Button, der dort stehen soll, und ein Grund, ihn noch sparsamer einzusetzen. Eine dunkle Sektion mit drei grünen Elementen hat ihre Bühne schon wieder verspielt.
Wann eine Farbfläche trägt und wann sie erschlägt
Für getönte Flächen wie den Brenner-Holzfond gilt dieselbe Logik. Eine Farbfläche trägt, wenn sie eine Aufgabe markiert: die Referenzen-Sektion als Markenmoment, die Anfrage-Sektion als Höhepunkt. Sie erschlägt, wenn der Ton satt statt stark aufgehellt ist oder wenn jede zweite Sektion eine andere Färbung bekommt.
Als Richtschnur für eine normale Unterseite reicht wenig: ein bis zwei besondere Flächen, der Rest bleibt hell. Je seltener die Zäsur, desto stärker wirkt sie.
Schaubild: der Seitenrhythmus der Schreinerei Brenner. Zwei besondere Flächen genügen, damit die Seite Kapitel bekommt und die Anfrage-Sektion heraussticht.
💡 Merke
Eine dunkle Sektion ist ein Ausrufezeichen. Setz sie dort, wo die Seite ihren wichtigsten Schritt fordert, und halte den Rest hell. Auf dem dunklen Grund gelten drei Regeln: fast Schwarz statt reines Schwarz, Text nie unter hellem Grau, und der Akzent nur ein einziges Mal.
Für die Conversion heißt das: Der Wechsel auf Dunkel stoppt den Scroll-Fluss genau dort, wo die Entscheidung fallen soll. Der Besucher spürt den Kapitelwechsel, und der eine grüne Button auf der dunklen Bühne ist das hellste Element weit und breit.
05 ·
Die harten Grenzen: Kontrast und Farbenblindheit
Alles bisher waren Gestaltungsentscheidungen mit Spielraum. Jetzt kommen die zwei Grenzen ohne Spielraum: Text muss lesbar sein, und Information darf nie allein an einer Farbe hängen.
Für die Lesbarkeit gibt es normierte Werte, die einzigen dieser Lektion. Die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte, verlangen zwischen Text und Hintergrund ein Kontrastverhältnis von mindestens 4,5:1, bei großem Text mindestens 3:1. Was daraus in Deutschland rechtlich folgt, behandelt die Lektion zur Barrierefreiheit nach dem BFSG.
Prüfen kannst du das in Sekunden, ohne etwas zu installieren. Such im Browser nach einem kostenlosen Kontrast-Checker, gib Textfarbe und Hintergrundfarbe als Hex-Werte ein und lies das Verhältnis ab. Viele Browser-Entwicklertools zeigen den Wert sogar direkt am Farbwähler an.
Die Akzent-Falle: zu hell für Text
Hier wartet die häufigste Überraschung: Kräftige Akzentfarben sind auf Weiß oft zu hell für Text, und Grün ist der Klassiker. Das Brenner-Grün #22c55e fällt als Textfarbe auf weißem Grund durch die 4,5:1-Prüfung. Als Buttonfläche mit dunkler Schrift funktioniert es, als Linkfarbe nicht.
Auch die Gegenrichtung geht schief: Weiße Schrift auf dem hellen Grün besteht die Prüfung ebenfalls nicht, so gewohnt der Anblick auch ist. Deshalb trägt der Brenner-Button dunkle Schrift auf der grünen Fläche.
Die Lösung kennst du aus Sektion 3: dieselbe Farbe, andere Helligkeit. Für Textlinks nutzt Brenner ein abgedunkeltes Grün wie #15803d, das auf Weiß besteht. Der Akzent bleibt damit eine einzige Farbe mit zwei Helligkeitsstufen, hell für Flächen, dunkel für Text.
Schaubild: sechs Kontrastfälle aus der Brenner-Palette gegen die 4,5:1-Grenze. Das helle Grün trägt Flächen, aber keinen Text, und auf Dunkel braucht selbst Nebentext mehr Helligkeit als gewohnt.
Information nie nur über Farbe
Die zweite harte Grenze schützt die Besucher, die Farben anders sehen als du. Rot-Grün-Schwächen sind die verbreitetste Form, und für Betroffene sehen genau die zwei Signalfarben ähnlich aus, mit denen Websites am liebsten codieren.
Die Regel dagegen ist einfach: Jede Information, die eine Farbe trägt, braucht einen zweiten Träger. Fehlermeldungen bekommen ein Icon und einen Text, nicht nur einen roten Rahmen. Links im Fließtext bekommen eine Unterstreichung, nicht nur eine Färbung, und Diagramme bekommen Beschriftungen statt einer reinen Farblegende.
Genau darum stehen im Schaubild oben die Urteile als Wörter neben den Häkchen. Wer die Regel auf der eigenen Seite prüfen will, stellt den Bildschirm testweise auf Graustufen: Alles, was dann seine Bedeutung verliert, hängt nur an Farbe.
💡 Praxis-Tipp
Mach heute den Kontrast-Check für deine drei wichtigsten Kombinationen: Fließtext auf Seitenhintergrund, Button-Schrift auf Buttonfarbe, Linkfarbe auf Weiß. Die Werte holst du mit der Pipette der Entwickler-Tools, geprüft wird im Kontrast-Checker gegen 4,5:1.
Fällt eine Kombination durch, tauschst du nicht die Farbe, sondern die Helligkeit: Schieb den L-Regler, bis der Wert steht. So bleibt deine Palette intakt und wird trotzdem für alle lesbar.
Für die Conversion heißt das: Ein Button, dessen Beschriftung ohne Anstrengung lesbar ist, wird häufiger als Handlung erkannt als einer, dessen Schrift im Grün versinkt. Lesbarkeit ist keine Kür für Behörden, sie ist die Voraussetzung dafür, dass dein Angebot überhaupt ankommt.
06 ·
Die Brenner-Palette komplett
Zeit für die Gesamtaufnahme. Über die Lektion verteilt hat die Schreinerei Brenner alles bekommen, was eine Website-Palette braucht: eine neutrale Basis, eine Grauleiter, eine Holzfamilie aus einer einzigen Markenfarbe und einen Akzent mit zwei Helligkeitsstufen.
| Rolle | Werte | Einsatz |
|---|---|---|
| Basis | #ffffff · #f7f7f7 | Seitenhintergrund, Boxen, helle Sektionen |
| Grauleiter | #1a1a1a · #666666 · #9ca3af · #e5e5e5 | Text, Nebentext, Inaktives, Linien; #1a1a1a zusätzlich als dunkle Sektion |
| Markenfamilie | #5C3B1D · #8B5A2B · #C0824E · #F3EAE0 | Text auf Holzfond, Logo und Markenmomente, Bildwelt, Sektionsfond |
| Akzent | #22c55e (Flächen) · #15803d (Text) | Buttons, Textlinks, aktive Zustände, sonst nichts |
Wie diese Palette auf der Seite aussieht, hast du bereits gesehen. Scroll zurück zum ersten Schaubild dieser Lektion: Links steht der bunt gewürfelte Ausgangsentwurf, rechts dieselbe Hero mit genau dieser Palette. Und das Rhythmus-Schaubild aus Sektion 04 zeigt, wie sich die Rollen über eine ganze Seite verteilen.
Damit du denselben Weg auf deiner eigenen Website gehen kannst, fasst die Prüfliste die Farb-Inventur in fünf Schritten zusammen. Sie bündelt die drei Praxis-Tipps dieser Lektion zu einem Durchgang, den du in einer halben Stunde schaffst.
| Schritt | Die Frage | Bei Nein |
|---|---|---|
| 1. Zählen | Kommst du neben Basis, Grauleiter und Markenfamilie mit einem einzigen Akzent aus? | Überzählige Töne auf Grau oder die Markenfamilie umfärben |
| 2. Rollen | Kannst du hinter jede Farbe ihre Aufgabe schreiben? | Farben ohne Aufgabe streichen |
| 3. Akzent | Ist alles, was die Akzentfarbe trägt, klickbar? | Deko-Einsätze auf einen Grauton umstellen |
| 4. Kontrast | Bestehen Fließtext, Button-Schrift und Links die 4,5:1-Prüfung? | Helligkeit über den L-Regler anpassen, nicht die Farbe tauschen |
| 5. Zweiter Träger | Behält die Seite in Graustufen jede Information? | Icons, Texte oder Unterstreichungen ergänzen |
Experten-Tipp aus der Agentur
Der erste Farb-Handgriff an einer bestehenden Website ist fast nie eine neue Farbe, sondern das Streichen von Farben. Reduzier auf Basis, Grauleiter und einen Akzent, und gib dem Akzent eine einzige Aufgabe: das Klickbare. Erst wenn diese Ordnung steht, lohnt die Diskussion, welcher Ton die Marke am besten trägt.
Pascal Cabitza
Geschäftsführer Ostend Digital
Eine Grenze dieser Lektion gehört dazu: Die Palette regelt, welche Farben deine Seite trägt, nicht, welche Elemente wohin gehören. Ob deine Hierarchie stimmt und das richtige Element gewinnt, prüfst du mit den Werkzeugen aus der Lektion zu den Design-Prinzipien, und beide Lektionen zusammen ergeben erst das ganze Handwerk.
07 ·
💡 Recap
Farben im Webdesign in 30 Sekunden:
- Weniger Farben, mehr Wirkung. Professionelle Seiten stehen auf einer neutralen Basis plus einem Akzent, und jede Farbe braucht eine Aufgabe
- 60-30-10 als Rollenplan: Basis für Flächen, Grautöne und dunkle Sektionen für Struktur, der Akzent für Handlungen. Die Grauleiter mit vier bis fünf festen Werten ist das Arbeitspferd
- Der Akzent gehört den Handlungen. Buttons, Links, aktive Zustände, nirgendwo sonst: Ein verbrauchter Akzent kostet Anfragen
- Aus einer Markenfarbe wird per HSL eine Familie: Farbton halten, Helligkeit schieben, statt neue Farben zu erfinden. Gedeckte Töne für Flächen, satte nur für Akzente
- Dunkle Sektionen sind Ausrufezeichen: fast Schwarz statt #000000, Text nie unter hellem Grau, der Akzent nur einmal, und maximal ein bis zwei besondere Flächen pro Seite
- Zwei harte Grenzen: Kontrast mindestens 4,5:1 für Text und 3:1 für großen Text, und jede Information braucht neben der Farbe einen zweiten Träger
08 ·
Selbstcheck: kannst du das anwenden?
Deine Website hat blaue Buttons, orange Icons, grüne Häkchen und rote Angebots-Badges. Was diagnostizierst du, und womit fängst du an?
Das ist Farbwildwuchs: viele Töne, keine Aufgaben. Du startest mit der Farb-Inventur, also Screenshot nehmen, jede Nicht-Grau-Farbe auflisten und ihre Aufgabe danebenschreiben. Alles ohne Aufgabe wird auf die Grauleiter oder die Markenfamilie umgefärbt, bis eine neutrale Basis mit einem einzigen Akzent übrig bleibt.
Dein Designer schlägt vor, die Akzentfarbe auch für die Icons in der Leistungs-Sektion zu nutzen, damit die Seite lebendiger wirkt. Wie entscheidest du?
Mit der Rollenregel: Der Akzent gehört den Handlungen, und Deko-Icons sind keine. Jeder dekorative Einsatz schwächt das Signal des Anfrage-Buttons, weil der Besucher das Klickbare nicht mehr vom Schmuck unterscheiden kann. Die Icons können auf einen Grauton oder eine helle Stufe der Markenfarbe ausweichen, Lebendigkeit darf aus der Bildwelt kommen.
Dein Logo ist dunkelblau, und du brauchst einen passenden Sektionshintergrund und eine Hover-Variante für Buttons. Suchst du zwei neue Farben aus?
Nein, du variierst die eine, die du hast. Im Farbwähler auf HSL umstellen, den Farbton des Logos festhalten und nur die Helligkeit bewegen: stark aufgehellt entsteht der Sektionsfond, leicht abgedunkelt die Hover-Variante. So passt alles automatisch zusammen, weil es aus derselben Quelle stammt.
Deine neue dunkle Anfrage-Sektion wirkt hart, der Text darauf ist schwer zu lesen, und irgendwie sticht der Button nicht heraus. Welche drei Regler prüfst du?
Erstens die Fläche: reines #000000 gegen ein fast schwarzes Grau wie #1a1a1a tauschen, das nimmt die Härte. Zweitens den Text: Fließtext auf mindestens ein helles Grau wie #cccccc anheben, sonst säuft er ab. Drittens den Akzent: Er muss auf der dunklen Bühne genau einmal vorkommen, denn bei drei grünen Elementen gewinnt keines.
Dein Formular markiert Fehler nur mit einem roten Rahmen, und deine Textlinks sind in einem hellen Orange gehalten. Was prüfst du, und was änderst du?
Beides verletzt eine harte Grenze. Der rote Rahmen trägt die Information allein über Farbe, für Besucher mit Rot-Grün-Schwäche braucht der Fehler einen zweiten Träger, also Icon plus Fehlertext am Feld. Das helle Orange schickst du durch den Kontrast-Checker gegen 4,5:1, und fällt es durch, dunkelst du es über den L-Regler ab, statt eine neue Farbe zu suchen.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (4 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 1.4.3 Contrast (Minimum): Kontrastverhältnis mindestens 4,5:1 für normalen und 3:1 für großen Text, Stufe AA (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das sind die einzigen normierten Zahlenwerte dieser Lektion. Quellentyp: Richtlinie, keine Interessenlage
- Die 60-30-10-Regel ist eine Gestaltungskonvention aus der Innenraumgestaltung, die aufs Web übertragen wurde: Richtwert für Flächenverhältnisse, kein Messwert. Alle übrigen Regeln dieser Lektion, darunter die Grauleiter-Werte, die Akzent-Rollenregel, die Helligkeits-Ableitung per HSL und die Regeln für dunkle Sektionen: verbreitete Handwerkspraxis des Webdesigns, Einordnung Ostend Digital, Stand 08/2026
- Die Kontrast-Urteile im Schaubild der Sektion 05 sind nach der WCAG-Kontrastformel für die jeweils angegebenen Hex-Werte berechnet, Ostend Digital, Stand 08/2026
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen, Ostend Digital, Stand 08/2026
Du willst eine Website, deren Farben nicht nur gefallen, sondern Anfragen bringen?
Wir bauen deine Palette mit festen Rollen, prüfen jede Kombination auf Kontrast und sorgen dafür, dass dein Akzent nur eines tut: den Weg zur Anfrage zeigen.
