Nicht alle Menschen nutzen digitale Inhalte auf dieselbe Weise. Manche Menschen bevorzugen den Dunkelmodus ihres Betriebssystems oder vergößeren aufgrund einer Seheinschränkung die Ansicht. Andere ändern die Schriftgröße im Browser oder, was vielleicht weniger bekannt ist, stellen dort eigene Farben für Texte und Hintergründe ein.
Solche Farbeinstellungen können allerdings dazu führen, dass Inhalte oder einzelne Elemente und deren Zustände nur noch schwer oder gar nicht zu erkennen sind. Dieser Artikel zeigt vier typische Fälle aus der Praxis. Er erklärt, woran es scheitert und wie es sich lösen lässt.
Firefox-Farbeinstellungen
Firefox bietet die Möglichkeit, für Text und Hintergrund sowie für besuchte und unbesuchte Links eigene Farben einzustellen.
Die Oberfläche ändert sich häufig. Entsprechend dem Stand von Oktober 2026 finden Sie die Optionen unter:
- Einstellungen — Barrierefreiheit — Bereich „Kontraststeuerung“
- Unter „Farben überschreiben“ die Option „Benutzerdefiniert“ wählen
- Schaltfläche „Farben verwalten“ — im Dialog Text zum Beispiel auf Gelb und Hintergrund auf Schwarz stellen
Technisch schaltet Firefox damit in den Modus „forced colors“. Was dabei passiert, versteht man am besten, wenn man sich ansieht, woher Farben im Browser überhaupt kommen.
Systemfarben
Der Browser führt eine Liste von Farben, in der jeder Eintrag für eine bestimmte Art von Element zuständig ist. Anders ausgedrückt: jeder Eintrag hat eine bestimmte Rolle: Hintergrund der Seite, Text der Seite, Fläche von Schaltflächen, Beschriftung von Schaltflächen und einige weitere.
Diese Liste gibt es nicht erst seit dem Web, sondern schon seit jeher für Betriebssysteme. Alle Programme, die darauf zugreifen, sehen damit einheitlich aus — daher der Name Systemfarben.
Der Browser bedient sich aus dieser Liste für sein eigenes Stylesheet — also für die Grundgestaltung, die jede Seite bekommt, bevor das Entwicklungsteam die erste Zeile CSS geschrieben hat. Die Farben sind in dem Stylesheet nicht fest definiert, sondern verweisen mithilfe von Schlüsselwörtern auf diese Liste. Vereinfacht sieht das so aus:
html {
color: CanvasText;
background-color: Canvas;
}
a:link {
color: LinkText;
}Das Schlüsselwort Canvas steht für den Hintergrund der Seite oder eines Inhaltsbereichs, CanvasText für die Textfarbe der Seite oder eines Inhaltsbereichs, LinkText für die Farbe von Links.
Eine Seite ohne eigenes CSS nutzt standardmäßig Schwarz auf Weiß, weil in den Listeneinträgen üblicherweise Schwarz für Text und Weiß für Hintergrund steht. Genau diese Einträge füllen Nutzende mit der Firefox-Farbeinstellung neu.
Allerdings deckt die Einstellung nicht die ganze Liste ab. Firefox lässt Nutzende nur vier Farben festlegen: Text, Hintergrund und die beiden Linkfarben. Die übrigen Einträge — etwa die für Schaltflächen — füllt der Browser selbst. Ein Windows-Kontrastdesign deckt dagegen mehr davon ab.
Wann der Browser auf diese Liste zugreift, hängt davon ab, was die Seite beziehungsweise das CSS selbst vorgibt und ob Nutzende eigene Farben eingestellt haben:
- Wenn die Seite eine Farbe nennt, etwa
background-color: #25377a, dann hat diese Angabe Priorität, die Systemfarben kommen nicht zum Zug. - Wenn die Seite keine Farbe nennt, greift der Browser auf die Systemfarben zurück.
- Wenn Nutzende eigene Farben einstellen, werden die entsprechenden Systemfarben mit diesen Farben belegt. Für die Rolle Textfarbe kommt die eingestellte Textfarbe zum Einsatz, für die Rolle Hintergrund die eingestellte Hintergrundfarbe. Der Browser ersetzt bestimmte Farbangaben der Seite durch diese neu aufgefüllten Systemfarben. Damit setzen sich die Farbeinstellungen der Nutzenden gegenüber den ursprünglichen Farbangaben der Seite durch.
Dieser Modus heißt in CSS „forced colors“ und lässt sich mithilfe einer Media Query abfragen: @media (forced-colors: active). Damit kann CSS gezielt auf die Einstellung von Nutzenden reagieren. Wir kommen später darauf zurück.
Der Begriff „Hochkontrastmodus“ meint im Sprachgebrauch in der Regel die Einstellung des Betriebssystems, die sich in einem Detail etwas anders verhält (siehe unten beim Beispiel Symbolschaltflächen). Daher wird er an dieser Stelle vermieden.
Eigene Farben berücksichtigen
Um zu vermeiden, dass Inhalte der Seite bei eigenen Farben nicht mehr sichtbar sind, können in bestimmten Situationen das Schlüsselwort currentColor oder Systemfarben helfen. Umsetzende können damit erreichen, dass sich die Inhalte an die Darstellungsumgebung anpassen. Die folgenden vier Anwendungsfälle sollen dies zeigen.
Drei der vier Fälle lassen sich mit currentColor lösen, ganz ohne Media Query. Erst der vierte Fall braucht die Systemfarben und damit die Schlüsselwörter aus der bereits erwähnten Liste.
Icons mit fester Farbe
Icons erfüllen im Web unterschiedliche Aufgaben: Sie sollen auf einen Blick Informationen vermitteln oder Text mithilfe eines Symbols ergänzen – sowohl dekorativ als auch inhaltlich. Beispiele dafür sind:
- ein Häkchen oder Kreuz in einer Tabelle als Statusanzeige
- ein Telefonsymbol vor einer Telefonnummer als informationstragende Grafik
Solche Icons werden häufig als Inline-SVGs mit fest definierter Füllfarbe eingebunden, etwa fill="#000000" am <path>. Die Farbe steckt als Attribut im exportierten SVG.
Das Problem ist dabei, dass diese fest definierte Farbe beibehalten wird, wenn Nutzende eigene Farben einstellen. Ein schwarzes Häkchen in einer Tabelle ist bei einer Einstellung von gelber Schrift auf schwarzem Hintergrund nicht mehr zu sehen. Es liegt dann schwarz auf schwarz. Die Information geht verloren.
Die Farbe bleibt in Firefox stehen, unabhängig davon, ob sie als Attribut im SVG oder als CSS-Angabe notiert ist.
Das Schlüsselwort currentColor kann hier helfen. Neben den Schlüsselwörtern für Systemfarben oder den Farbnamen, wie blue oder pink, ist es eine weitere Möglichkeit, Farben im CSS anzugeben.
Dabei dient currentColor als Stellvertreter für den aktuellen Farbwert der CSS-Eigenschaft color eines Elements. Auf diese Weise lässt sich die Textfarbe auch für andere Farbeigenschaften verwenden, beispielsweise für fill.
Definiert man die Füllfarbe eines SVG-Elements mit currentColor, statt mit einer festen Farbe, übernimmt das Icon den aktuellen Wert der CSS-Eigenschaft color und damit die Textfarbe des Elements.
.icon {
fill: currentColor;
}Das Icon wird in unserem Beispiel gelb, da wir eine gelbe Textfarbe auf schwarzem Hintergrund eingestellt haben.
Definiert man die Farbe im CSS, muss das fill-Attribut aus dem SVG verschwinden, denn eine geerbte CSS-Angabe setzt sich nicht gegen ein Attribut am <path> durch. Das Häkchen steht in einer Tabellenzelle und erbt deren Farbe, sodass keine eigene Textfarbe erforderlich ist.
Wichtig ist der Unterschied zwischen den drei Angaben:
color: bluelegt die CSS-Textfarbe fest.fill: bluelegt die Füllfarbe eines SVG-Elements explizit fest (feste Füllfarbe).fill: currentColorverwendet dagegen den aktuellen Wert voncolor— und den ersetzt der Browser bei eigenen Farbeinstellungen.
SVGs mit fester Farbe behalten diese bei eigenen Farbeinstellungen und gehen im Hintergrund unter. currentColor löst das.
Symbolschaltflächen
Viele Benutzeroberflächen nutzen Icons, um Funktionen visuell zu kennzeichnen. Bei Schaltflächen ohne sichtbare Beschriftung vermittelt das Icon allein, welche Aktion die Schaltfläche auslöst. Typische Beispiele sind:
- ein Lupensymbol für „Suche“
- ein Stift-Symbol für „Bearbeiten“
- ein Papierkorb für „Löschen“
Wird das Icon unsichtbar, bleibt eine leeres Fläche. Die Lösung ist hier ebenfalls fill: currentColor.
<button aria-label="Bearbeiten">
<svg viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z…" />
</svg>
</button>.button {
color: #25377a;
fill: currentColor;
background-color: #ffffff;
border: 2px solid #25377a;
}fill greift hier auf die Eigenschaft color desselben Elements zurück — nicht auf die Textfarbe der Seite.
Das Icon lässt sich also beliebig einfärben, während der umgebende Text schwarz bleibt. Es folgt trotzdem der Farbe, die der Browser bei eigenen Farbeinstellungen für Beschriftungen vorsieht.
Bei Schaltflächen gibt es jedoch eine Besonderheit: Ein <button> bekommt nicht die eingestellten Seitenfarben, sondern das Systemfarbpaar für Schaltflächen — ButtonFace für die Fläche, ButtonText für die Beschriftung.
Welche Farben das sind, lässt sich nicht vorhersagen. In Firefox stammen sie nicht aus den vier eingestellten Werten, sondern der Browser wählt ein helles oder dunkles Paar, passend zur Helligkeit des eingestellten Hintergrunds. Unter einem Windows-Kontrastdesign stammen sie aus dem Design, dort gehört „Schaltflächentext“ zu den einstellbaren Farben.
Gerade weil man die Farbe der Fläche nicht kennt, ist currentColor hier richtig: Das Icon übernimmt die Beschriftungsfarbe und damit die Farbe, die das System als Gegenstück zu dieser Fläche vorsieht.
Eine feste Farbe im SVG bleibt auch hier stehen, während Fläche und Beschriftung ersetzt werden. Auf der neuen Fläche kann sie dadurch untergehen.
Bei eigenen Farben bekommt die Schaltfläche ihr eigenes Systemfarbpaar. Nur der Stift mit currentColor übernimmt die Beschriftungsfarbe und bleibt sichtbar.
Grafische Elemente aus Hintergrundfarben
currentColor ist nicht auf SVG beschränkt. Es ist ein ganz normaler Farbwert und überall erlaubt, wo CSS eine Farbe erwartet — also auch bei background-color, border-color, outline-color oder text-decoration-color.
Manche grafische Elemente bestehen dabei allein aus background-color. Dazu gehören beispielsweise:
- ein Hamburger-Icon aus drei Balken
- ein Statuspunkt als Kreis mit
border-radius: 50% - die Füllung eines Fortschrittsbalkens
Werden die Farben überschrieben, ersetzt der Browser background-color durch die eingestellte Hintergrundfarbe. Die Farbe des grafischen Elements und die Hintergrundfarbe fallen zusammen. Das Element verschwindet.
Hier liegt ein wichtiger Unterschied zum SVG-Fall: Ein fest eingetragenes fill bleibt stehen. Der Fehler tritt also nur bei manchen Farbkombinationen auf. Eine feste background-color wird dagegen tatsächlich ersetzt. Das Element verschwindet deshalb immer, unabhängig davon, welche Farben jemand gewählt hat.
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>.hamburger span {
display: block;
height: 2px;
background-color: currentColor;
}Genau wie bei fill löst currentColor zur Textfarbe des Elements auf. Bei überschriebenen Farben ist das die eingestellte Vordergrundfarbe. Der Balken wird so dunkel oder hell wie der Text daneben und hebt sich von der Fläche ab. Auch hier braucht es keine Media Query.
Eine feste Hintergrundfarbe wird durch die eingestellte ersetzt, das Icon ist nicht mehr zu sehen. Mit currentColor als Hintergrundfarbe werden die Balken in der Textfarbe eingefärbt.
Wenn currentColor nicht ausreicht
Nicht immer reicht es, wenn ein Element die eingestellte Textfarbe übernimmt. Bei manchen Elementen wird eine Auswahl dadurch hervorgehoben, dass sich sowohl die Hintergrundfarbe als auch die Textfarbe ändern: Die gewählte Option bekommt eine farbige Fläche, während die Schrift darauf hell dargestellt wird.
Typische Anwendungsfälle sind:
- Filter, die wie Schaltflächen aussehen
- der aktive Tab in einer Tab-Leiste
- segmentierte Umschalter, etwa zur Auswahl einer Größe: Klein / Mittel / Groß
Werden die Farben überschrieben, sehen alle Optionen gleich aus. Sie bekommen die gleiche eingestellte Hintergrundfarbe, und der Zustand ist nicht mehr erkennbar.
Entscheidend ist, ob allein die Fläche die Information vermittelt. Gibt es ein zweites Merkmal, etwa ein Icon, bleibt der Zustand auch ohne Farbe ablesbar.
Das Schlüsselwort currentColor hilft in diesem Anwendungsfall nicht. Es liefert nur eine Farbe: die Textfarbe. Gebraucht werden jedoch zwei, und zwar genau die beiden, die Nutzende eingestellt haben.
Die Lösung liegt hier in den Systemfarben, die sich im CSS direkt ansprechen lassen: Canvas ist der Hintergrund der Seite, CanvasText der Text.
<input type="radio" name="size" id="size-m">
<label for="size-m">Mittel</label>/* Das input ist visuell verborgen, das label ist als Kästchen gestaltet*/
label {
color: #25377a;
background-color: #ffffff;
border: 2px solid #25377a;
}
input:checked + label {
color: #ffffff;
background-color: #25377a;
}
@media (forced-colors: active) {
label {
color: CanvasText;
background-color: Canvas;
border-color: CanvasText;
}
input:checked + label {
color: Canvas;
background-color: CanvasText;
}
}Damit die ausgewählte Option invertiert dargestellt wird, muss zunächst per CSS der Modus „forced colors“ abgefragt werden (@media (forced-colors: active)), Firefox aktiviert diesen Modus technisch, sobald benutzerdefinierten Farben zum Einsatz kommen.
Anschließend werden im CSS CanvasText als Textfarbe und Canvas als Hintergrund zugewiesen. Bei der ausgewählten Option sind diese beiden Farben vertauscht, sodass sie invertiert erscheint.
Die beiden eingestellten Farben sind dabei zwangsläufig gut voneinander abgesetzt — schließlich liest die Person damit die gesamte Seite. Tauscht man sie, hebt sich die Auswahl deutlich ab und erreicht denselben Kontrast wie normaler Fließtext.
Bei eigenen Farben bekommen alle Optionen dieselbe Hintergrundfarbe, die Auswahl verschwindet. Bei vertauschten Systemfarben ist sie wieder sichtbar.
Zusammenfassung
currentColor repräsentiert den Wert von color am Element selbst. Wer damit Icons, Flächen, Rahmen oder Linien einfärbt, bindet sie an die Textfarbe — und die ersetzt der Browser bei eigenen Farbeinstellungen. Die Farbe wird für das Element also übernommen. Firefox ersetzt ein festes fill übrigens nicht, obwohl der Standard das vorsieht.
Reicht eine Farbe nicht aus, kommen die Systemfarben ins Spiel. Stellen Nutzende eigene Farben ein, schaltet der Browser in den Modus „forced colors“, und genau den kann CSS abfragen: @media (forced-colors: active). Innerhalb dieser Media Query lassen sich Canvas und CanvasText direkt ansprechen, also die beiden Farben, die Nutzende selbst gewählt haben. Sie stammen aus der Einstellung, daher überschreibt der Browser sie nicht.
Ressourcen
<color>CSS Type, MDN,- CSS Color Adjustment Module Level 1, W3C Candidate Recommendation Snapshot, 16. Dezember 2025
- High Contrast Mode (HCM) Media Queries, Firefox Source Docs