Farbe und Kontrast

Haben Sie schon einmal versucht, Text auf einem Bildschirm zu lesen, und fanden es aufgrund des Farbschemas schwer zu lesen oder hatten Sie Schwierigkeiten, den Bildschirm in einer sehr hellen oder schlechten Umgebung zu sehen? Oder haben Sie vielleicht ein dauerhafteres Farbsehproblem, wie etwa die geschätzten 300 Millionen Menschen mit Farbenblindheit oder die 253 Millionen Menschen mit eingeschränktem Sehvermögen?

Als Designer oder Entwickler müssen Sie verstehen, wie Menschen Farbe und Kontrast wahrnehmen, ob vorübergehend, situativ oder dauerhaft. Dies wird Ihnen helfen, ihre visuellen Anforderungen am besten zu erfüllen.

In diesem Modul lernen Sie grundlegende Grundlagen zu Farben und Kontrasten kennen.

Farbe wahrnehmen

Wussten Sie, dass Objekte keine Farbe haben, sondern die Wellenlänge des Lichts reflektieren? Wenn Sie Farbe sehen, empfangen und verarbeiten Ihre Augen diese Wellenlängen und wandeln sie in Farben um.

Wenn es um die digitale Zugänglichkeit geht, sprechen wir über diese Wellenlängen in Bezug auf Farbton, Sättigung und Helligkeit (HSL). Das HSL-Modell wurde als Alternative zum RGB-Farbmodell entwickelt und entspricht eher der Wahrnehmung von Farben durch Menschen.

Farbton ist eine qualitative Möglichkeit, eine Farbe wie Rot, Grün oder Blau zu beschreiben, wobei jeder Farbton einen bestimmten Punkt im Farbspektrum mit Werten zwischen 0 und 360 hat, wobei Rot mit 0, Grün mit 120 und Blau bei 240 liegt.

Die Sättigung ist die Intensität einer Farbe in Prozent zwischen 0 % und 100%. Eine Farbe mit voller Sättigung (100%) wäre sehr lebendig, während eine Farbe ohne Sättigung (0%) Graustufen oder Schwarz-Weiß wäre.

Die Helligkeit ist das helle oder dunkle Zeichen einer Farbe, gemessen in Prozent zwischen 0% (Schwarz) und 100% (Weiß).

Farbkontrast messen

Zur Unterstützung von Menschen mit verschiedenen Sehbehinderungen hat die WAI-Gruppe eine Farbkontrastformel entwickelt, damit genügend Kontrast zwischen Text und Hintergrund vorhanden ist. Bei Einhaltung dieser Farbkontrastverhältnisse können Menschen mit mäßig eingeschränktem Sehvermögen Text im Hintergrund lesen, ohne dass assistive Technologien zur Kontrastverbesserung erforderlich sind.

Sehen wir uns Bilder mit einer lebhaften Farbpalette an und vergleichen wir, wie dieses Bild für Menschen mit einer bestimmten Form von Farbenblindheit aussehen würde.

Auf dem Bild links ist Regenbogensand in den Farben lila, rot, orange, gelb, aquagrün, hellblau und dunkelblau zu sehen. Rechts ist ein helleres, mehrfarbiges Regenbogenmuster zu sehen.

Deuteranopie

Die Deuteranopie (auch Grünblindheit genannt) tritt bei 1% bis 5% der Männer und 0,35% bis 0,1% der Frauen auf.

Menschen mit Deuteranopie haben eine geringere Empfindlichkeit gegenüber grünem Licht. Dieser Farbenblindheitsfilter simuliert, wie diese Art von Farbenblindheit aussehen könnte.

Protanopie

Die Protanopie (allgemein als Rotblindheit bezeichnet) tritt bei 1,01 bis 1,08 % der Männer und 0,02 % bei 0,03 % der Frauen auf.

Menschen mit Protanopie haben eine reduzierte Empfindlichkeit gegenüber rotem Licht. Dieser Farbenblindheitsfilter simuliert, wie diese Art von Farbenblindheit aussehen könnte.

Achromatopsie oder Monochromatismus

Achromatopsie oder Monochromatismus (oder vollständige Farbenblindheit) tritt sehr, sehr selten auf.

Menschen mit Achromatopsie oder Monochromatismus haben fast keinen Wahrnehmung von rotem, grünem oder blauem Licht. Dieser Farbenblindheitsfilter simuliert, wie diese Art von Farbenblindheit aussehen könnte.

Farbkontrast berechnen

