Designs mit barrierefreien Farben

1. Einführung

Letzte Aktualisierung:11.05.2022

Das Farbsystem von Material 3 erstellt mit dem dynamischen Farbalgorithmus barrierefreie Farbschemas. Aber was bedeutet Barrierefreiheit für Farben? Wie erstellt das neue Farbsystem von Material Design ein barrierefreies Farbschema und welche Tools helfen dabei?

Lerninhalte

Wie Farben mit den Richtlinien für Barrierefreiheit und Kontrast zusammenhängen
Wie Tools helfen können, ein barrierefreies Farbschema zu erstellen, Änderungen vorzunehmen und den Kontrast zu prüfen

Vorbereitung

In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.

Kenntnisse der aktuellen Android-Farbschemas und -Rollen
Kenntnisse von Figma

Voraussetzungen

2. Jetzt starten

Einrichtung

Zuerst müssen Sie auf die Designlab-Figma-Datei zugreifen. Alles, was Sie für das Lab benötigen, ist in der Figma-Datei enthalten. Sie können die Datei entweder herunterladen und importieren oder sie aus der Figma-Community duplizieren.

Melden Sie sich zuerst in Figma an oder erstellen Sie ein Konto.

Aus der Figma-Community duplizieren

Rufen Sie die Datei „Designing with accessible colors“ auf oder suchen Sie in der Figma-Community nach „Designing with accessible colors“. Klicken Sie rechts oben auf Duplizieren , um die Datei in Ihre Dateien zu kopieren.

Dateilayout

Die Datei ist in sich geschlossen und beginnt mit einer Einführung. Jeder Abschnitt ist in eine Reihe von Zeichenflächen unterteilt, die miteinander verknüpft sind. Er enthält einige Kernkonzepte für den Abschnitt und anschließend Übungen. Die Abschnitte und Übungen bauen aufeinander auf und sollten nacheinander bearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen ausführlicher behandelt. Lesen Sie das Codelab, um mehr über die neuen Material You-Funktionen zu erfahren.

Auf der Zeichenfläche Intro befinden sich Schaltflächen, die die Zeichenflächen in der richtigen Reihenfolge miteinander verknüpfen. Klicken Sie auf die Schaltfläche, um auf den Link zuzugreifen.

Figma-Plug-in installieren

In diesem Codelab wird ein neues Figma-Plug-in verwendet, um dynamische Farbschemas und Tokens zu generieren. Installieren Sie das Figma-Plug-in direkt über die Figma-Community-Seite oder suchen Sie in der Figma-Community nach „Material Theme Builder“.

3. Farbe und Barrierefreiheit

Barrierefreiheit ist die einzige Möglichkeit, für alle zu entwickeln und sicherzustellen, dass Ihre Produkte für ein möglichst breites Publikum zugänglich sind.

Die Frage, ob die Farbe auf dem Bildschirm zu sehen ist, ist nur der erste Aspekt, der bei der Gestaltung mit Farben berücksichtigt werden muss. Je nach Sehschärfe nehmen Menschen Farben unterschiedlich wahr.

Bei Farbblindheit müssen Farbkombinationen geprüft werden, damit UI-Elemente nicht ineinander übergehen.

Opazität und Stärke sind zwar nicht der tatsächliche Farbton einer Farbe, haben aber einen starken visuellen Einfluss darauf, wie die Farbe wahrgenommen wird.

Eine niedrige Opazität erzeugt eine hellere Farbe, wodurch Text unleserlich werden kann. Eine Person mit Kurzsichtigkeit hat beispielsweise Schwierigkeiten, Text in einer angemessenen Entfernung zu lesen, wenn die Opazität auf 30% festgelegt ist.

Verwenden Sie Opazität mit Bedacht und niemals unter den empfohlenen Richtlinien.

Die Schriftstärke kann einen ähnlichen Effekt haben. Bei dunklen Hintergründen sollten Sie eine dünnere Schriftstärke verwenden. Wenn Sie im Druck eine sehr dünne Schrift verwenden, kann die Tinte in die Schrift „auslaufen“ und einen beengenden Text erzeugen. Unsere Augen erzeugen diesen Effekt auch auf Bildschirmen, da sie versuchen, den Raum auszufüllen.

