Farbe und Kontrast

Haben Sie schon einmal versucht, einen Text auf einem Bildschirm zu lesen, Farbschema angepasst werden oder es schwierig war, den Bildschirm in einer sehr hellen schlechten Lichtverhältnissen? Oder Sie haben eine dauerhafte Farbe, Sehprobleme, wie etwa die geschätzten 300 Millionen Menschen mit Farbenblindheit oder die 253 Millionen Menschen mit eingeschränktem Sehvermögen?

Als Designschaffende oder Entwickelnde müssen Sie verstehen, wie Menschen Farbe wahrnehmen. und im Gegensatz dazu temporär, situativ oder dauerhaft. Das hilft Ihnen, visuelle Anforderungen am besten erfüllt.

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

Wahrgenommene Farbe

Wussten Sie, dass Objekte keine Farbe besitzen, sondern Wellenlängen Licht? Wenn Sie Farbe sehen, empfangen und verarbeiten Ihre Augen diese Wellenlängen und konvertieren Sie sie in Farben.

Wenn es um digitale Barrierefreiheit geht, sprechen wir über diese Wellenlängen Farbton, Sättigung und Helligkeit (HSL). Das HSL-Modell wurde als dem RGB-Farbmodell entsprechen und eher dem Farbe wahrnehmen.

Mit Farbton wird eine Farbe qualitativ beschrieben, z. B. Rot, Grün oder Blau, wobei jeder Farbton einen bestimmten Punkt im Farbspektrum mit Werten hat, die von 0 bis 360, wobei Rot bei 0, Grün bei 120 und Blau bei 240 ist.

Die Sättigung ist die Intensität einer Farbe in Prozent unter 0 %. auf 100 % erhöhen. Eine Farbe mit voller Sättigung (100%) wäre sehr lebhaft, während eine Farbe ohne Sättigung (0%) wäre Grau- oder Schwarz-Weiß.

Helligkeit ist das helle oder dunkle Zeichen einer Farbe, gemessen in Prozent von 0% (Schwarz) bis 100% (Weiß) liegt.

Farbkontrast messen

Zur Unterstützung von Menschen mit verschiedenen Sehbeeinträchtigungen hat die WAI-Gruppe eine Farbkontrastformel zu genügend Kontrast vorhanden zwischen Text und Hintergrund. Wenn diese Farbkontrastverhältnisse können auch Personen mit mäßig eingeschränktem Sehvermögen Text im Hintergrund lesen. ohne dass kontrastverbessernde Hilfstechnologien erforderlich sind.

Sehen wir uns Bilder mit einer lebendigen Farbpalette an und vergleichen, wie dieses Bild Menschen mit bestimmten Formen von Farbenblindheit.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Das Bild links zeigt Regenbogensand mit lila, rot, orange, gelb, hellblau, hellblau und dunkelblau. Rechts ist ein helleres, mehrfarbiges Regenbogenmuster zu sehen.

Deuteranopie

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

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

Protanopie

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

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

Achromatopsie oder Monochromatismus

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

Menschen mit Achromatopsie oder Monochromatismus haben fast keine Wahrnehmung von Rot, grünes oder blaues Licht leuchten. Dieser Filter für die Farbblindheit simuliert, wie Farbenblindheit aussehen könnte.

Farbkontrast berechnen

Die Farbkontrastformel verwendet die relative Leuchtdichte von Farben, um den Kontrast festzulegen, der zwischen 1 und 21 liegen kann. Diese Formel wird oft mit [color value]:1 abgekürzt. Zum Beispiel wird reines Schwarz gegen reines Schwarz Weiß hat 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 haben von 4.5:1, um den WCAG-Mindestanforderungen an Farben. Großer Text und wichtige Symbole müssen ein Farbkontrastverhältnis von 3:1 haben. Ein großer Text hat eine Auflösung von mindestens 18 pt, 24 px oder 14 pt. 18,5 Pixel fett formatiert. Logos und dekorative Elemente sind von diesen Farben ausgenommen Kontrastanforderungen.

Zum Glück ist keine Mathematik für Fortgeschrittene erforderlich, da es viele Tools gibt, die die Berechnungen für den Farbkontrast. Tools wie Adobe Color Color Contrast Analyzer, Leonardo und Farbauswahl in den Entwicklertools von Chrome kann Ihnen schnell die Farbkontrastverhältnisse und Vorschläge machen, Farbpaare und -paletten zu erstellen, die möglichst allen Menschen entsprechen.

Farbe verwenden

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

Wenn Sie beispielsweise sagen „Klicken Sie auf die grüne Schaltfläche, um fortzufahren“, aber ohne zusätzliche Inhalte oder Kennungen für die Schaltfläche, wäre es Menschen mit farbenblinden Menschen fällt es schwer, klicken. Ebenso nutzen viele Grafiken, Diagramme und Tabellen allein, um zu vermitteln, Informationen. Das Hinzufügen einer weiteren Kennung, wie ein Muster, Text oder ein Symbol, damit Nutzer den Inhalt verstehen.

Durch die Überprüfung Ihrer digitalen Produkte in Graustufen lassen sich potenzielle Farbprobleme schnell erkennen.

Medienabfragen mit Farbfokus

Neben der Überprüfung der Farbkontrastverhältnisse und der Verwendung von Farben auf Ihrem Bildschirm können Sie die immer beliebter werdenden Medienabfragen, die den Nutzern was auf dem Bildschirm angezeigt wird.

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

Bevorzugt ein Farbschema

Mit der Medienabfrage @prefers-color-scheme können Nutzer eine Lampe oder Version der besuchten Website oder App im dunklen Design. Hier sehen Sie Design ändern, indem Sie die Einstellungen für Hell und Dunkel ändern und zu einem Browser wechseln, der diese Medienabfrage unterstützt. Lesen Sie die Mac und Anleitung für Windows für den dunklen Modus

</ph>

Hellen und dunklen Modus vergleichen

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Kontrast wird bevorzugt

Die @prefers-contrast Die Medienabfrage prüft in den Betriebssystemeinstellungen des Nutzers, ob hoher Kontrast aktiviert ist oder aus. Sie können diese Designänderung in Aktion sehen, wenn Sie den Kontrast ändern Einstellungen und navigieren Sie zu einem Browser, der diese Medienabfrage unterstützt. (Kontrastmodus-Einstellungen für Mac und Windows).

Vergleichen Sie normale und hohe Kontraste.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Medienabfragen überlagern

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

Vergleichen Sie Farbe und Kontrast.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Wissen testen

Testen Sie Ihr Wissen über Farbe und Kontrast