Akzentfarbpaletten: 16 Akzente und die Beschriftung, die jeder braucht

Eine Akzentfarbe ist die eine Farbe in deinem Interface, die „Tipp hier" bedeutet. Sie funktioniert nur, wenn die Worte darauf lesbar sind. Also entscheidet das Label, welcher Akzent ein guter Akzent ist. Hier sind sechzehn Akzente in vier Tests, mit jedem Hex-Code und dem Label, das jeder verträgt.

Was ein Akzent überstehen muss

Ein Akzent wird daran gemessen, was passiert, wenn du ein Wort darauf setzt. Das Label muss lesbar sein, und der Button muss sich von der Seite dahinter abheben.

Daraus ergeben sich vier Tests. Verträgt er ein weißes oder ein dunkles Label, oder landet er in der Mitte, wo keins von beiden funktioniert? Kann er kleinen Tag-Text tragen? Ist er zu blass für einen Button, wie Butterscotch Gold #F7C873?

Jede Palette unten besteht aus einer Tinte, einem Akzent und einer Fläche, und die letzte Kachel zeigt den Test.

Welches Label verträgt der Akzent

Teal, Cobalt und Rose sind dunkel genug, dass ein weißes Label quer durch den Raum lesbar ist. Amber #C88A16 ist es nicht.

Teal

#10312E

Deep Sea

#0E7C6B

Teal

#ECF3F1

Kreide

Speichern

Weiß auf Teal

Ein tiefes Teal, das ein weißes Label mit reichlich Luft trägt.

Cobalt

#171C33

Navy Ink

#2F4BD6

Cobalt

#ECEEF7

Nebel

Speichern

Weiß auf Cobalt

Der stärkste der vier. Weiß auf Cobalt liest sich quer durch den Raum.

Rose

#2E1E24

Plum Ink

#C2445F

Rose

#F8EEEF

Muschel

Speichern

Weiß auf Rose

Rose ist der hellste der drei Weiß-Label-Akzente und hat deshalb am wenigsten Spielraum. Hellere Töne sind tabu.

Amber

#2C2415

Bark

#C88A16

Amber

#F6F0E4

Hafer

Speichern

Bark auf Amber

Amber ist der Ehrliche. Weiß darauf fällt durch, und die Lösung ist nicht ein dunkleres Amber: Setze das Label in Bark und lass die Farbe exakt, wie sie ist.

Das ist die ganze Aufgabe eines Akzents: Er muss die Worte überleben, die du darauf setzt. Amber zeigt, dass die Lösung selten eine andere Farbe ist. Ändere das Label, behalte die Marke.

Die Mitteltöne-Todeszone

Manche Akzente sitzen in der Mitte der Helligkeitsskala: zu hell für weißen Text, zu dunkel für dunklen Text. Zwei dieser vier entkommen in entgegengesetzte Richtungen, zwei stecken fest.

French Winery

#9A0A2C

French Winery

Speichern

Weiß auf French Winery: besteht

Speichern

Midnight Express #1D2433 auf French Winery: fällt durch

#F4EEE4

Magnolia Petal

Dunkel genug, dass weißer Text funktioniert. French Winery verlässt die Todeszone, indem es dunkler wird.

Wild Forest

#009041

Wild Forest

Speichern

Weiß auf Wild Forest: fällt durch

Speichern

Nightwalker #2B1A35 auf Wild Forest: fällt durch

#FBEFEE

Vintage Porcelain

Ein frisches Grün, das genau in der Mitte sitzt. Weiß fällt darauf durch, Dunkel auch. Einen Ton dunkler besteht Weiß, also schiebe das Grün zurecht, bevor du einen einzigen Button gestaltest.

Glowing Lantern

#FFBB40

Glowing Lantern

Speichern

Weiß auf Glowing Lantern: fällt durch

Speichern

Aztec #153023 auf Glowing Lantern: besteht

#F1F5F9

Silent Snowfall

Hell genug, dass dunkler Text funktioniert. Glowing Lantern verlässt die Todeszone in die andere Richtung, indem es heller wird, also ist sein Label Aztec, niemals Weiß.

Pink Orchid

#C157AD

Pink Orchid

Speichern

Weiß auf Pink Orchid: fällt durch

Speichern

Royal Neptune #0F2E30 auf Pink Orchid: fällt durch

#EEF4F1

Snowflake

Ein mitteltoniges Pink mit demselben Problem wie Wild Forest. Einen Ton dunkler besteht Weiß.

Große Schrift hat eine niedrigere Hürde als Kleingedrucktes, deshalb kann eine große Überschrift auf diesen Farben gut aussehen, während das Button-Label durchfällt. Prüfe den kleinsten Text, den du auf den Akzent setzt. Landet dein Markenakzent in der Mitte, schiebe ihn zurecht, bevor du das Button-Set baust.

