Designs mit barrierefreien Farben

1. Einführung

Zuletzt aktualisiert:11.05.2022

Das Material 3-Farbsystem erstellt mit dem dynamischen Farbalgorithmus barrierefreie Farbschemas. Was bedeutet Barrierefreiheit für Farben? Wie wird mit dem neuen Farbsystem von Material Design ein barrierefreies Farbschema erstellt und welche Tools helfen dabei?

Lerninhalte

Wie Farbe mit Barrierefreiheit und Kontrastrichtlinien zusammenhängt.
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.
Figma-Kenntnisse

Voraussetzungen

2. Jetzt starten

Einrichtung

Rufen Sie zuerst die Designlab-Figma-Datei auf. 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.

Duplikat aus der Figma-Community

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 Artboards unterteilt, die miteinander verknüpft sind. Er beginnt mit einigen Kernkonzepten für den Abschnitt und wird dann mit Übungen fortgesetzt. Die Abschnitte und Übungen bauen aufeinander auf und sollten nacheinander durchgearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen genauer erläutert. In diesem Codelab erfahren Sie mehr über die neuen Material You-Funktionen.

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 die von Ihnen entwickelten Produkte für ein möglichst breites Publikum inklusiv sind.

„Kann ich die Farbe auf dem Bildschirm sehen?“ 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 Farbenblindheit müssen Farbkombinationen geprüft werden, damit UI-Elemente nicht ineinander übergehen.

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

Bei geringer Deckkraft wird die Farbe heller, wodurch der Text möglicherweise schwer lesbar ist. Eine kurzsichtige Person wird beispielsweise Schwierigkeiten haben, Text zu lesen, der in angemessener Entfernung auf 30% Deckkraft eingestellt ist.

Verwenden Sie die Deckkraft mit Vorsicht und niemals unter den vorgeschlagenen Richtlinien.

Die Schriftstärke kann einen ähnlichen Effekt haben, da dünnere Schriftstärken auf dunkleren Hintergründen besser zur Geltung kommen. Bei gedruckten Texten kann es bei sehr dünnen Schriftarten passieren, dass die Tinte in die Buchstaben „läuft“ und der Text dadurch schwer lesbar wird. Unsere Augen erzeugen diesen Effekt auch auf Bildschirmen, indem sie versuchen, den Raum auszufüllen.

Dünne Schrift auf dunklem Hintergrund wirkt beengend.

Lesbarkeit und Lesefluss In diesem Lab beziehen wir uns immer wieder auf die Lesbarkeit des Texts. Die Lesbarkeit gibt an, wie leicht ein Text zu verstehen ist, während die Sichtbarkeit angibt, wie leicht ein Text zu sehen ist.

4. Farbkontrast

Die Richtlinien für Barrierefreiheit bieten Designern und Entwicklern eine einheitliche, expertenbasierte Checkliste, mit der sie sicherstellen können, dass sie Best Practices für die Entwicklung inklusiver Produkte einhalten. WCAG ist der übliche Standard, auf den sich dieses Lab bezieht.

Der Farbkontrast ist der Unterschied zwischen der Leuchtdichte der Vorder- und Hintergrundelemente, der in einem Verhältnisformat dargestellt wird. Für dieses Verhältnis werden Noten vergeben. Wenn Sie den Kontrast zwischen beispielsweise Text auf einer Schaltfläche und dem zugehörigen Container messen, können Sie feststellen, ob der Text lesbar ist.

Beispiel für einen nicht ausreichenden Farbkontrast

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

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 sich der Kontrast manuell korrigieren lässt.

