--- title: "UI Design Grundlagen: Farben" url: "https://b13.com/de/wissen/ui-design-grundlagen-farben" description: All things bright and beautiful… ein Farbschema sollte nicht nur auf dem Papier toll aussehen, sondern jedem helfen, sich auf einer gut gestalteten Website zurechtzufinden. Wie das geht, erfahren Sie hier. image: "https://b13.com/fileadmin/_processed_/5/c/csm_UI-Basics_Colors_191-1_786bd5aea6.png" date: 2020-07-07 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # UI Design Grundlagen: Farben [ UX/UI-Design ](https://b13.com/de/wissen/uxui-design) UI Design Grundlagen: Farben ============================== ![](https://b13.com/fileadmin/_processed_/d/5/csm_laura_8ba8f32968.jpg)Laura Heine 07. Juli 2020 [ RSS Feed ](https://b13.com/de/rss.xml) ![[Translate to Deutsch:] ](https://b13.com/fileadmin/_processed_/f/f/csm_UI-Basics_Colors_9744d191f7.webp "[Translate to Deutsch:] ") \[Translate to Deutsch:\] Farben bilden einen wichtigen Teil in jedem Corporate Design, oftmals wird bei der Auswahl der Unternehmensfarben aber hauptsächlich die Anwendung im Druckbereich bedacht. Farben, die auf dem Papier wunderbar aussehen, können jedoch bei der Darstellung auf Displays zu Problemen mit der Barrierefreiheit führen. Wir gestalten für unsere Projekte Farbpaletten, die auf Bildschirmen funktionieren und gleichzeitig zum Corporate Design passen. Unsere Kunden haben meistens schon ein tolles Corporate Design (CD), bevor wir mit der Umsetzung des digitalen Auftritts starten, daher bekommen wir in der Regel schon eine Palette an vordefinierten Farbwerten, die die Marke repräsentieren. Diese Farben sind allerdings oft für die Anwendung im Druckbereich gewählt worden. Während sie also auf dem Papier perfekt aussehen, können sie auf dem Bildschirm zu Problemen mit der Barrierefreiheit führen. Farben im digitalen Bereich müssen andere Anforderungen erfüllen, als im Druck. Außerdem brauchen wir für einen gesamten Webauftritt mit Hierarchien und verschiedenen Inhaltstypen meistens mehr Farbtöne, als ursprünglich definiert. Bevor wir also mit dem eigentlichen Design der Website für unsere Kunden beginnen, müssen wir die existierenden Farben analysieren. Wir müssen entscheiden, wie die Farben genutzt werden können, wo die Farbpalette erweitert werden muss und dabei immer die Farben auf Barrierefreiheit prüfen. Um das zu tun, teilen wir die Farben in drei Kategorien auf: - **Markenfarben:** Die Farben, die die Marke repräsentieren und sich durch den gesamten Webauftritt ziehen aber trotzdem so gewählt verwendet werden sollten, dass sie nicht an Bedeutung verlieren. - **UI-Farben:** Farbtöne, die genutzt werden um Strukturen und Hierarchien im Inhalt der Seite abbilden zu können. - **Feedback-Farben:** Farben mit denen Systembenachrichtigungen wie zum Beispiel Fehlermeldungen dargestellt werden. Unternehmensfarben und Barrierefreiheit unter einen Hut bringen ----------------------------------------------------------------- Die Farben eines Markenauftritts sind sind ein — vielleicht sogar das — Schlüsselelement in einem Corporate Design. Sie sollten deshalb auf jeden Fall mit Vorsicht behandelt und am besten nicht geändert werden. Das erste was wir daher beurteilen ist, wie wir die Unternehmensfarben einsetzen können. Generell benutzten wir sie gerne als Call-to-Actions, zum Beispiel Buttons und Textlinks. Auf diesem Weg ziehen sich Unternehmensfarben durch den gesamten Webauftritt und können so das Markenbild stärken. Um die Farben aber so nutzen zu können, müssen wir sichergehen, das sie barrierefrei sind. Das bedeutet wir überprüfen, ob die Farben als Textfarben verwendet werden können und der Text dabei lesbar bleibt. Es gibt sehr gute Tools, die einem diese Überprüfung abnehmen. Wir nutzen das [Stark Plugin für Adobe XD](https://www.getstark.co/) und den [tanaguru contrast finder](https://contrast-finder.tanaguru.com/) als Browser Tool. Nehmen wir nun einmal an, eine deiner Unternehmensfarben ist ein leicht abgetöntes Rot. Wir geben den Farbwert in eines dieser Tools ein und geben Weiß als Hintergrundfarbe an. Das Ergebnis wird in etwa so aussehen: ![Ergebnisse des Barrierefreiheitstests, die die Kontrastverhältnisse für normalen und großen Text zeigen. Normaler Text (16px) hat ein Kontrastverhältnis von 4,51:1, während großer Text (18px fett/24px) ein Kontrastverhältnis von 3,1:1 und 4,51:1 für](https://b13.com/fileadmin/_processed_/1/0/csm_Colors_1_e723cb94c6.webp) Was auf den ersten Blick etwas verwirrend aussieht, ist eigentlich ganz einfach: Die Farbkombination ist barrierefrei für großen und normalen Text, wenn unser Ziel der AA-Standard ist. Die Standards sind von W3C in den [Web Content Accessibility Guidelines](https://www.w3.org/TR/WAI-WEBCONTENT/#wc-priority-1) definiert. es gibt im Grunde drei Level: A, AA und AAA. ### Side Note A muss von einem Webprojekt erreicht werden, schließt aber immer noch viele Menschen aus. AA sollten immer unser Ziel sein, da dann einige der schwerwiegendsten Barrieren entfernt werden. AAA ist das höchste Ziel und macht die Website noch barrierefreier. Welchen Standard du erreichen solltest, hängt von der Zielgruppe und den Unternehmensvorgaben ab, AA ist aber immer ein guter Richtwert um ein breiteres Publikum anzusprechen aber auch um den [Forderungen von Google](https://web.dev/color-contrast/?utm_source=lighthouse&utm_medium=devtools) nachzukommen. Was nun also für unser Rot auf einem weißen Hintergrund gut aussieht, kann für dasselbe Rot auf einem dunklen Grau ganz anders aussehen. Wenn du auf deiner Website zwei verschiedene Hintergrundfarben verwenden willst, solltest du immer sicherstellen, dass deine Schriftfarben auf beiden Hintergrundfarben funktionieren. ![Text in zwei kontrastierenden Kästchen angezeigt: eines schwarz mit weißem Text, der sagt „Dies ist ein Barrierefreiheitstest“, und ein anderes rot mit demselben Text. Darunter wird eine Zusammenfassung der Kontrastverhältnisse für normalen und großen Text bereitgestellt.](https://b13.com/fileadmin/_processed_/8/6/csm_Colors_2_a457d3267e.webp) Wir sehen also, Rot auf Dunkelgrau hat nicht den nötigen Kontrast um barrierefrei zu sein, daher müssen wir die Farbe anpassen. Das ist der Grund, warum du auf unserer b13.com feststellen wirst, dass Textlinks auf weißem Hintergrund zwar rot sind, aber auf dunkelgrauem Hintergrund gelb. Wir konnten das Rot hier gegen eine andere Unternehmensfarben von uns austauschen, die besser funktioniert. Wenn du allerdings Anpassungen an deiner Unternehmensfarbe vornehmen willst, damit sie barrierefrei eingesetzt werden kann, solltest du das immer mit dem zuständigen Designteam absprechen. Während dem gesamten Designprozess sollten eingesetzte Textfarben immer gegen ihre Hintergrundfarben geprüft werden, dabei sollte man auch die Farben in Hover-Zuständen nicht vergessen. Passende UI-Farben zur Strukturierung von Inhalten aussuchen -------------------------------------------------------------- Um Inhalte auf der Website strukturiert darzustellen werden wir mit aller Wahrscheinlichkeit mehrere Farbtöne brauchen, um verschiedene Elemente und Bereiche abzugrenzen. In manchen Fällen liefert uns das CD schon einige Farbtöne, manchmal ist dort aber auch nur eine neutrale Farbe für Texte definiert. Meisten sind die UI-Farben verschiedene Grautöne, die eventuell mit der Markenfarbe oder einer Kontrastfarbe getönt sind. Unser Ziel ist es, genügend Farbtöne zu haben, um unterschiedliche Elemente darstellen zu können, aber die Farbpalette trotzdem so begrenzt zu halten, dass es nicht zu viele Farbtöne gibt, die für den Nutzer sowieso gleich aussehen würden. In der Regel wurde im CD schon ein dunkler neutraler Farbton zur Darstellung von Texten definiert, daher fangen wir mit diesem an. zusätzlich werden wir ein helleres Grau brauchen, dass immer noch als Textfarbe genutzt werden kann (hier kommt unsere Kontrastüberprüfung wieder zum Einsatz) um sekundären Text oder Rahmenlinien darzustellen. Als nächsten fügen wir ein weiteres, helleres Grau hinzu, um inaktive Elemente abzubilden und schließlich ein noch helleres Grau als Hintergrundfarbe. Für jeden Grauton testen wird, welche Textfarbe darauf verwendet werden kann. Am Ende haben wir eine Palette an Grautönen so ähnlich wie diese: ![Ein Kreisdiagramm, das verschiedene Grautöne und Schwarz zeigt, beschriftet mit den hexadezimalen Farbcode: #131313, #292929, #707070, #b5b5b5, #f0f0f0 und #ffffff.](https://b13.com/fileadmin/_processed_/0/1/csm_Colors_3_4c91da9533.webp) Im Laufe des Designprozesses kann sich diese Palette natürlich noch ändern, aber wir versuchen immer sie einfach und ausdrucksstark zu halten. Nicht zu vergessen: Die Feedback-Farben ----------------------------------------- Funktionale Farben zum Darstellen von Feedback werden im UI-Design oft etwas stiefmütterlich behandelt. Rot und Grün passen vielleicht einfach überhaupt nicht in das Farbschema aber mit einiger Wahrscheinlichkeit wird es einen Punkt geben, an dem Fehlerbenachrichtigungen oder anderes Feedback des Systems kommuniziert werden müssen. Als Designer können wir wenigstens dafür sorgen, dass die Feedback-Farben ein bisschen in das Farbschema passen und lesbar sind. Selbst wenn wir am Anfang noch keinen Verwendungszweck haben ist es besser, die Farben einmal definiert zu haben als später in der Umsetzung festzustellen, dass der Standard-Rotton #ff0000 für Fehlermeldungen verwendet wurde. Wir definieren immer ein Rot für Fehlermeldungen und wenn wir wirklich gründlich sind auch noch ein Grün für positives Feedback, Gelb für Warnungen und eine subtile Farbe für Benachrichtigungen. Wenn wir diese Schritte durchlaufen haben, haben wir ein tolles Farbschema aus den ursprünglichen Unternehmensfarben abgeleitet, das die Grundlage für unser UI-Design sein kann. Diese Farben müssen natürlich noch nicht final sein aber sie sind ein guter Start. Sie passen zum Markenauftritt, sind barrierefrei und unterstützen eine gute Website. Du brauchst Input für dein Farbkonzept oder planst einen Relaunch? -------------------------------------------------------------------- [ Let’s connect ](https://b13.com/de/kontakt) ### Geschrieben von: ![Lächelnde Frau mit schulterlangem blonden Haar, die eine Brille und einen blauen Sweatshirt trägt, steht in einer hellen, modernen Umgebung.](https://b13.com/fileadmin/_processed_/d/5/csm_laura_9b472d894c.webp) Laura ist auch im wahren Leben so, wie im Job: authentisch, effektiv und auf den Punkt. In der Zusammenarbeit mit unseren Kunden hört sie nie auf, Fragen zu stellen. Sie geht Bedürfnissen auf den Grund und setzt sie in benutzerfreundlichen Konzepten und Oberflächen um, die genau das tun was sie sollen. Das Tool auf das sie nicht verzichten kann: Adobe XD Laura Heine UX Design [ mehr von Laura Heine ](https://b13.com/de/team/laura-heine) Ähnliche Artikel ------------------ - ![Eine robotische Hand hält einen Pinsel und erzeugt einen lila Wirbel vor einem hellblauen Hintergrund mit kreisförmigen Mustern.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings 17. Juli 2026 | Laura Heine Laura Heine teilt, was sie beim Design Leadership Meetup über Verantwortung, Dokumentation und einen fairen Umgang mit KI im Team gelernt hat. [ weiterlesen: Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings ](https://b13.com/de/wissen/verantwortungsvoll-gestalten-im-ki-zeitalter-unsere-learnings) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Benutzeroberflächendesign mit einer dunklen Seitenleiste, die Navigationsoptionen bietet, und einem zentralen Inhaltsbereich mit Platzhaltertext.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage 12. Januar 2026 | Laura Heine b13 gestaltet das Backend von TYPO3 für Version 14 neu, damit es moderner wirkt, schneller läuft, den Benutzerkontext beibehält und eine erweiterbare Grundlage schafft, die sich… [ weiterlesen: Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage ](https://b13.com/de/wissen/gestaltung-des-backends-von-typo3-v14-unsere-vision-fuer-eine-moderne-erweiterbare-grundlage) - ![Benutzerschnittstellenelemente wie Textfelder, Kontrollkästchen und Schaltflächen, verbunden durch Pfeile auf einem lila Hintergrund.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Wie man Webformulare richtig macht 18. August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ weiterlesen: Wie man Webformulare richtig macht ](https://b13.com/de/wissen/wie-man-webformulare-richtig-macht) - ![Eine lila Mappe ist zentral platziert und von roten und blauen rechteckigen Elementen umgeben, die durch Linien auf einem Gitterhintergrund verbunden sind.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Effektive Informationsarchitekturen entwerfen: Best Practices 30. Juli 2025 | David Steeb Tauche ein in unseren neuesten Artikel über die Welt der Informationsarchitektur und ihren entscheidenden Einfluss auf die User Experience. Erfahre zentrale Strategien und Best… [ weiterlesen: Effektive Informationsarchitekturen entwerfen: Best Practices ](https://b13.com/de/wissen/designing-an-effective-information-architecture-best-practices) - ![Zwei Roboterarme sind um eine Lupe positioniert und konzentrieren sich auf den Buchstaben "g" in einer stilisierten Schriftart. Der Hintergrund zeigt ein Gittermuster mit wiederholten "Ag"-Symbolen.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien 03. Juni 2025 | David Steeb Entdecke die Bedeutung von Richtlinien zur Schriftgröße im UI-Design, um zugängliche und visuell ansprechende Benutzeroberflächen zu schaffen. Erfahre die Best Practices für… [ weiterlesen: Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien ](https://b13.com/de/wissen/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![Ein Abschlusskappe ist zentral zwischen verschiedenen Elementen eines Flussdiagramms platziert, darunter Rechtecke und Kreise, vor einem Farbverlauf-Hintergrund. Das Design vermittelt Themen von Bildung und Entscheidungsprozessen.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21. Mai 2024 | Stefanie Kreuzer Ein optimaler Benutzerfluss ist entscheidend für erfolgreiche Websites. Erfahre, wie du mit Flowcharts schon früh im UX-Designprozess für Klarheit sorgen kannst. [ weiterlesen: Mastering Website Flowcharts ](https://b13.com/de/wissen/mastering-website-flowcharts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken 31. August 2023 | Stefanie Kreuzer Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur… [ weiterlesen: Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken ](https://b13.com/de/wissen/die-erfolgsmethode-wireframing) - ![Ein Weg führt durch stilisierte Wolken, flankiert von einer Lupe und Zahnrädern, mit Symbolen, die Texte und Dokumente im Hintergrund darstellen und Themen von Erkundung und Technologie andeuten.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design 12. April 2024 | Franzi Töpler Menschen mit Beeinträchtigungen stellen eine der größten Gruppen von Online-Nutzern dar, aber sie werden in der digitalen Welt oft übersehen. Die Verbesserung der Barrierefreiheit… [ weiterlesen: Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design ](https://b13.com/de/wissen/ein-leitfaden-fuer-die-beruecksichtigung-von-barrierefreiheit-im-ux-design) - ![Eine Hand platziert eine rote Form in ein Flussdiagramm, das aus verschiedenen geometrischen Figuren besteht, darunter Rechtecke und Kreise, mit Richtungspfeilen, die die Verbindungen zwischen ihnen anzeigen. Der Hintergrund zeigt ein Gittermuster.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Hervorragendes User Flow Design 03. April 2024 | Stefanie Kreuzer Die Gestaltung des Benutzerflusses visualisiert den Weg, den der Benutzer zurücklegt, um ein bestimmtes Ziel zu erreichen. In digitaler Hinsicht ist der Pfad das, was der Benutzer… [ weiterlesen: Hervorragendes User Flow Design ](https://b13.com/de/wissen/hervorragendes-user-flow-design)