Ein Button ist kein Badge

Ein Badge ist meist der Akzent mit etwa 15 % als Hintergrund und dem vollen Akzent als Text. Dieser Tint hellt den Hintergrund auf, also verliert der Text darauf Kontrast. Ein Akzent kann ein weißes Button-Label tragen und trotzdem in seinem eigenen Badge durchfallen. Die dritte Kachel ist der Akzent mit 15 % über der Fläche.

Peacock Pride

#006262

Peacock Pride

Speichern

Weißes Button-Label: besteht

Neu

Peacock Pride auf Tint #D5E1D2: besteht

Neu

Wood Bark #2A2320 auf Tint: besteht

Ein tiefes Teal-Grün, das beide Aufgaben auf Cosmic Latte #FBF7E6 übersteht.

Furnace

#D23D20

Furnace

Speichern

Weißes Button-Label: besteht

Neu

Furnace auf Tint #EAD9D1: fällt durch

Neu

Elite Teal #13302A auf Tint: besteht

Ein kräftiger Rotorange-Button, der als Tag schwach wird. Auf White Glove #EEF4F0 setzt du den Tag-Text in die Tinte, und das Badge liest sich gut.

Purple Heart

#652A97

Purple Heart

Speichern

Weißes Button-Label: besteht

Neu

Purple Heart auf Tint #E6D3DF: besteht

Neu

Black Velvet #1B2838 auf Tint: besteht

Dunkel genug, dass der Tint dahinter, auf Vanilla Blush #FDF1EC, keinen Unterschied macht.

French Blue

#0075C9

French Blue

Speichern

Weißes Button-Label: besteht

Neu

French Blue auf Tint #D9E3E3: fällt durch

Neu

Nightly Voyager #2A1630 auf Tint: besteht

Dieselbe Geschichte wie bei Furnace: ein Button, der funktioniert, und ein Badge, das es nicht tut. Auf Powdered #FFF6E8 rettet die Tinte den Badge-Text.

Ist dein Akzent ein Mittelton, setze Badge- und Tag-Text in deiner Tinte. Furnace-Tags und French-Blue-Badges werden beide leicht lesbar, sobald der Text auf die Tinte wechselt.

Der Helle ist nicht der Button

Ein Button muss sich deutlich von der Seite abheben, auf der er sitzt. Ein blasser, heller Akzent auf einer cremefarbenen Seite tut das nicht, obwohl er die schönste Farbe der Palette ist.

Also tausche die Aufgaben. Die dunkle Farbe wird zum Button, und die helle wird zu Tag, Badge und ausgewähltem Zustand. Zwei dieser Paletten machen das, und die anderen beiden haben einen Akzent, der dunkel genug zum Tippen ist.

Butterscotch

Speichern

Storm Graphite #434343 Button, Butter Canvas #FAEBCD Label: besteht

Neu

Butterscotch Gold #F7C873 Tag: besteht

Speichern

Butterscotch Gold auf der Seite: kaum sichtbar

Butterscotch Gold sieht herrlich aus und verschwindet als Button auf Butter Canvas. Tausche die Aufgaben: Storm Graphite wird getippt, das Gold wird zum Tag.

Ocean Breeze

Speichern

Midnight Navy #0C2C55 Button, Vanilla Linen #EDEDCE Label: besteht

Neu

Ocean Breeze #629FAD Tag: besteht

Speichern

Ocean Breeze auf der Seite: kaum sichtbar

Ein sanftes Türkisblau auf blassem Leinen. Dieselbe Lösung: Midnight Navy ist der Button, Ocean Breeze ist Tag und ausgewählter Zustand.

Silent Grove

Speichern

Silent Grove #215E61 Button: besteht

Behalten

Link auf Morning Paper #F5FBE6: besteht

#233D4D

Blue Monolith #233D4D

Dieser kann alles. Ein dunkles Teal ist auf Morning Paper sowohl Button als auch Link, mit einem weißen Label, das sich mühelos liest.

Wild Berry

Speichern

Wild Berry #CF4173 Button: besteht

Behalten

Wild-Berry-Link auf Peach Cashmere #F6D8BD: fällt durch

Behalten

Deep Berry Plum #5D3140 Link: besteht

Wild Berry schafft es als Button mit weißem Label nur knapp. Als Text auf Peach Cashmere reicht es nicht, also kommen seine Links in Deep Berry Plum.

Ein Link besteht aus Worten, also muss er die Text-Hürde nehmen, nicht nur die Button-Hürde. Besteht der Akzent als Button nur knapp, setze Links in die Tinte.

Alle sechzehn Akzente in einer Tabelle

Die Zahlen, für die Person, die die Wahl verteidigt

