Farbe und Kontrast

Haben Sie schon einmal versucht, Text auf einem Bildschirm zu lesen, und es war aufgrund des Farbschemas schwierig oder Sie hatten Probleme, den Bildschirm in einer sehr hellen oder dunklen Umgebung zu sehen? Vielleicht haben Sie aber auch ein dauerhaftes Problem mit dem Farbsehen, wie die geschätzten 300 Millionen Menschen mit Farbenblindheit oder die 253 Millionen Menschen mit Sehschwäche.

Als Designer oder Entwickler müssen Sie verstehen, wie Menschen Farben und Kontraste wahrnehmen, sei es vorübergehend, situationsbezogen oder dauerhaft. So können Sie ihre visuellen Bedürfnisse am besten berücksichtigen.

In diesem Modul werden einige Grundlagen zu barrierefreien Farben und Kontrasten vorgestellt.

Farben wahrnehmen

Wusstest du, dass Objekte keine Farbe haben, sondern Wellenlängen des Lichts reflektieren? Wenn Sie Farben sehen, nehmen Ihre Augen diese Wellenlängen auf, verarbeiten sie und wandeln sie in Farben um.

Bei der digitalen Barrierefreiheit sprechen wir von diesen 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 menschlichen Farbwahrnehmung.

Der Farbton ist eine qualitative Beschreibung einer Farbe, z. B. Rot, Grün oder Blau. Jeder Farbton hat einen bestimmten Punkt im Farbspektrum mit Werten zwischen 0 und 360, wobei Rot bei 0, Grün bei 120 und Blau bei 240 liegt.

Die Sättigung ist die Intensität einer Farbe, gemessen 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%) in Graustufen oder Schwarz-Weiß dargestellt würde.

Die Helligkeit einer Farbe wird in Prozent gemessen und reicht von 0% (Schwarz) bis 100% (Weiß).

Farbkontrast messen

Um Menschen mit verschiedenen Sehbehinderungen zu unterstützen, hat die WAI-Gruppe eine Formel für den Farbkontrast entwickelt, um sicherzustellen, dass genügend Kontrast zwischen dem Text und seinem Hintergrund vorhanden ist. Wenn diese Farbkontrastverhältnisse eingehalten werden, können Menschen mit mäßig eingeschränktem Sehvermögen Text auf dem Hintergrund lesen, ohne dass sie kontrastverstärkende Hilfstechnologien benötigen.

Sehen Sie sich Bilder mit einer lebendigen Farbpalette an und vergleichen Sie, wie das Bild für Menschen mit bestimmten Formen von Farbenblindheit aussehen würde.

Links ist ein Bild von Regenbogensand mit den Farben Lila, Rot, Orange, Gelb, Aquagrün, Hellblau und Dunkelblau zu sehen. Rechts ist ein helleres, mehrfarbiges Regenbogenmuster zu sehen.

Deuteranopie

Deuteranopie (allgemein als Grünblindheit bekannt) tritt bei 1% bis 5% der Männer und bei 0,35% bis 0,1% der Frauen auf.

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

Protanopie

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

Menschen mit Protanopie haben eine geringere Empfindlichkeit gegenüber rotem Licht. Dieser Filter simuliert, wie diese Art von Farbenfehlsichtigkeit aussehen könnte.

Achromatopsie oder Monochromasie

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

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

Farbkontrast berechnen

In der Formel für den Farbkontrast wird die relative Luminanz von Farben verwendet, um den Kontrast zu bestimmen, der zwischen 1 und 21 liegen kann. Diese Formel wird oft als [color value]:1 abgekürzt. Reines Schwarz auf reinem Weiß hat beispielsweise das größte Farbkontrastverhältnis von 21:1.

