High Contrast Theme

Das High Contrast Theme unterstützt den Kontrastmodus des Betriebssystems. Es richtet sich an Nutzende mit eingeschränktem Sehvermögen, die auf besonders hohe Kontraste angewiesen sind.

Overview

Anders als Light und Dark bringt das High Contrast Theme keine eigene Farbpalette mit. Es tauscht auch keine Tokenwerte aus: Die Styles der Komponenten setzen im Kontrastmodus unmittelbar CSS-Systemfarben und übergehen damit die --mate-*-Farbtokens. Die konkreten Farbwerte kommen also nicht mehr aus dem Design System, sondern aus der Kontrasteinstellung des Betriebssystems. Wählt eine Person dort ein eigenes Farbschema, übernimmt die Anwendung es unmittelbar.

Daraus folgt ein wichtiger Unterschied zu Light und Dark: Dort genügt es, konsequent Tokens zu verwenden, damit eine Oberfläche automatisch mitwechselt. Im Kontrastmodus gilt das nicht.

Wichtig für eigene Styles

Das High Contrast Theme verändert die Werte der Mate-Farbtokens nicht. Eigenes CSS, das mit diesen Tokens arbeitet, behält im Kontrastmodus seine Farben und passt sich nicht automatisch an.

Anwendungen mit eigenen Farbflächen müssen den Kontrastmodus deshalb selbst behandeln, etwa über die Media Query forced-colors: active oder über das gesetzte theme-Attribut.

Aufbau und Richtlinien orientieren sich an den Windows-Vorgaben. Das High Contrast Theme überlagert die Farb-Achse – Light und Dark sind dann wirkungslos, weil hell oder dunkel über die Systemeinstellung bestimmt wird. Größen und Abstände bleiben unberührt, das Mobile Theme wirkt weiterhin.

Aktivierung

Das Theme wird über den Wert mate-high-contrast im theme-Attribut aktiviert – bei Web Components und Vue am body-Element, bei Vaadin Flow am Element mit der Klasse app-root.

Wichtig

Das High Contrast Theme wird nicht automatisch aktiviert und lässt sich nicht über setThemeVariant() setzen. Die Anwendung muss die Kontrasteinstellung des Betriebssystems selbst erkennen und das Attribut entsprechend setzen und wieder entfernen.

Die zugehörigen Styles sind immer im Theme enthalten, bleiben aber wirkungslos, solange das Attribut nicht gesetzt ist. Es entsteht also kein Nachteil, wenn eine Anwendung das Theme nicht nutzt.

Verwendete Systemfarben

Systemfarbe	Verwendung
Canvas	Hintergrundflächen, Text auf primären Buttons
FieldText	Fließtext, Icons, Grid- und Listeninhalte
ButtonText	Beschriftung von Buttons und Bedienelementen
ButtonBorder	Rahmen und Füllung von Buttons
GrayText	Alle Elemente im State Disabled
Highlight	Fokus-Rahmen, Auswahl, Tab im State Selected, Overlay-Rahmen
HighlightText	Text auf ausgewähltem Hintergrund
SelectedItem	Checkboxen und Radio Buttons im State Selected

Elemente im State Disabled sind durchgängig über GrayText gekennzeichnet, der Fokus ist durchgängig über Highlight erkennbar. Damit bleibt die Bedienbarkeit auch dann eindeutig, wenn das Farbschema des Systems stark vom Standard abweicht.

Abgedeckte Komponenten

Eigene Anpassungen für den Kontrastmodus gibt es für: Badge, Button, Date & Time Picker, Details, Dialog, Dropdown, Grid, Icon, Inputfield, Interaktionszustände, List Box, Notification Bar, Progress Bar, Radio Button & Checkbox, Split Layout, Tabs, Typografie und Upload.

Alle übrigen Komponenten erben ihre Darstellung über die genannten Grundlagen – etwa über Typografie, Icons und die Interaktionszustände – und benötigen keine eigene Anpassung.

Weiterführend

• Accessibility – Anforderungen und Ziel-Konformitätsstufe des Design Systems
• Colors – Farbsystem und Kontrastverhältnisse in Light und Dark