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.
![Ein Auge, das auf das Farbrad schaut.](https://web.dev/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=0000&hl=de)
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.
![Ursprünglicher Regenbogensand](https://web.dev/static/learn/accessibility/color-contrast/image/original-rainbow-sand-81e58797919d3.jpg?authuser=0000&hl=de)
![Ursprüngliches Regenbogenmuster.](https://web.dev/static/learn/accessibility/color-contrast/image/original-rainbow-pattern-fe7465290afb8.jpg?authuser=0000&hl=de)
Das Bild links zeigt Regenbogensand mit lila, rot, orange, gelb, hellblau, hellblau und dunkelblau. Rechts ist ein helleres, mehrfarbiges Regenbogenmuster zu sehen.
Deuteranopie
![Regenbogensand, wie es von einer Person mit Deuteranopie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=0000&hl=de)
![Regenbogenmuster, wie es von einer Person mit Deuteranopie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=0000&hl=de)
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
![Regenbogensand, wie es von einer Person mit Protanopie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=0000&hl=de)
![Regenbogenmuster, wie es von einer Person mit Protanopie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=0000&hl=de)
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
![Regenbogensand, wie es von einer Person mit Achromatopsie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=0000&hl=de)
![Regenbogenmuster, wie es von einer Person mit Achromatopsie gesehen wird.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=0000&hl=de)
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
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
![Benutzeroberfläche für Mac-Einstellungen](https://web.dev/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=0000&hl=de)
![Codebeispiel im hellen Modus.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=0000&hl=de)
![Codebeispiel im dunklen Modus.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=0000&hl=de)
Kontrast wird bevorzugt
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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).
![Codebeispiel im hellen Modus ohne Kontrasteinstellung.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=0000&hl=de)
![Codebeispiel für den dunklen Modus mit einer Einstellung mit hohem Kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=0000&hl=de)
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.
![Heller Modus, normaler Kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=0000&hl=de)
![Dunkler Modus, normaler Kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=0000&hl=de)
![Heller Modus, hoher Kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=0000&hl=de)
![Dunkler Modus, hoher Kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=0000&hl=de)
Wissen testen
Testen Sie Ihr Wissen über Farbe und Kontrast
Die Farbe allein ist kein ausreichender Bezeichner für die Dokumentation. Wie können die Lesenden noch UI-Elemente erkennen?