Eine dünne Schrift auf einem dunklen Hintergrund erzeugt einen beengenden Effekt.

Lesbarkeit im Vergleich zu Verständlichkeit. In diesem Lab beziehen wir uns auf die Lesbarkeit des Texts. Die Lesbarkeit gibt an, wie gut ein Text zu sehen ist, während die Verständlichkeit angibt, wie gut er zu verstehen ist.

4. Farbkontrast

Die Richtlinien für Barrierefreiheit bieten Designern und Entwicklern eine einheitliche, von Experten erstellte Checkliste, mit der sie sicherstellen können, dass sie Best Practices für die Erstellung barrierefreier Produkte einhalten. WCAG ist der übliche Standard und die Referenz für dieses Lab.

Der Farbkontrast ist der Unterschied zwischen der Luminanz der Vorder- und Hintergrundelemente, dargestellt in einem Verhältnis. Dieses Verhältnis wird bewertet. Wenn Sie den Kontrast zwischen beispielsweise Text auf einer Schaltfläche und dem Container messen, können Sie feststellen, ob der Text lesbar ist.

Beispiel für einen unzureichenden Farbkontrast

Die Richtlinien für den Farbkontrast sind in Text und Nicht-Text unterteilt, jeweils mit eigenen Bewertungen.

Text

	AA	AAA
Großer Text	3:1	4,5:1
Normaler Text (Textkörper)	4,5:1	7:1

Nicht-Text

	AA
Nicht-Text (grafische Elemente)	3:1

Sehen wir uns an, wie Sie den Kontrast prüfen und manuell korrigieren können.

