webentwicklung-frage-antwort-db.com.de

Kontrast eines Meldungsfeldes

Ich bin gerade dabei, die Farben unserer App zu aktualisieren und sie so konsistent wie möglich zu gestalten, versuche aber auch, sie mit der WCAG AA-Bewertung für Kontrast in Einklang zu bringen.

Ein Bereich, für den ich mir nicht sicher bin, ob ich dies tun muss, ist eine Warn-/Infomeldung, die beispielsweise oben in einem Formular angezeigt wird, um Benutzern Informationen zu etwaigen Warnungen oder Fehlern zu geben.

(warning message

In diesem Beispiel hat der Text einen AA-Kontrast von 7.09:1, aber das gelbe Kästchen selbst ist nur 1.39:1 und schlägt daher fehl, jedoch ist die enthaltende Box keine Komponente oder irgendetwas, mit dem ein Benutzer direkt interagieren muss. Muss ich mich also tatsächlich um den Kontrast hier kümmern? Aus gestalterischer Sicht würde ich eine hellere Farbe bevorzugen (und auch bei den anderen Nachrichtentypen), bin mir aber nur des Kontrasts bewusst

1
PaReeOhNos

Das Beispiel, das Sie gegeben haben, ist vollkommen akzeptabel.

Der Farbkontrast gilt für Kontrolletiketten, Text usw. Der Kontrast von dekorativen Teilen ist nicht wichtig (es sei denn, Sie fügen Text in ein Bild wie ein verrückter Junge ein. In diesem Fall spielt der Kontrast hier eine Rolle.)

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Die Informationen hier sollten Sie durch das führen, was Sie berücksichtigen müssen, einige Szenarien unten.

Die goldene Regel lautet: Wenn Sie es lesen können, stellen Sie den Kontrast hoch. Wenn Text und Bilder ohne Hintergrundfarbe sinnvoll sind, spielt der Kontrast für den Hintergrund keine Rolle (dh wenn Sie den Hintergrund vollständig entfernen, werden Text und Bild vollständig entfernt noch Sinn machen).

2
Graham Ritchie

Sie können einen Rahmenstrich in dunkler Farbe um das Feld setzen, um den Kontrast auf 3: 1 zu erhöhen (Mindestanforderung für SC 1.4.11 https: //www.w3)). org/WAI/WCAG21/Understanding/non-text-kontrast.html )

Wenn sich in der Box interaktive Symbole wie das Symbol "Entlassen" oder das Symbol "Erweitern/Reduzieren" befinden, stellen Sie sicher, dass der Kontrast mindestens 3: 1 beträgt. Viel Glück bei Ihrer Designüberholung.

2
Sooraj MV