Farben im Interface: Die Grundlagen für deine erste Farbpalette

Ein kleiner Hofladen will Gemüsekisten künftig online verkaufen. Zwei Leute bauen den Shop: eine Person gestaltet, eine entwickelt. Das Logo ist orange, also wird erst einmal alles orange. Die Buttons, die Überschriften, die Links, die Preise, die Hinweisbox zum Liefertermin. Als dann die erste Fehlermeldung im Bestellformular auftaucht, ist sie rot und steht direkt neben einem orangefarbenen Button. Auf dem Smartphone in der Sonne sieht beides fast gleich aus. Und der weiße Text auf dem orangen Button „In den Warenkorb“ ist schwerer zu lesen, als allen lieb ist.

Das ist kein Geschmacksproblem. Es fehlt eine Farbpalette, in der jede Farbe eine klare Aufgabe hat. Genau darum geht es in diesem Artikel: wie du ohne Farbtheorie und ohne Farbkreis eine erste Palette für ein Interface aufbaust, die gut aussieht, verständlich ist und genug Kontrast hat. Das Beispiel des Hofladens begleitet dich durch alle Schritte. Alle Farbwerte und Kontrastwerte im Text sind Beispiele, die du direkt nachrechnen kannst.

Was eine Farbpalette im Interface eigentlich ist

Eine Farbpalette ist eine festgelegte Auswahl von Farben, mit der ein Produkt gestaltet wird. Im Interface geht es dabei weniger um Stimmung als um Funktion. Jede Farbe übernimmt eine Rolle: Sie zeigt, wo man klicken kann, was gerade ausgewählt ist, was schiefgelaufen ist oder welcher Text wichtig ist.

Große Design Systems denken Farben deshalb in Rollen statt in Farbtönen. Material Design von Google unterscheidet zum Beispiel unter anderem eine Primärfarbe (primary), eine Sekundär- und eine Tertiärfarbe, eine Fehlerfarbe (error) und Flächenfarben (surface). Zu jeder dieser Rollen gibt es eine passende „On“-Farbe für Text und Icons, die darauf liegen. Die Flutter-Dokumentation beschreibt die Primärfarbe als die Farbe, die am häufigsten auf den Screens und in den Komponenten einer App vorkommt, und die „On“-Farbe als Farbe, die auf der Primärfarbe gut lesbar ist.

So viele Rollen brauchst du für den Anfang nicht. Für eine erste Palette reichen vier Gruppen:

• Neutraltöne: Weiß, Grau und ein sehr dunkler Ton für Hintergründe, Flächen, Rahmen und Text.
• Primärfarbe: die Farbe für die wichtigste Aktion, für Links und für aktive Zustände.
• Akzentfarbe: optional, für seltene Hervorhebungen, die nicht mit der Primärfarbe konkurrieren sollen.
• Statusfarben: Fehler, Erfolg, Warnung und Information.

Die Reihenfolge in dieser Liste ist auch die Reihenfolge, in der du die Palette am besten aufbaust. Das klingt erst einmal überraschend, weil die meisten Teams bei der Markenfarbe anfangen. Der Grund wird im ersten Schritt klar.

Bevor es losgeht: Was ist ein Kontrastverhältnis?

Ein Begriff zieht sich durch den ganzen Artikel, deshalb kommt er vorweg. Das Kontrastverhältnis beschreibt, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden. Es wird als Verhältnis angegeben und reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto leichter lässt sich Text auf einem Hintergrund lesen.

Welche Werte genug sind, regeln die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte. Für die übliche Stufe AA gelten drei Grenzwerte, die du dir merken solltest:

• 4,5:1 für normalen Text.
• 3:1 für großen Text. Groß heißt laut WCAG mindestens 18 Punkt (etwa 24 Pixel) oder mindestens 14 Punkt fett (etwa 18,5 Pixel).
• 3:1 für Bedienelemente und wichtige Grafiken, zum Beispiel den Rahmen eines Eingabefelds, ein Icon ohne Beschriftung oder die Markierung des aktiven Tabs.

Zwei Details sind für die Praxis wichtig. Erstens wird nicht gerundet: Ein Wert von 4,49:1 erfüllt die Anforderung von 4,5:1 nicht. Zweitens sind deaktivierte Elemente ausgenommen, etwa ein Button, der erst aktiv wird, wenn ein Formular ausgefüllt ist. Ebenfalls ausgenommen sind Logos und rein dekorative Elemente.