Suchen Sie in Figma nach den Farben in den UI-Elementen. Der große Text (#C0BEC5) befindet sich auf einer Hintergrundfarbe von (#F5F5FF). Wenn Sie diese Farben in einem Online-Kontrastprüfer in den Vorder- und Hintergrund eingeben, wird angezeigt, dass alle Bewertungen nicht erfüllt werden.
Der Text ist für die Hintergrundfarbe zu hell. Passen Sie im Online-Kontrastprüfer die Vordergrundfarbe mit der Farbauswahl an eine dunklere Farbe an, bis die Bewertung AAA erfüllt ist.
Wenden Sie die neue Farbe in Figma auf den großen Text an.
Wiederholen Sie diesen Vorgang für den Textkörper und die Schaltflächen. Prüfen Sie dabei sowohl die Textfarbe als auch die Hintergrundfarbe.
Wenden Sie denselben Vorgang auf die Symbole an. Verwenden Sie dazu das Ergebnis unter Grafische Objekte und UI-Komponenten.
Übertragen Sie die neue Farbe für jedes Element in Figma. Alle Elemente sollten jetzt die Kontrastbewertungen erfüllen.

Beispiel für einen ausreichenden Farbkontrast

Das war wahrscheinlich ein langer Prozess und die Ergebnisse haben möglicherweise eine weniger harmonische Farbpalette erzeugt. Hier können Tools helfen.

5. Mit Luminanz erstellt

Das neue dynamische Farbsystem für Material Design basiert auf Luminanz und nicht auf Farbton. Wenn Farbton und Chroma entfernt würden, könnten wir den Kontrast durch Schattierungen sehen.

Wenn eine Farbe extrahiert wird, ergeben sich fünf verschobene Hauptfarben, aus denen Farbpaletten generiert werden. Eine Farbpalette besteht aus dreizehn Farbtönen, einschließlich Weiß und Schwarz. Ein Farbtonwert von 100 entspricht dem maximalen Licht und ergibt Weiß. Jeder Farbtonwert zwischen 0 und 100 gibt die Lichtmenge an, die in der Farbe vorhanden ist.

Das System der Farbpaletten ist entscheidend dafür, dass jedes Farbschema standardmäßig barrierefrei ist.

Die Kombination von Farben basierend auf dem Farbton anstelle von Hex-Wert oder Farbton ist eines der wichtigsten Systeme, die jede Farbausgabe barrierefrei machen. Produkte mit dynamischen Farben erfüllen die Anforderungen, da die algorithmischen Kombinationen, die ein Nutzer sehen kann, so gestaltet sind, dass sie den Standards für Barrierefreiheit entsprechen.

Elemente mit ähnlicher Luminanz haben keinen ausreichenden Kontrast für die Lesbarkeit, während Elemente mit unterschiedlichen Luminanzwerten besser zu unterscheiden sind.

Die dynamische Farbe von Material You ist für unvorhersehbare Kontexte konzipiert. Um Kontrastverhältnisse in verschiedenen Betrachtungskontexten zu verwalten, sind Luminanzwerte das wichtigste Attribut, mit dem Farben auch ohne Tests des Produktteams für jede spezifische Farbkombination erfolgreich kombiniert werden können.

6. Barrierefreies Design erstellen

Der Design-Builder generiert Material Design-Tokens als Figma-Stile, mit denen Sie dynamische Farben visualisieren und ein benutzerdefiniertes Design erstellen können. Dabei wird das Farbsystem von Material 3 verwendet, um sicherzustellen, dass barrierefreie Farben in das Farbschema generiert werden.

Klicken Sie im Plug-in-Modal auf Benutzerdefiniert. Dadurch wird das Design in ein benutzerdefiniertes Design geändert. Das Material-Design wurde bereits generiert, Sie können aber auch ein neues Design erstellen. Weitere Informationen finden Sie unter Dynamische Farben visualisieren.
Legen Sie als Nächstes eine primäre Schlüsselfarbe fest. Die primäre Farbe kann Ihre Hauptmarkenfarbe oder die am häufigsten verwendete primäre Akzentfarbe sein. Klicken Sie auf die Farbe mit der Bezeichnung Primär , um die Farbauswahl zu öffnen und eine Farbe auszuwählen. Die primäre Farbe wird für die Quellfarbe verwendet, ähnlich wie die Quellfarbe in der dynamischen Einstellung.

Farben zu MTB hinzufügen

Die restlichen Schlüsselfarben werden basierend auf der primären Farbe festgelegt. Sie müssen also keine zusätzlichen Farben hinzufügen, wenn Sie sie nicht benötigen. Optional können Sie eine sekundäre und eine tertiäre Farbe hinzufügen.
Das Farbschema zeigt die Schlüsselfarben, die aus den Eingabefarben abgeleitet wurden, die generierten Farbpaletten und die resultierenden Farbschemas mit Farbrollen. Es sind sowohl helle als auch dunkle Schemas verfügbar.
Im Lab finden Sie eine Beispiel-UI, in der das Farbschema angewendet wird. Wählen Sie die App-UI-Komponente aus und klicken Sie im Plug-in auf Ersetzen.

Farbschema mit verknüpftem Mock-up

Für diese Übungen hat der Material Theme Builder die erforderlichen Tokens bereits in der Figma-Datei generiert.

7. Kontrast mit dem Material Theme Builder prüfen

Das ist toll, aber wir wissen, dass Sie einige dieser Stile manuell mit anderen Farben aktualisieren möchten. Der Material Theme Builder enthält eine integrierte Kontrastprüfung für die Farben des Hauptschemas, um Ihnen bei diesen Entscheidungen zu helfen.

Da Tokens als Stile erstellt werden, können wir auch den Wert der generierten Farbe festlegen. Suchen Sie in den Figma-Stilen nach der primären Farbe des aktuellen Designs und wählen Sie rechts das Symbol „Stil bearbeiten“ aus.
Aktualisieren Sie die primäre Farbe in den Eigenschaften. Dies wird in der Farbausgabe und der App-UI widergespiegelt. Diese Farbe wurde nicht vom Farbalgorithmus generiert, daher können wir die Barrierefreiheit nicht garantieren.
Klicken Sie im Plug-in-Menü auf Kontrast prüfen und öffnen Sie dann das Modal „Stil bearbeiten“ für die primäre Farbe noch einmal. Dadurch wird der Kontrast geprüft und die Kontrastbewertung angezeigt.

Kontrast im Figma-Stildialog

8. Glückwunsch

Sensationell! Barrierefreiheit sollte ein wichtiger Bestandteil Ihres Prozesses sein. Mit Material Design und dem Material Theme Builder ist das noch einfacher.

Wenn Sie Fragen haben, können Sie uns jederzeit über Twitter unter @MaterialDesign kontaktieren.

Weitere Designinhalte und Tutorials finden Sie auf youtube.com/MaterialDesign.