Suchen Sie in Figma nach den Farben in den UI-Elementen. Der Text „Large text“ (#C0BEC5) wird auf einem Hintergrund mit der Farbe (#F5F5FF) dargestellt. Wenn Sie diese Farben in einem Online-Kontrastprüfer als Vorder- und Hintergrund eingeben, sehen Sie, dass sie alle Bewertungen nicht bestehen.
Der Text ist zu hell für die Hintergrundfarbe. Passen Sie die Vordergrundfarbe mit der Farbauswahl an eine dunklere Farbe an, bis sie AAA entspricht.
Wenden Sie in Figma die neue Farbe für bestandene Tests auf den großen Text an.
Gehen Sie für Fließtext und Schaltflächen genauso vor und prüfen Sie jeweils die Text- und die Hintergrundfarbe.
,Verwenden Sie das Ergebnis unter Grafische Objekte und Komponenten der Benutzeroberfläche, um dasselbe Verfahren auf die Symbole anzuwenden**.**
Übertragen Sie die neue Farbe für jedes Element in Figma. Alle Elemente sollten jetzt die Kontrastanforderungen erfüllen.

Beispiel für einen ausreichenden Farbkontrast

Das war wahrscheinlich ein langer Prozess und die Ergebnisse haben möglicherweise zu einer weniger harmonischen Farbpalette geführt. Hier können Tools helfen.

5. Mit Luminanz erstellt

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

Wenn eine Farbe extrahiert wird, ergeben sich daraus fünf verschobene Schlüsselfarben, aus denen tonale Paletten generiert werden. Eine tonale Palette besteht aus dreizehn Tönen, darunter Weiß und Schwarz. Ein Tonwert von 100 entspricht dem maximalen Licht und führt zu Weiß. Jeder Tonwert zwischen 0 und 100 gibt die Lichtmenge in der Farbe an.

Das System der Tonpaletten ist von zentraler Bedeutung, um jedes Farbschema standardmäßig barrierefrei zu gestalten.

Die Kombination von Farben auf Grundlage der Tonalität anstelle von Hexadezimalwert oder Farbton ist eines der wichtigsten Systeme, die die Zugänglichkeit von Farbausgaben ermöglichen. Produkte, die dynamische Farben verwenden, erfüllen die Anforderungen, da die algorithmischen Kombinationen, die ein Nutzer sehen kann, so konzipiert sind, dass sie den Barrierefreiheitsstandards entsprechen.

Elemente mit ähnlicher Luminanz haben keinen ausreichenden Kontrast für eine gute 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 Helligkeitsstufen das wichtigste Attribut, mit dem Farben erfolgreich kombiniert werden können, auch wenn das Produktteam nicht jede einzelne Farbkombination testet.

6. Barrierefreies Design erstellen

Mit dem Theme Builder werden Material Design-Tokens als Figma-Stile generiert. So können Sie dynamische Farben visualisieren und ein benutzerdefiniertes Design erstellen. Dabei wird das Material 3-Farbsystem verwendet, um sicherzustellen, dass barrierefreie Farben im Farbschema generiert werden.

Klicken Sie im Plug-in-Modal auf Benutzerdefiniert. Dadurch wird das Design in ein benutzerdefiniertes Design geändert. Das Material-Design wird 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 Farbe für den primären Schlüssel fest. Die primäre Farbe kann Ihre Hauptmarkenfarbe oder die am häufigsten verwendete primäre Akzentfarbe sein. Klicken Sie auf die Farbe mit dem Label Primär, um die Farbauswahl zu öffnen und eine Farbe auszuwählen. Die Primärfarbe wird für die Quellfarbe verwendet, ähnlich wie die Quellfarbe in der dynamischen Einstellung.

Farben für MTB hinzufügen

Die restlichen Schlüsselfarben werden basierend auf der Primärfarbe 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 aus den Eingabefarben abgeleiteten Hauptfarben, die generierten tonalen Paletten und die resultierenden Farbschemata mit Farbrollen. Es sind sowohl helle als auch dunkle Schemas verfügbar.
Im Lab finden Sie ein Beispiel für eine Benutzeroberfläche, auf die das Farbschema angewendet wurde. Klicken Sie im Plug-in auf swap (tauschen), während die App-UI-Komponente ausgewählt ist.

Farbschema mit verbundenem Mockup.

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 zwar 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 primären Schemas, um diese Entscheidungen zu erleichtern.

Da Tokens als Formatierungen erstellt werden, können wir auch den Wert der generierten Farbe festlegen. Klicken Sie in den Figma-Stilen auf die Primärfarbe des aktuellen Designs und wählen Sie rechts das Symbol „Stil bearbeiten“ aus.
Aktualisieren Sie die primäre Farbe in den Eigenschaften. Dies spiegelt sich in der Farbausgabe und der App-Benutzeroberfläche wider. 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 primär noch einmal. Hier wird der Kontrast geprüft und die Kontrastbewertung angezeigt.

Kontrast im Figma-Stildialogfeld.

8. Glückwunsch

Toll! 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 @MaterialDesign auf Twitter kontaktieren.

Weitere Designinhalte und Tutorials findest du auf youtube.com/MaterialDesign.