Die Farbkontrastformel verwendet die relative Leuchtdichte von Farben zur Bestimmung des Kontrasts. Diese kann zwischen 1 und 21 liegen. Diese Formel wird oft mit [color value]:1 abgekürzt. Reines Schwarz zu reinem Weiß hat beispielsweise mit 21:1 das größte Farbkontrastverhältnis.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Text in normaler Größe, einschließlich Textbildern, muss ein Farbkontrastverhältnis von 4.5:1 haben, damit die WCAG-Mindestanforderungen an Farben erfüllt werden. Großer Text und wichtige Symbole müssen ein Farbkontrastverhältnis von 3:1 haben. Großer Text wird durch eine Fettformatierung von mindestens 18 pt / 24 px oder 14 pt/18,5 px fett gekennzeichnet. Für Logos und dekorative Elemente gilt die Anforderung an Farbkontraste nicht.

Glücklicherweise sind keine fortgeschrittenen Berechnungen erforderlich, da es viele Tools gibt, die die Farbkontrastberechnungen für Sie vornehmen. Tools wie Adobe Color, Color Contrast Analyzer, Leonardo und die Farbauswahl von Chrome DevTools liefern Ihnen schnell Informationen zu den Farbkontrastverhältnissen und machen Vorschläge zum Erstellen möglichst inklusiver Farbpaare und Paletten.

Farbe verwenden

Ohne gute Farbkontraste sind Wörter, Symbole und andere grafische Elemente schwer zu finden und das Design kann schnell unzugänglich werden. Es ist aber auch wichtig, darauf zu achten, wie die Farbe auf dem Bildschirm verwendet wird. Farbe allein kann nicht verwendet werden, um Informationen und Aktionen zu vermitteln oder ein visuelles Element zu unterscheiden.

Wenn Sie beispielsweise auf die grüne Schaltfläche klicken, um fortzufahren, aber zusätzliche Inhalte oder IDs für die Schaltfläche weglassen, können Personen mit bestimmten Farbenblindheit nur schwer erkennen, auf welche Schaltfläche sie klicken sollen. Ebenso werden in vielen Grafiken, Diagrammen und Tabellen Informationen allein durch Farbe vermittelt. Das Hinzufügen einer anderen Kennung, z. B. eines Musters, Textes oder Symbols, ist wichtig, damit Nutzer den Inhalt verstehen können.

Die Überprüfung Ihrer digitalen Produkte in Graustufen ist eine gute Möglichkeit, schnell potenzielle Farbprobleme zu erkennen.

Farbfokussierte Medienabfragen

Neben der Überprüfung der Farbkontrastverhältnisse und der Verwendung von Farben auf Ihrem Bildschirm sollten Sie auch die immer beliebteren und unterstützten Medienabfragen verwenden, mit denen Nutzer mehr Kontrolle darüber haben, was auf dem Bildschirm angezeigt wird.

Sie können beispielsweise mit der Medienabfrage @prefers-color-scheme ein dunkles Design erstellen, das für Personen mit Fotophobie oder Lichtempfindlichkeit hilfreich sein kann. Sie können auch mit @prefers-contrast ein Design mit hohem Kontrast erstellen, das Personen mit Farbmängeln und Kontrastempfindlichkeit unterstützt.

Bevorzugt Farbschema

Mit der Medienabfrage @prefers-color-scheme können Nutzer eine helle oder dunkle Version der besuchten Website oder App auswählen. Sie können diese Designänderung in Aktion sehen, indem Sie die Einstellungen für „Hell/Dunkel“ ändern und einen Browser aufrufen, der diese Medienabfrage unterstützt. Weitere Informationen zum dunklen Modus finden Sie in der Anleitung für Mac und Windows.

Bevorzugt Kontrast

Mit der Medienabfrage @prefers-contrast wird in den Betriebssystemeinstellungen des Nutzers geprüft, ob der hohe Kontrast aktiviert oder deaktiviert ist. Sie können die Änderung des Designs sehen, wenn Sie die Einstellungen für die Kontrasteinstellungen ändern und einen Browser aufrufen, der diese Medienabfrage unterstützt (die Einstellungen für den Mac- und Windows-Kontrastmodus).

Medienabfragen überlagern

Sie können mehrere Medienabfragen mit Farbfokus verwenden, um Ihren Nutzern noch mehr Auswahlmöglichkeiten zu geben. In diesem Beispiel haben wir @prefers-color-scheme und @prefers-contrast gestapelt.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Farbe und Kontrast