Die 60-30-10-Regel teilt eine Gestaltung in drei Farbanteile: 60 Prozent Grundfarbe, 30 Prozent Zweitfarbe, 10 Prozent Akzent. Auf eine Website übertragen heißt das: Eine ruhige Grundfläche trägt die Seite, eine zweite Fläche gliedert sie in Abschnitte, und eine Akzentfarbe markiert, was man anklicken soll.
So weit die Regel. Ich habe sie an einer echten Seite nachgemessen, und dabei kommt etwas heraus, das in den meisten Erklärungen fehlt: Die 60 und die 30 kommen ungefähr hin. Die 10 nicht. Der Akzent liegt auf einer gut gebauten Seite weit darunter. 60-30-10 ist deshalb weniger eine Mengenangabe als eine Rangfolge: Eine Farbe trägt, eine gliedert, eine handelt.
Woher die Regel kommt
Aus der Innenarchitektur. Dort ist die Aufteilung handfest: Wände und Boden machen den Großteil aus, Möbel und Textilien den zweiten Teil, Kissen, Vasen und Bilder den Rest. Einen Urheber oder ein erstes Buch dazu konnte ich nicht finden. Fachseiten nennen sie gern eine der ältesten Gestaltungsregeln, belegen das aber nicht. Ins Webdesign ist sie als Faustregel eingewandert, und die deutschen Suchergebnisse dazu sind im Herbst 2026 vor allem übersetzte Anbieter-Blogs.
Das spricht nicht gegen sie. Es heißt nur: Die Zahlen hat nie jemand gemessen.
Nachgemessen: eine echte Seite in Prozent
Ich habe die Startseite meiner Fahrschul-Beispielseite vollständig abfotografiert, einmal in Desktop-Breite (1440 Pixel) und einmal in Handy-Breite (390 Pixel), und jedes Pixel der nächstliegenden Farbe aus ihrem Farbsystem zugeordnet. Fotos habe ich herausgerechnet, sie machen rund ein Fünftel der Seite aus und bringen ihre eigenen Farben mit. Die Messung ist grob, Stand Oktober 2026. Von der übrigen Fläche entfallen auf:
Weiß
als Grundfläche: 57 Prozent am Desktop, 60 Prozent am Handy.
Ein sehr helles Blaugrau
(#F3F5FB) für etwa jeden zweiten Abschnitt: 38 und 30 Prozent.
Fast-Schwarz und Grau
, also Text, Trennlinien und die dunkle Karte mit dem Beispielbetrag, zusammen: rund 4 Prozent am Desktop, rund 8 am Handy.
Die beiden Akzentfarben
, ein kräftiges Blau und ein Signalgelb, zusammen: 0,5 Prozent am Desktop, 1 Prozent am Handy.
Am Handy trifft die Seite die 60 zu 30 aufs Prozent, am Desktop liegt sie bei 57 zu 38. Zufall ist das nicht: Eine Grundfläche und eine leicht abgesetzte Abschnittsfläche im Wechsel lesen sich auf langen Seiten ruhig. Der Akzent dagegen bleibt bei höchstens einem Prozent, und die Seite wirkt trotzdem nicht farblos. Gerade weil das Blau selten ist, sieht man jeden blauen Knopf sofort.
Hätte der Akzent wirklich zehn Prozent, wäre ein Zehntel der Seite Blau oder Gelb. Dann fällt nichts mehr auf, weil alles laut ist.
Die 10 Prozent gehören der Handlung
Lies die letzte Zahl deshalb als Obergrenze für alles, was auffallen darf, nicht als Menge, die du füllen musst. Ich halte es streng: Die Akzentfarbe bekommt, was eine Handlung auslöst. Also Knöpfe und Links. Überschriften, Rahmen und Deko-Flächen bekommen sie nicht. Sonst lernt der Besucher nach drei Abschnitten, dass Blau nichts bedeutet.
Eine zweite Akzentfarbe geht, wenn sie eine eigene Zuständigkeit hat. Auf der Fahrschulseite ist Blau die Farbe zum Handeln auf hellem Grund: der Knopf zur Probestunde im Startbild, der Anfrage-Knopf in der Navigation, das Absenden im Formular. Gelb markiert Hinweise und die Schrittnummern im Ablauf und übernimmt die Knöpfe auf dunklem Grund, über dem Motorradfoto und in der dunklen Karte mit dem Beispielbetrag. Dort käme das Blau nur auf 2,6 : 1 (mehr dazu gleich). Ganz streng war die Beispielseite beim Messen nicht: Auch die Symbole bei den Führerscheinklassen, die Initialen bei den Kundenstimmen und die Rahmen in den FAQ und unter „Wie es weitergeht“ waren blau. Zusammen mit allen Knöpfen blieb das bei höchstens einem Prozent der Fläche. Trotzdem habe ich Symbole und Rahmen danach auf Grau gesetzt, damit Blau nur noch heißt: Hier geht es weiter. Blau geblieben sind das Logo und die Nummern im Formular.
Kontrast je Rolle
Die Regel sagt nichts darüber, ob man die Farben lesen kann. Das musst du je Rolle prüfen. Die Barrierefreiheits-Richtlinien WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1, für große Schrift sowie Rahmen und Symbole von Bedienelementen 3 : 1. Nachgerechnet für die Fahrschulseite:
- Fast schwarzer Text (#151A23) auf Weiß: 17,4 : 1.
- Grautext (#56607A) auf der hellen Abschnittsfläche: 5,8 : 1. Reicht.
- Weiße Schrift auf dem Akzent-Blau (#1D4ED8): 6,7 : 1.
- Weiße Schrift auf dem Signalgelb (#F5B50A): 1,8 : 1, durchgefallen. Deshalb tragen die gelben Knöpfe dunkle Schrift, die kommt auf 9,6 : 1.
Gelb fällt auf Weiß fast immer durch, die Zahlen dazu stehen im Beitrag über die Farbe Gelb. Bei der Akzentfarbe geht es am leichtesten schief, weil sie als einzige nach Wirkung ausgesucht wird.
Wo die Regel bricht
Dunkelmodus. Drehst du die Grundfläche auf Dunkel, stimmen die Anteile weiter, die Kontraste nicht. Dasselbe Blau, das auf Weiß 6,7 : 1 schafft, kommt auf dem fast schwarzen Textton nur auf 2,6 : 1. Für dunkle Flächen braucht der Akzent deshalb eine hellere Variante oder, wie auf der Fahrschulseite, gleich eine zweite Farbe.
Bildlastige Seiten. Bei einem Restaurant oder einer Ferienwohnung bestimmen die Fotos die Farbwirkung. Dann zählt nur, dass die Flächen den Fotos nicht in die Quere kommen. Sie werden ruhiger, der Akzent bleibt.
Marken mit kräftiger Grundfarbe. Wer ein starkes Markenrot hat, will es sehen. Aber 60 Prozent Rot als Hintergrund trägt kaum eine Seite über mehrere Bildschirmhöhen. Meist wandert die Markenfarbe in die 30 Prozent, als Kopfbereich, als einzelner Abschnitt oder als Fläche hinter einem Zitat, und die 60 bleiben neutral. Welche Rolle welche Farbe in einer Marke spielt, beschreibt der Beitrag über Farben im Branding.
So setzt du die Regel um
- Grundfläche festlegen. Weiß oder ein sehr helles Off-White. Ein deutliches Beige oder Grau macht die ganze Seite müde.
- Abschnittsfläche wählen. Eine Stufe dunkler oder leicht in Richtung deiner Markenfarbe getönt. Sie trennt Abschnitte und hält sich sonst zurück.
- Einen Akzent bestimmen und ihn nur für Handlungen verwenden. Ein zweiter braucht eine klare eigene Zuständigkeit: Hinweise, oder Knöpfe dort, wo der erste nicht lesbar ist.
- Jede Rolle auf Kontrast prüfen, auch die Schrift auf dem Akzent.
Wenn du nicht bei null anfangen willst: Bei den Farbpaletten für Websites stehen Kombinationen mit nachgerechnetem Kontrast, als Ausgangspunkt für die drei Rollen. Und wenn du die Farben lieber gleich in einer fertigen Seite sehen willst, baue ich dir eine.
Häufige Fragen
Was besagt die 60-30-10-Regel?
Sie teilt eine Gestaltung in drei Farbanteile: rund 60 Prozent Grundfarbe, 30 Prozent Zweitfarbe und 10 Prozent Akzent. Auf einer Website entspricht das meist einer hellen Grundfläche, einer leicht abgesetzten Fläche für Abschnitte und einer Akzentfarbe für Knöpfe und Links.
Woher kommt die 60-30-10-Regel?
Aus der Innenarchitektur: Wände und Boden als Hauptfläche, Möbel und Textilien als zweite Farbe, Accessoires als Akzent. Einen belegten Urheber gibt es nicht, die Regel ist eine überlieferte Faustregel, die später ins Grafik- und Webdesign übernommen wurde.
Müssen die Prozente genau stimmen?
Nein. Die Zahlen sind ein Bild für eine Rangfolge. Auf einer nachgemessenen Beispielseite liegt der Akzent bei höchstens einem Prozent der Fläche, und genau deshalb fällt er auf. Wichtiger als die Menge ist, dass die Akzentfarbe nur dort steht, wo man etwas tun kann.
Gilt die Regel auch im Dunkelmodus?
Die Anteile ja, die Kontraste nicht automatisch. Ein Blau, das auf Weiß gut lesbar ist, kann auf fast schwarzem Grund unter die für Bedienelemente nötigen 3 : 1 fallen, auf der Beispielseite sind es 2,6 : 1. Für dunkle Flächen braucht der Akzent meist eine hellere Variante.
Pappelbaum Design
Deine Website, persönlich gebaut.
Onepager, Firmenseite oder Relaunch: Ich baue sie, du pflegst die Inhalte selbst im Dashboard. Monatlich kündbar, bezahlt wird erst, wenn du zufrieden bist.