Orange is not the new Black – Warum Orange im Webdesign oft durchfällt

Die Sache mit dem Kontrast

Fangen wir mit dem Offensichtlichen an: Orange ist eine der kontrastschwächsten Farben, besonders in Kombination mit Weiß oder grauen Hintergründen. Und genau da liegt das Problem. Denn: Wenn Text oder wichtige Interaktionselemente wie Buttons oder Links in Orange gehalten sind, leidet die Lesbarkeit bzw die Accessibility darunter.

Die WCAG (Web Content Accessibility Guidelines), also die Bibel der digitalen Barrierefreiheit, fordern klare Mindestkontraste. Und Orange kommt da oft einfach nicht über die Ziellinie, zumindest nicht ohne dunkle Hintergrundfarbe oder zusätzliche Stilmittel. Aber wer will schon ständig dunkle Hintergründe einsetzen, oder Orange so abdunkeln, dass es bräunlich wird, nur um die Farbe halbwegs zugänglich zu machen?

Visuelle Hierarchie? Eher verwirrend mit Orange allein.

In der User Interface Gestaltung ist es entscheidend, dass User:innen schnell erkennen, wo ihre Aufmerksamkeit gefragt ist. Farben helfen uns dabei, Hierarchien zu schaffen, Call-to-Actions hervorzuheben und Nutzer:innen durch Interfaces zu leiten.

Orange macht das schwer. Es ist eine Farbe, die sich gerne überall einmischt. Sie kann leicht mit Rot als “Fehlermeldung” verwechselt werden. Wird sie als einzige Farbe eingesetzt, so wird das ganze eher schwierig. Das Ergebnis? Eine visuelle Unruhe, die weder klar kommuniziert noch besonders angenehm wirkt. Orange sollte nur gemeinsam mit einer zweiten oder dritten, kontraststärkeren Farbe (z.b. dunkelblau) im UI verwendet werden, um eine klare visuelle Hierarchie und ausreichend Kontrast zu gewährleisten.

Farbenblind? Orange wird schnell zur Unsichtbarkeit

Menschen mit Sehbeeinträchtigungen, insbesondere mit Rot-Grün-Schwäche (Deuteranopie & Protanopia), haben mit Orange oft das Nachsehen. Wortwörtlich. Die Unterscheidbarkeit zu anderen Farbtönen geht verloren – was besonders dann zum Problem wird, wenn Orange als einzige Unterscheidungsmöglichkeit eingesetzt wird.

Es sollte immer getestet werden, ob Orange mit einer anderen Farbe auch bei einer Rot-Grün Schwäche noch gesehen werden kann. Testen kann man das ganz leicht mit dem Figma Plugin: Stark - contrast & accessibility checker Hier können visuelle Simulationen, wie etwa eine Rot-Grün Schwäche, nachgestellt werden, um die Kontraste zu checken.

Das Barrierefreiheitsgesetz ist da – Orange bleibt problematisch

Seit dem 28. Juni 2025 ist in Österreich das Barrierefreiheitsgesetz (BaFG) in Kraft. Für digitale Produkte bedeutet das: Accessibility ist nicht mehr nur nice to have, sondern gesetzlich verpflichtend. Und Unternehmen, die sich nicht an die Vorgaben halten, riskieren nicht nur den Unmut ihrer Nutzer:innen, sondern auch echte Konsequenzen, wie Strafzahlungen.

Designentscheidungen (auch Farbentscheidungen) müssen jetzt einer viel kritischeren Prüfung standhalten. Wer auf Nummer sicher gehen will, sollte auf zugänglichere Farben setzen oder zumindest für ausreichende Kontrastwerte und alternative Darstellungen sorgen.

Neben Orange gibt es noch einige weitere Farben, wie rot oder gold, die aus UX- und Accessibility-Sicht problematisch sein können – insbesondere in Bezug auf Kontrast, Lesbarkeit und Farberkennung bei Sehbeeinträchtigungen.

Orange? Bitte mit Vorsicht genießen

Wir wollen Orange nicht völlig verteufeln. Die Farbe hat ihre Berechtigung. Als Akzent, als sekundäres Gestaltungselement oder als Brand-Element. Aber als einzige tragende Säule im UI-Design? Lieber nicht.

Wenn du also das nächste Mal vor der Wahl stehst, deinen „Jetzt kaufen“-Button in Orange zu setzen: Denk zweimal nach. Hol dir eine zweite kontrastreiche Farbe dazu und noch besser: Mach einen schnellen Accessibility-Check. Denn gute UX bedeutet nicht nur schönes Design – sondern inklusives Design. 🫶🏼