Jede Paarung oben wurde mit der WCAG-2-Kontrastformel gemessen. Das ist die einzige Tabelle im Paper mit Verhältniswerten.

So testest du deinen eigenen Akzent

1. Probiere zuerst Weiß. Besteht Weiß auf dem Akzent, wie bei Cobalt #2F4BD6, ist dein Label geklärt.
2. Probiere als Nächstes deine dunkelste Tinte. Fällt Weiß durch und die Tinte besteht, setze jedes Label in die Tinte, wie bei Amber und Glowing Lantern.
3. Fallen beide durch, verschiebe den Akzent. Einen Ton dunkler oder heller bringt dich aus der Mitte.
4. Teste den Tag separat. Erzeuge den 15-%-Tint und prüfe den Akzent als Text darauf. Fällt er durch, setze Tags in die Tinte.
5. Prüfe den Button gegen die Seite. Ein blasser Akzent ist ein Tag, kein Button. Unsere Papers zu barrierefreiem Farbkontrast und UI-Farbfehlern behandeln die Schwellenwerte.

Hol dir die Dateien für jedes Set

Jedes Set ist ein kostenloses Farbset auf Forge, mit Tap-to-copy-Codes, Swatch-Dateien für Figma und Adobe (ASE), CSS-Variablen und Design Tokens.

Kostenloses Farbset

Tinte, Fläche, eine Sache zum Tippen: Teal, Cobalt, Rose, Amber

Jeder Hex-Code, plus ASE-Swatches, CSS-Variablen und Design Tokens.

Set öffnen

Kostenloses Farbset

Die Todeszone: French Winery, Wild Forest, Glowing Lantern, Pink Orchid

Jeder Hex-Code, plus ASE-Swatches, CSS-Variablen und Design Tokens.

Set öffnen

Kostenloses Farbset

Ein Button ist kein Badge: Peacock Pride, Furnace, Purple Heart, French Blue

Jeder Hex-Code, plus ASE-Swatches, CSS-Variablen und Design Tokens.

Set öffnen

Kostenloses Farbset

Der Helle ist nicht der Button: Butterscotch, Ocean Breeze, Silent Grove, Wild Berry

Jeder Hex-Code, plus ASE-Swatches, CSS-Variablen und Design Tokens.

Set öffnen

FAQ

Welche Textfarbe gehört auf einen Button in Akzentfarbe?

Weiß, wenn der Akzent dunkel genug ist, dunkle Tinte, wenn er hell ist. Teal #0E7C6B verträgt Weiß. Amber #C88A16 verträgt Bark #2C2415. Funktioniert keins von beiden, liegt der Akzent in der Mitte und muss einen Ton wandern.

Warum fällt weißer Text auf manchen farbigen Buttons durch?

Weil der Button zu hell ist. Amber, Glowing Lantern #FFBB40 und Butterscotch Gold #F7C873 sind hell, also ist weißer Text darauf blass. Mitteltöne wie Wild Forest #009041 fallen sowohl mit weißem als auch mit dunklem Text durch.

Wie wähle ich eine Akzentfarbe für eine UI-Palette?

Wähle zuerst das Label. Entscheide, ob der Akzent weißen oder dunklen Text tragen soll, und wähle dann eine Farbe, die klar auf einer Seite der Mitte liegt. Prüfe sie als Button, als Badge-Text und gegen die Seite.

Warum sieht meine Akzentfarbe als Button gut aus, aber als Badge schlecht?

Ein Badge setzt den Akzent als Text auf einen hellen Tint seiner selbst, was den Kontrast senkt. Furnace #D23D20 und French Blue #0075C9 tragen ein weißes Button-Label mühelos und fallen als Badge-Text durch. Setze Badge-Text in deine Tinte.

Kann eine helle Akzentfarbe ein Button sein?

Selten. Sie muss sich von der Seite dahinter abheben, und ein blasser Akzent auf einer cremefarbenen Seite tut das kaum. Mache eine dunkle Farbe zum Button und nutze den blassen Akzent als Tag oder ausgewählten Zustand.

Quellen

• Farbnamen und Hex-Codes stammen aus den UX-Brainy-Farbsets auf Forge, Vol. 02, 06, 07 und 11. Der Kontrast wurde mit der WCAG-2-Formel gegen die Fläche berechnet, auf der jede Farbe sitzt.
• Die Kontrastschwellen für Text und für Formen folgen W3C WCAG 2.2: Contrast (Minimum) und Non-text Contrast.
• Der Tint-Hex in jeder Badge-Kachel ist der Akzent mit 15 % über der Fläche, abgeleitet aus der Palette.
• Zuerst veröffentlicht als vier Karussells auf UX Brainy: Dein Akzent entscheidet, welche Farbe das Label darauf haben muss, Die Todeszone, Ein Button ist kein Badge und Der Helle ist nicht der Button.