Verwenden des hohen Farbkontrasts für ein barrierefreies Design
Eine hohe Absprungrate wird häufig durch die schlechte visuelle Erreichbarkeit einer Website verursacht. Wenn Zeichensätze zu klein sind oder kaum lesbar sind, wenn zu viele Ablenkungen oder zu wenig Leerraum vorhanden sind, wird dies von vielen Menschen nur gesagt verlassen Sie die Website ohne einen zweiten Gedanken.
Einer der häufigsten Gründe für die vorzeitige Aufgabe ist die schlechte Wahl Farbschemata, die die Lesbarkeit beeinträchtigen des Inhalts.
Laut Statistiken der WHO gibt es weltweit rund 285 Millionen sehbehinderte Menschen, von denen viele teilweise oder vollständig farbenblind sind. Sehbehinderte sehen die Farben anders Vermeidung eines niedrigen Farbkontrasts In unseren Designs ist es unvermeidlich, wenn wir unseren Kunden eine barrierefreie und benutzerfreundliche Website anbieten möchten.
Webstandards für Farbkontrast
Farbkontrastverhältnis misst den Kontrastunterschied zwischen zwei Farben. Je höher der Wert ist, desto einfacher ist es, das Objekt (Text, Bild, Grafik) im Vordergrund vom Hintergrund zu unterscheiden.
Farben können auf viele verschiedene Arten kontrastieren, beispielsweise in Farbton, Wert und Sättigung. Das Farbkontrastverhältnis wird nach einer Formel berechnet, die von W3C, der wichtigsten internationalen Normungsorganisation für das World Wide Web, bereitgestellt wird.
Es kann einen Wert zwischen annehmen 1: 1 (überhaupt kein kontrast, Vordergrund und Hintergrund haben die gleiche Farbe) und 21: 1 (der maximale Kontrast das gibt es nur zwischen schwarz und weiß).
W3Cs neueste Web Content Accessibility Guidelines (WCAG) 2.0 bietet Webentwicklern und Content-Erstellern Benchmarks für den Mindestwert (Stufe AA) und den erhöhten Wert (Stufe AAA) eines akzeptablen Farbkontrastverhältnisses.
Stufe AA erfordert mindestens 4,5: 1-Verhältnis für normalen Text, und 3: 1 für großen Text. Es ist viel einfacher, großen Text wie Untertitel zu lesen, weshalb er einen geringeren Farbkontrast benötigt.
Wenn Sie die Stufe AAA erreichen möchten, die die erweiterte Stufe ist, müssen Sie Ihr Farbschema sorgfältiger gestalten, da dies mindestens erforderlich ist 7: 1 Kontrastverhältnis für normalen Text, und 4,5: 1 für groß. Wenn ein Text Teil eines Logos oder eines Markennamens ist, ist auf beiden WCAG-Ebenen kein Mindestfarbkontrast erforderlich.
Wir können eine Website nur dann visuell aufrufen, wenn die Das Farbkontrastverhältnis zwischen jedem Vordergrundobjekt und seinem Hintergrund erreicht mindestens Stufe AA.
Vorteile eines hohen Farbkontrastverhältnisses
Durch eine bessere Lesbarkeit können Sie nicht nur Sehbehinderte, sondern auch Benutzer mit einbeziehen Personen, die Ihre Inhalte auf kleinen Bildschirmen lesen B. auf einem Smartphone oder einer Smartwatch, unter schlechte Lichtverhältnisse, und weiter Monitore mit geringerer Qualität.
Die Leute lesen auch schneller, wenn der Kontrast zwischen Text und Hintergrund höher ist. Daher dauert es wahrscheinlich mehr Zeit, bis sie sich mit dem Inhalt der Website langweilen.
Wenn Sie befürchten, dass die Anwendung eines höheren Kontrastverhältnisses einen negativen Einfluss auf die Ästhetik Ihres Designs hat, sollten Sie das Contrast Rebellion-Webprojekt überprüfen, das beweist, dass das Festhalten an den Regeln für das hohe Kontrastverhältnis an realen Beispielen bestehen kann in attraktiven und coolen Designs.
Apps zum Überprüfen des Farbkontrasts
Es gibt viele großartige kostenlose Tools im gesamten Web, mit denen Designer das Farbkontrastverhältnis ihrer Website überprüfen können.
Die einfachste Möglichkeit, Ihr Design auf Farbkontrast zu testen, besteht darin, die Hauptfarben entweder mit Photoshop oder einer geeigneten Browsererweiterung wie dieser für Firefox auszuwählen und die Werte in eine der unten aufgeführten Apps zu kopieren.
Das Wichtigste ist, dass Sie immer daran denken müssen Vergleichen Sie die Vordergrundfarbe, z. B. die Textfarbe, mit der Umgebung (Hintergrundfarbe).
1. WebAim Color Contrast Checker
WebAim (Web Accessibility In Mind) ist eine Organisation, die die Barrierefreiheit im Web fördert und Entwicklern einen einfachen, aber zuverlässigen Farbkontrastprüfer neben vielen anderen wichtigen Eingabehilfetools bietet, wie z. B. Wave, einer App zur Bewertung allgemeiner Zugänglichkeit, die Ihnen helfen kann die Zugänglichkeitsprobleme Ihrer Website schnell einschätzen.
Der Color Contrast Checker von WebAim zeigt es Ihnen an Wenn Ihre Farben die WCAG AA- und AAA-Tests bestehen, sowohl für normale als auch für große texte.
2. Snook-Farbkontrastprüfung
Jonathan Snook, derzeit als führender Front-End-Entwickler bei Shopify tätig, hostet seit über einem Jahrzehnt sein praktisches Tool zum Prüfen des Farbkontrasts. Snooks App ermöglicht es Ihnen Ändern Sie die HSL- und RGB-Werte der Vordergrund- und Hintergrundfarbe nacheinander mit praktische Bereichsschieberegler bis Sie ein Ergebnis erreichen, das den WCAG 2.0-Benchmarks entspricht.
CheckMyColours
CheckMyColours, das von Giovanni Scala erstellt wurde, ermöglicht das Überprüfen des Farbkontrastverhältnisses aller Vordergrund-Hintergrund-Farbkombinationen auf einer Live-Website.
Es rechnet aus Helligkeitskontrastverhältnis, Helligkeitsunterschied, und Farbunterschied, und liefert Ihnen einen vollständigen Bericht über die Ergebnisse. Der CheckMyColours-Bericht kann erheblich dazu beitragen, zu verstehen, wie Sie die visuelle Erreichbarkeit Ihrer Website verbessern können.
Farbschema-Designer
Color Scheme Designer ist kein Farbkontrastprüfer, sondern ein Werkzeug für Entwerfen kompletter Farbschemata.
Wir haben es in diese Sammlung aufgenommen, weil es eine Funktion hat, mit der Sie sehen können, wie Ihr Farbschema von Menschen mit unterschiedlichen Arten von Sehbehinderungen wahrgenommen wird. Sie können Ihre Farben auf Vollfarbenblindheit, Protanopie, Deuteranopie und viele andere Sehstörungen testen. Die App verfügt über eine neuere Version mit dem Namen Paletton, mit der sogar eine anspruchsvollere Vision-Simulation möglich ist (Sie können auch auf miese LED-Anzeigen oder schwache CRT-Anzeigen testen)..
W3C bietet Ihnen auch eine umfangreiche Liste mit Tools zur Bewertung der Web-Eingabehilfen, in der Sie viele andere Farbkontrast-Tools wie dieses hilfreiche Accessibility-Farbrad finden.
Tipps zum Erstellen von visuell zugänglichen Websites
Wenn Sie eine visuell zugängliche Website erstellen möchten, ist dies immer eine gute Idee Vermeiden Sie die alleinige Verwendung von Farbe, um Funktionalität oder Bedeutung zu vermitteln. Typische Beispiele hierfür sind Icons, die ihre Farbe aufgrund ihres aktuellen Status ändern.
Wenn es möglich ist, immer gestalten Sie zusätzliche visuelle Hinweise das hilft Menschen, die Farben im Verständnis der Funktionalität anders sehen.
Vergiss es nie Achten Sie besonders auf den Farbkontrast von Schaltflächen, Links und Menüs, da sie die Navigationsmittel auf Ihrer Website sind. Wenn Benutzer auf Ihrer Website nicht einfach navigieren können, gehen Sie schnell verloren. Zugängliche Farben für Aktionsschaltflächen sind auch Entscheidend für gute Konversionsraten.
Es ist eine gute Vorgehensweise, um das Farbkontrastverhältnis so früh wie möglich im Entwurfsprozess zu testen, da es schwierig sein wird, Ihren Kunden zu überzeugen, das Farbschema der Website später im Entwurfsprozess zu ändern.
Jetzt lesen: Praktischer Ansatz zur Auswahl des Website-Farbschemas
