wake-up-neo.com

Scheitern Farbunterschiede, die auch große Helligkeitsunterschiede aufweisen, WCAG 2.0 SC 1.4.1: Verwendung von Farbe?

Ich bin auf ein Rätsel mit WCAG 2.0-Erfolgskriterien 1.4.1: Verwendung von Farbe gestoßen, während ich ein internes Projekt auf WCAG Level AA-Konformität geprüft habe.

Bei meiner Bewertung bewerte ich Steuerelemente, die einen farbbasierten Indikator liefern, der in Bezug auf die Helligkeit einen starken Kontrast zu den umgebenden Elementen aufweist . Diese Steuerelemente sind die folgenden (Screenshots stammen von Bootstrap):

Allen diesen Elementen wurden auch verschiedene Aria-Attribute hinzugefügt (z. B. Aria-ausgewählt), aber das ist für jemanden, der keine unterstützende Technologie verwendet, von geringer Relevanz.

The Crunch: Bestehen oder scheitern diese Erfolgskriterien 1.4.1: Verwendung von Farbe?

Reicht dies aus, um anzugeben, was die aktive Seite ist und was der aktive Filter ist?

Nach dem Buchstaben haben diese nur eine andere Farbe, also denke diese scheitern. Es ist wie das angegebene Beispiel für "Marys Verkäufe sind in Rot, Toms sind in Blau", Nur dass es nicht in Weiß ausgewählt und in Blau ausgewählt ist.

Allerdings Diese Elemente weisen ebenfalls massive Kontrastunterschiede auf, und selbst jemand, der vollständig farbenblind ist, wird feststellen, dass ein Steuerelement abgedunkelt ist. Das befriedigt alle außer:

  • Personen, die nur Text, eingeschränkte Farben oder monochrome Anzeigen verwenden, können möglicherweise nicht auf farbabhängige Informationen zugreifen.

... aber ich bin mir nicht sicher, was diese Leute wirklich sehen würden und was für sie nützlich wäre, wenn sowieso viele Informationen verworfen würden.

Müssen wir der ausgewählten Seite und dem ausgewählten Filter mehr hinzufügen, z. B. einen Pfeil oder einen Punkt, oder eine andere Überschrift, die z. "Seite 1:" oder "Zu tun:", die einen offensichtlichen Indikator dafür enthalten, was Sie sehen, oder reicht es aus, diesen Unterschied als Indikator zu haben?

4
doppelgreener

Eine schnelle Google-Suche führte mich zu diesem informativen Artikel über Farbenblindheit . Vielleicht möchten Sie einen Blick auf UX Question werfen, Testen auf farbenblinde Personen Dies gibt Ihnen Ressourcen, um sicherzustellen, dass Sie sich um Farbmängel kümmern. Zusätzlich zu dieser Frage gibt es chrome -Erweiterungen (wie Spektrum , siehe ), um Farbmängel zu simulieren.

Die Grundidee besteht nicht darin, Farbe als einziges Mittel zur Unterscheidung zu verwenden. Dieses Problem wird noch verstärkt, wenn verschiedene Farben verwendet werden, um eine Unterscheidung zu zeigen. Bei Farbmängeln kann sich mehr als eine Farbe auf Graustufen reduzieren und es daher schwierig machen, den Unterschied zu erkennen, den Sie zeigen möchten.

Wenn Sie eine einzelne Farbe zusammen mit Weiß verwenden, wird dies auf eine Graustufe reduziert, die den Benutzern weiterhin visuelle Hinweise bietet, um zwischen den Elementen auf Ihrer Website zu unterscheiden. Wenn Sie sich in Zukunft für eine andere Farbe entschieden haben, z. B. deaktivierte Links, sekundäre Schaltflächen usw., müssen Sie sicherstellen, dass die von Ihnen verwendeten aktiven und deaktivierten Farben nicht auf den gleichen Graustufenwert reduziert werden. Die oben genannten Tools helfen Ihnen dabei, daraus zu schließen.

Derzeit sollte es mit einer einzelnen Farbpalette kein Problem geben.

3
Sol

Da der Kontrastunterschied für Benutzer mit normalen Bildschirmen hoch ist, sollte das von Ihnen verwendete Format meiner Meinung nach in Ordnung sein.

Wenn Sie vollständige Zugänglichkeit wünschen, für Nur-Text-Anzeigen benötigen Sie wahrscheinlich eine Nur-Text-Formatierung wie [Active] Inactive Inactive, für Audio-Lesegeräte (blinde Benutzer) benötigen Sie möglicherweise Text mit der Aufschrift "Option 1 ist aktiv" (möglicherweise unter Verwendung eines 0-Bilds mit alt Text).

0
Danny Varod