(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 Text in Bildern, muss ein Farbkontrastverhältnis von 4.5:1 aufweisen, um die WCAG-Mindestanforderungen für Farbe zu erfüllen. Großer Text und wichtige Symbole müssen ein Farbkontrastverhältnis von 3:1 aufweisen. Großer Text hat eine Schriftgröße von mindestens 18 pt / 24 px oder 14 pt / 18,5 px bei fetter Schrift. Logos und dekorative Elemente sind von diesen Anforderungen an den Farbkontrast ausgenommen.

Glücklicherweise sind keine komplizierten Berechnungen erforderlich, da es viele Tools gibt, die die Farbkontrastberechnungen für Sie durchführen. Mit Tools wie Adobe Color, Color Contrast Analyzer, Leonardo und der Farbauswahl der Chrome-Entwicklertools können Sie schnell die Farbkontrastverhältnisse ermitteln und Vorschläge für die Erstellung der inklusivsten Farbkombinationen und ‑paletten erhalten.

Farben verwenden

Ohne einen guten Farbkontrast sind Wörter, Symbole und andere grafische Elemente schwer zu erkennen und das Design kann schnell unzugänglich werden. Es ist jedoch auch wichtig, darauf zu achten, wie die Farbe auf dem Bildschirm verwendet wird, da Sie Informationen, Aktionen oder visuelle Elemente nicht nur durch Farbe vermitteln oder unterscheiden können.

Wenn Sie beispielsweise sagen: Klicken Sie zum Fortfahren auf die grüne Schaltfläche., aber keine zusätzlichen Inhalte oder Kennzeichnungen für die Schaltfläche angeben, ist es für Menschen mit bestimmten Arten von Farbenblindheit schwierig, zu wissen, auf welche Schaltfläche sie klicken müssen. Auch in vielen Grafiken, Diagrammen und Tabellen werden Informationen nur durch Farben vermittelt. Es ist wichtig, eine weitere Kennung wie ein Muster, Text oder Symbol hinzuzufügen, damit Nutzer die Inhalte besser verstehen können.

Wenn Sie Ihre digitalen Produkte in Graustufen ansehen, können Sie potenzielle Farbprobleme schnell erkennen.

Medienabfragen mit Fokus auf Farben

Neben der Überprüfung von Farbkontrastverhältnissen und der Verwendung von Farben auf dem Bildschirm sollten Sie die immer beliebter werdenden und unterstützten Media-Anfragen verwenden, die den Nutzern mehr Kontrolle darüber geben, was auf dem Bildschirm angezeigt wird.

Mit der Media-Anfrage @prefers-color-scheme können Sie beispielsweise ein dunkles Design erstellen, das für Menschen mit Fotophobie oder Lichtempfindlichkeit hilfreich sein kann. Sie können auch ein kontrastreiches Design mit @prefers-contrast erstellen, das Menschen mit Farbsehschwäche und Kontrastempfindlichkeit unterstützt.

Bevorzugtes Farbschema

Mit der Medienabfrage @prefers-color-scheme können Nutzer eine helle oder dunkle Version der Website oder App auswählen, die sie besuchen. Sie können sich ansehen, wie sich das Design ändert, indem Sie die Einstellungen für das helle oder dunkle Design ändern und einen Browser aufrufen, der diese Media-Anfrage unterstützt. Mac und Anleitung für den dunklen Modus für Windows

Hellen und dunklen Modus vergleichen

:

:

Bevorzugt Kontrast

Die Media-Anfrage @prefers-contrast prüft die Betriebssystemeinstellungen des Nutzers, um festzustellen, ob der Modus mit hohem Kontrast aktiviert oder deaktiviert ist. Sie können diese Designänderung in Aktion sehen, indem Sie Ihre Kontrasteinstellungen ändern und einen Browser aufrufen, der diese Media-Anfrage unterstützt (Mac- und Windows-Kontrastmoduseinstellungen).

Normalen und hohen Kontrast vergleichen

Medienabfragen für Ebenen

Sie können mehrere Media-Anfragen verwenden, die sich auf Farben konzentrieren, um Ihren Nutzern noch mehr Auswahlmöglichkeiten zu bieten. In diesem Beispiel haben wir @prefers-color-scheme und @prefers-contrast gestapelt.

Vergleichen Sie sowohl Farbe als auch Kontrast.