Du musst diese Werte nicht von Hand ausrechnen. Werkzeuge wie der WebAIM Contrast Checker zeigen dir nach Eingabe von zwei Farbwerten sofort das Verhältnis an und sagen dir, welche Stufe erreicht ist.

Schritt 1: Mit den Neutraltönen anfangen

Schau dir einen beliebigen Screen in einer App an, die du täglich nutzt, und schätze, wie viel davon wirklich farbig ist. Meist sind es nur wenige Prozent der Fläche: ein Button hier, ein Icon dort. Der Rest besteht aus Weiß, hellen Grautönen für Flächen, mittleren Grautönen für Rahmen und dunklen Tönen für Text. Diese Neutraltöne tragen das Interface. Sind sie unklar, hilft auch die schönste Markenfarbe nicht.

Für den Anfang brauchst du fünf bis sieben Abstufungen. Der Hofladen legt diese fest:

• Hintergrund: Weiß (#FFFFFF) für die Seite.
• Fläche: ein sehr helles, leicht warmes Grau (#FAFAF9) für Karten und abgesetzte Bereiche.
• Trennlinie: helles Grau (#E7E5E4) für Linien zwischen Listeneinträgen.
• Rahmen für Bedienelemente: mittleres Grau (#78716C) für Eingabefelder und Checkboxen.
• Sekundärer Text: dunkleres Grau (#57534E) für Hinweise, Datumsangaben und Beschriftungen.
• Haupttext: fast Schwarz (#1C1917) für Überschriften und Fließtext.

Warum zwei verschiedene Grautöne für Linien? Weil sie unterschiedliche Aufgaben haben. Eine Trennlinie zwischen zwei Produkten ist Dekoration. Sie darf zart sein. Der Rahmen eines Eingabefelds dagegen zeigt, wo man etwas eintippen kann. Für ihn gilt die Grenze von 3:1. Das helle Grau #E7E5E4 kommt auf Weiß nur auf etwa 1,3:1. Als Rahmen für ein Eingabefeld wäre es zu schwach. Das mittlere Grau #78716C erreicht auf Weiß etwa 4,8:1 und ist damit auf der sicheren Seite.

Beim sekundären Text passiert in vielen Projekten derselbe Fehler: Er wird so hell, dass er elegant wirkt, aber kaum lesbar ist. Ein Grau wie #A8A29E sieht auf Weiß angenehm zurückhaltend aus, kommt aber nur auf etwa 2,5:1. Für Text ist das zu wenig. Das gewählte #57534E liegt bei etwa 7,6:1 und wirkt trotzdem deutlich ruhiger als der Haupttext.

Noch ein Tipp zur Auswahl: Reine Grautöne wirken neben einer kräftigen Markenfarbe schnell kühl. Viele Teams geben ihren Neutraltönen deshalb einen Hauch der Markenfarbe mit, also ein leicht warmes Grau bei einer warmen Marke oder ein leicht bläuliches bei einer kühlen. Der Hofladen hat sich für warme Grautöne entschieden, weil sie besser zum Orange passen.

Schritt 2: Die Primärfarbe festlegen

Die Primärfarbe ist die Farbe, mit der dein Interface sagt: Hier passiert etwas. Sie markiert die wichtigste Aktion auf einem Screen, Links und aktive Zustände wie den ausgewählten Menüpunkt. Meist leitet sie sich aus der Markenfarbe ab, und genau da beginnt beim Hofladen das Problem.

Die Markenfarbe ist nicht automatisch die Interface-Farbe

Das Orange aus dem Logo hat den Wert #E8711A. Auf dem Logo funktioniert es gut. Als Hintergrund eines Buttons mit weißer Schrift kommt es aber nur auf etwa 3,1:1. Für einen Button-Text in normaler Größe reicht das nicht, denn dafür braucht es 4,5:1. Das Team hat drei Möglichkeiten:

• Dunklere Variante der Markenfarbe: Ein tieferes Orange wie #C2410C erreicht mit weißer Schrift etwa 5,2:1. Es wirkt etwas erdiger, ist aber klar als dieselbe Farbfamilie erkennbar.
• Dunkle Schrift auf der Markenfarbe: Fast schwarzer Text (#1C1917) auf dem Logo-Orange kommt auf etwa 5,7:1. Das funktioniert technisch, verändert aber den Charakter der Buttons deutlich.
• Nur großer Text: Weißer Text auf dem Logo-Orange erfüllt die 3:1 für großen Text. Für kleine Buttons, Links und Formulare bleibt das Problem aber bestehen.

Der Hofladen entscheidet sich für die erste Variante. Das Logo bleibt, wie es ist. Im Interface wird #C2410C zur Primärfarbe.

Vorher: Button „In den Warenkorb“ mit weißer Schrift auf #E8711A, Kontrast etwa 3,1:1. In der Sonne oder bei schwacher Displayhelligkeit verschwimmt die Schrift.

Nachher: Derselbe Button mit weißer Schrift auf #C2410C, Kontrast etwa 5,2:1. Die Marke bleibt erkennbar, der Text ist auch unter schlechten Bedingungen lesbar.

Eine Farbe, mehrere Abstufungen

Eine einzige Primärfarbe reicht in der Praxis selten. Du brauchst meist eine helle Variante für Hintergründe, zum Beispiel für einen ausgewählten Listeneintrag, und eine etwas dunklere für den Hover-Zustand eines Buttons, also das Aussehen, wenn der Mauszeiger darüber liegt.

Große Farbsysteme arbeiten mit vielen Abstufungen. Die Standardpalette von Tailwind CSS hat für jede Farbe elf Stufen von 50 (sehr hell) bis 950 (sehr dunkel). Radix Colors nutzt zwölf Stufen und beschreibt für jede einen Einsatzzweck: die hellsten für Hintergründe, mittlere für Rahmen, die kräftigste für gefüllte Flächen wie Buttons und die dunkelsten für Text. Diese Systeme sind gute Vorlagen, aber du musst nicht mit zwölf Stufen starten.

Der Hofladen kommt mit vier Stufen seines Orange aus: ein sehr helles Orange (#FFF7ED) für Hinweisflächen und ausgewählte Elemente, das Logo-Orange (#E8711A) für Illustrationen und dekorative Akzente, die Primärfarbe #C2410C für Buttons und Links und ein dunkles Orange (#9A3412) für den Hover-Zustand. Weiß auf dem dunklen Orange erreicht etwa 7,3:1, der Zustand bleibt also gut lesbar.

Wofür die Primärfarbe nicht da ist

Die häufigste Versuchung: Die Primärfarbe landet überall, weil sie so schön nach Marke aussieht. Überschriften werden orange, Icons werden orange, Trennlinien werden orange. Das Ergebnis ist, dass niemand mehr erkennt, was klickbar ist und was nicht.

Eine einfache Regel hilft: Die Primärfarbe gehört dem, was man bedienen kann, und dem, was gerade aktiv ist. Überschriften bleiben im dunklen Haupttextton. Wenn auf einem Screen drei Elemente in der Primärfarbe leuchten, sollte das daran liegen, dass es drei wichtige Aktionen gibt, und nicht daran, dass jemand Farbe ergänzen wollte.

Schritt 3: Eine Akzentfarbe, wenn du sie brauchst

Eine Akzentfarbe ist eine zweite, deutlich andere Farbe, die gezielt für seltene Hervorhebungen eingesetzt wird. Typische Beispiele sind ein Badge „Neu“, eine Markierung für ein Sonderangebot oder ein Bereich, der sich vom Rest abheben soll. In Material Design übernimmt diese Aufgabe die Tertiärfarbe, die laut Dokumentation als kontrastierender Akzent dient.

Für eine erste Palette ist die Akzentfarbe optional, und oft ist es klüger, ohne sie zu starten. Jede zusätzliche Farbe ist eine weitere Entscheidung, die das Team immer wieder treffen muss: Ist das hier ein Fall für die Akzentfarbe oder für die Primärfarbe? Wenn die Antwort nicht eindeutig ist, entsteht genau das Durcheinander, das die Palette verhindern soll.

Ein guter Test: Kannst du in einem Satz sagen, wofür die Akzentfarbe da ist? Beim Hofladen lautet der Satz: „Die Akzentfarbe markiert ausschließlich saisonale Produkte.“ Dafür wählt das Team ein gedecktes Grün (#15803D), das sich klar vom Orange unterscheidet. Eine Akzentfarbe sollte nie für die wichtigste Aktion auf einem Screen genutzt werden. Sonst konkurriert sie mit der Primärfarbe um die Aufmerksamkeit.

Moment, Grün? Genau hier kommt der nächste Schritt ins Spiel, denn Grün ist auch die übliche Farbe für Erfolgsmeldungen.

Schritt 4: Statusfarben, die nicht verwechselt werden

Statusfarben zeigen den Zustand eines Systems: Etwas hat geklappt, etwas ist schiefgelaufen, etwas verdient Aufmerksamkeit. Die gängige Zuordnung ist Rot für Fehler, Grün für Erfolg, Gelb oder Orange für Warnungen und Blau für neutrale Informationen. Diese Konvention solltest du nicht ohne Not brechen, denn Menschen bringen sie aus unzähligen anderen Produkten mit.

Konflikte mit der eigenen Palette auflösen

Beim Hofladen gibt es gleich zwei Konflikte. Die Primärfarbe ist ein kräftiges Orange, das einem Fehlerrot recht nahekommt. Und die Warnfarbe wäre klassisch ebenfalls Orange. Wenn Warnungen in derselben Farbe erscheinen wie der Button „Jetzt bestellen“, wird es verwirrend.

Die Lösung im Beispiel:

• Fehler: ein tiefes Rot (#B91C1C), das deutlich dunkler und kühler ist als das Orange. Mit weißer Schrift erreicht es etwa 6,5:1.
• Warnung: Gelb statt Orange. Für Flächen ein kräftiges Gelb (#EAB308) mit dunkler Schrift (etwa 9,1:1). Weiße Schrift auf diesem Gelb käme nur auf etwa 1,9:1 und ist damit ausgeschlossen. Für gelben Text auf Weiß nutzt das Team ein dunkles Ocker (#A16207), das etwa 4,9:1 erreicht.
• Erfolg: dasselbe Grün wie die Akzentfarbe (#15803D), etwa 5,0:1 mit weißer Schrift. Weil Erfolgsmeldungen immer mit Icon und Text erscheinen und saisonale Produkte immer mit dem Wort „Saison“, ist die Doppelrolle vertretbar. Wer das vermeiden will, wählt für den Akzent eine andere Farbe.
• Information: ein klares Blau (#1D4ED8), etwa 6,7:1 mit weißer Schrift.

Achte bei Statusfarben besonders auf die Grüntöne. Ein typisches „Erfolgsgrün“ wie #16A34A wirkt frisch, erreicht mit weißer Schrift aber nur etwa 3,3:1. Für Text ist das zu wenig. Ein Schritt dunkler, und das Problem ist gelöst.

Für Hinweisboxen braucht jede Statusfarbe außerdem eine sehr helle Variante als Hintergrund. Die Fehlermeldung des Hofladens steht zum Beispiel in dunkelrotem Text (#B91C1C) auf zartem Rosa (#FEF2F2) und kommt so auf etwa 5,9:1.

Farbe darf nie die einzige Information sein

Eine Regel ist bei Statusfarben wichtiger als jeder Farbwert: Die Information muss auch ohne Farbe ankommen. Die WCAG halten das im Erfolgskriterium 1.4.1 fest. Farbe darf nicht das einzige visuelle Mittel sein, um eine Information zu vermitteln, eine Aktion anzuzeigen oder ein Element zu unterscheiden.

Der Grund ist ganz praktisch. Laut der Organisation Colour Blind Awareness hat etwa einer von zwölf Männern und eine von 200 Frauen eine Farbsehschwäche. Die häufigste Form ist die Rot-Grün-Schwäche, bei der sich Rot- und Grüntöne schwer unterscheiden lassen. Eine rote Fehlermeldung und eine grüne Erfolgsmeldung, die sich nur durch die Farbe unterscheiden, sind für diese Menschen kaum auseinanderzuhalten. Dazu kommen Situationen, die alle betreffen: grelles Sonnenlicht, ein schlechter Monitor, ein Ausdruck in Schwarz-Weiß.

In der Praxis bedeutet das: Eine Fehlermeldung bekommt ein Icon und einen Text, der den Fehler beschreibt. Ein Pflichtfeld wird nicht nur rot umrandet, sondern bekommt eine Meldung darunter. Ein Link im Fließtext ist unterstrichen. Wenn Links nur durch ihre Farbe auffallen sollen, verlangen die WCAG-Techniken einen Kontrast von mindestens 3:1 zwischen Link und umgebendem Text. Das Orange #C2410C kommt gegenüber dem Haupttext #1C1917 auf etwa 3,4:1. Der Hofladen unterstreicht seine Links trotzdem, weil das für alle am schnellsten verständlich ist.

Mehr zu den verschiedenen Formen der Farbsehschwäche und weiteren Richtlinien findest du im Artikel Farbenblindheit im UX-Design.

Schritt 5: Die Palette prüfen, bevor sie ins Produkt geht

Eine Palette auf dem Papier ist schnell gemacht. Ob sie funktioniert, zeigt sich erst, wenn du alle Kombinationen durchgehst, die im Produkt tatsächlich vorkommen. Dafür gibt es drei einfache Prüfungen.

Die Kontrasttabelle

Schreib alle Textfarben untereinander und alle Hintergrundfarben nebeneinander. In jedes Feld trägst du das Kontrastverhältnis ein. Beim Hofladen sind das sechs Textfarben und fünf Hintergründe, also 30 Felder. Viele davon kommen im Produkt gar nicht vor, etwa roter Text auf orangem Grund. Die streichst du. Bei allen anderen markierst du, ob sie 4,5:1 für Text oder 3:1 für große Schrift und Bedienelemente erreichen.

Diese Tabelle ist mehr als eine einmalige Prüfung. Sie wird zur Spielregel: Was darin nicht als bestanden markiert ist, kommt nicht ins Produkt. Für die Prüfung direkt in Figma eignen sich Plugins wie Stark, das Kontraste prüft und auch Farbsehschwächen simulieren kann.

Der Graustufentest

Mach einen Screenshot eines typischen Screens und stell ihn auf Graustufen. Erkennst du immer noch, was der wichtigste Button ist? Siehst du, wo ein Fehler aufgetreten ist? Wenn die Hierarchie in Graustufen zusammenbricht, verlässt sich das Design zu sehr auf Farbe.

Die Simulation

Chrome bringt in den Entwicklertools eine Simulation verschiedener Sehbeeinträchtigungen mit. Im Bereich „Rendering“ findest du die Option „Emulate vision deficiencies“. Dort kannst du unter anderem Protanopie (kein Rot), Deuteranopie (kein Grün), Tritanopie (kein Blau) und Achromatopsie (keine Farbe) einstellen. Ein Durchlauf durch den Bestellprozess mit jeder dieser Einstellungen dauert nur wenige Minuten und zeigt schnell, wo sich Statusfarben zu ähnlich sind.

Die fertige Palette des Beispielteams

Nach diesen fünf Schritten hat der Hofladen eine Palette, die auf eine Seite passt:

• Neutraltöne: #FFFFFF (Hintergrund), #FAFAF9 (Fläche), #E7E5E4 (Trennlinie), #78716C (Rahmen von Bedienelementen), #57534E (sekundärer Text), #1C1917 (Haupttext).
• Primärfarbe: #FFF7ED (hell), #E8711A (Marke, nur dekorativ), #C2410C (Buttons und Links), #9A3412 (Hover).
• Akzent: #15803D, nur für saisonale Produkte.
• Status: Fehler #B91C1C, Warnung #EAB308 mit dunkler Schrift und #A16207 für Text, Erfolg #15803D, Information #1D4ED8, jeweils mit einer sehr hellen Variante für Hinweisboxen.

Das sind rund 20 Farbwerte. Klingt nach viel, ist aber überschaubar, weil jeder Wert genau eine Aufgabe hat. Vorher waren im Shop über 30 verschiedene Farbwerte im Einsatz, von denen niemand sagen konnte, wofür sie eigentlich gedacht waren.

Typische Fehler bei der ersten Palette

Ein paar Fehler tauchen in fast jedem ersten Farbkonzept auf. Wenn du sie kennst, sparst du dir eine Überarbeitung.

Zu viele Farben auf einmal

Fünf Markenfarben, drei Akzentfarben und für jede Kategorie eine eigene Farbe: Das wirkt im Moodboard lebendig, im Interface aber unruhig. Starte mit einer Primärfarbe und den Statusfarben. Weitere Farben kommen hinzu, wenn es einen konkreten Anlass gibt.

Die Markenfarbe ungeprüft übernehmen

Markenfarben werden oft für Logos, Plakate und Social Media ausgewählt, nicht für kleine Schrift auf Buttons. Prüfe sie immer mit Text in den Größen, die im Interface vorkommen. Wenn es nicht reicht, ist eine dunklere Variante fürs Interface kein Verrat an der Marke.

Grau für Text zu hell

Hellgrauer Text sieht in Entwürfen elegant aus, besonders auf großen Monitoren mit hoher Helligkeit. Auf einem Smartphone im Freien wird er unlesbar. Prüfe jeden Grauton für Text gegen die 4,5:1.

Status nur über Farbe

Ein rot umrandetes Feld ohne Fehlertext ist für viele Menschen unsichtbar. Kombiniere Statusfarben immer mit Icon und Text.

Dunkelmodus durch Umkehren

Wer später einen Dark Mode, also eine dunkle Darstellung des Interface, plant, kann nicht einfach alle Farben umkehren. Die Primärfarbe braucht auf dunklem Grund meist eine hellere Variante, und jede Kombination muss erneut geprüft werden. Das ist ein eigenes Projekt, für das eine saubere Palette mit klaren Rollen die beste Grundlage ist.

Von der Palette zum System

Sobald die Palette steht, lohnt es sich, den Farben Namen nach ihrer Rolle zu geben, zum Beispiel „Text Standard“, „Fläche“, „Aktion Primär“ oder „Fehler“. Wer später eine Farbe ändert, ändert sie dann an einer Stelle, und alle Screens ziehen nach. In Design Systems heißen solche benannten Werte Design Tokens. Wie du sie in Figma mit Variables anlegst, inklusive Dark Mode, zeigt der Artikel Design Tokens in Figma. Warum sich ein kleines Design System auch für kleine Teams lohnt, erklärt Design Systems für kleine Teams.

Fazit

Eine gute erste Farbpalette entsteht nicht durch Farbtheorie, sondern durch klare Aufgaben. Neutraltöne tragen das Interface, die Primärfarbe zeigt, was man bedienen kann, eine optionale Akzentfarbe hebt Seltenes hervor, und Statusfarben melden, was passiert ist. Jede Farbe wird gegen ihre Hintergründe geprüft, und keine Information hängt allein an einer Farbe.

Der Hofladen hat am Ende kein spektakuläres Farbkonzept, aber eines, das funktioniert. Der Button „In den Warenkorb“ ist auch in der Sonne lesbar, Fehler und Aktionen lassen sich nicht mehr verwechseln, und neue Screens lassen sich gestalten, ohne über jede Farbe neu zu diskutieren. Wenn du mit deiner eigenen Palette startest, nimm dir zuerst die Neutraltöne vor. Der Rest ergibt sich leichter, als du denkst.

Checkliste

• Neutraltöne zuerst festlegen: Hintergrund, Fläche, Trennlinie, Rahmen, sekundärer Text, Haupttext.
• Rahmen von Eingabefeldern und Bedienelementen mit mindestens 3:1 zum Hintergrund.
• Jede Textfarbe mit mindestens 4,5:1, großer Text mit mindestens 3:1. Nicht runden.
• Markenfarbe mit weißer und dunkler Schrift prüfen, bei Bedarf eine dunklere Interface-Variante wählen.
• Primärfarbe nur für Aktionen, Links und aktive Zustände nutzen.
• Akzentfarbe nur, wenn sich ihr Zweck in einem Satz beschreiben lässt.
• Statusfarben für Fehler, Warnung, Erfolg und Information festlegen und auf Verwechslung mit der Primärfarbe prüfen.
• Status nie allein über Farbe zeigen: Icon und Text ergänzen, Links unterstreichen.
• Kontrasttabelle anlegen und als Spielregel nutzen.
• Graustufentest und Simulation von Farbsehschwächen durchführen.
• Farben nach Rolle benennen, damit sie später als Design Tokens weiterleben.

Quellen

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
• W3C: Understanding Success Criterion 1.4.11, Non-text Contrast
• W3C: Understanding Success Criterion 1.4.1, Use of Color
• W3C: Technique G183, Using a contrast ratio of 3:1 with surrounding text
• Colour Blind Awareness: About Colour Blindness
• National Eye Institute: Types of Color Vision Deficiency
• Material Design 3: Color roles
• Flutter API: ColorScheme class
• Tailwind CSS: Colors
• Radix Colors: Understanding the scale
• Chrome for Developers: Emulate vision deficiencies
• WebAIM: Contrast Checker