Support Centre

Überprüfen des Farbkontrastverhältnisses

Renée Meloche
Renée Meloche
  • Aktualisiert

Verfügbar für die folgenden Venngage-Abonnementpläne: Kostenlos, Premium, Business und Enterprise.

Das   Farbkontrastverhältnis  sagt Ihnen, ob Benutzer mit Sehbehinderungen oder anderen Behinderungen die Elemente in Ihrem Design leicht erkennen und interpretieren können  . 

Klicken Sie bei ausgewähltem Element auf das Farbmenü in der oberen Symbolleiste.

Eine Teilansicht einer Leinwand im Venngage-Editor (obere linke Ecke).  Ein Benutzer klickt auf das dunkelgrüne Symbol eines Buches über einer dunkelblauen Kopfzeile auf einer Design-Leinwand.  Wenn das Symbol ausgewählt ist, erscheint sein Farbmenü in der oberen Symbolleiste.  Der Benutzer klickt auf das Farbmenü und ruft das Farbauswahlfeld auf.  Am unteren Rand des Bedienfelds werden die Abschnittsüberschrift „Kontrastverhältnis“ sowie die Elementbezeichnung („Grafik“) und ein Kontrastverhältniswert von 1,8:1 angezeigt, der durch ein Rot als nicht den „AA“-Zugänglichkeitsanforderungen entsprechend gekennzeichnet ist 'x'-Symbol.

 

Unten im Farbmenüfeld zeigt ein Abschnitt mit der Überschrift „  Kontrastverhältnis  “ das Kontrastverhältnis des Elements im Vergleich zu seinem Hintergrund an.

Ein rotes „x“ erscheint neben der Elementbezeichnung (z. B. „Grafik“, „Normaler Text“, „Kopfzeile“ usw.),  wenn das Verhältnis die Barrierefreiheitsanforderungen nicht erfüllt  , und ein grünes Häkchen, wenn dies der Fall ist.

Ein Benutzer klickt auf das Infosymbol (ein „i“ in einem Kreis) neben der Überschrift „Kontrastverhältnis“ unten im Farbwähler.  Es erscheint ein schwarzes Infofeld.  In der Box steht: „Um die Barrierefreiheitsstandards WCAG 2.1 AA zu erreichen, stellen Sie sicher, dass Ihre Designs die folgenden Farbkontrastschwellen erfüllen: Normaler Text: 4:5:1;  Großer Text (mindestens 19 Pixel und fett oder mindestens 24 Pixel und normal): 3:1;  Aussagekräftige Grafiken: 3:1.'  Ein Link unten lautet „Erfahren Sie mehr über Farbkontrast“.

Klicken Sie auf das „Info“-Symbol  neben der Überschrift „Kontrastverhältnis“, um weitere Informationen darüber zu erhalten, welches Kontrastverhältnis den WCAG-Anforderungen entspricht.

Eine Teilansicht einer Leinwand im Venngage-Editor (obere linke Ecke).  Auf der Design-Leinwand wird ein Element ausgewählt und das Farbauswahlmenü ist geöffnet, das die Teilansicht des Designs überlagert.  Ein Benutzer klickt in den Farbwähler, der auf Dunkelgrün (HEX 245561) eingestellt ist und die Farbe in Hellblau (HEX 3AB3D2) ändert.  Unten im Bedienfeld erscheint unter der Abschnittsüberschrift „Kontrastverhältnis“ die Elementbezeichnung „Grafik“ und ein Wert für das Kontrastverhältnis.  Der Kontrastverhältniswert der dunkelgrünen Farbe ist auf „1,8:1“ eingestellt, was durch ein rotes „x“-Symbol als nicht den „AA“-Zugänglichkeitsanforderungen entsprechend gekennzeichnet wird.  Wenn der Benutzer die Farbe in Hellblau ändert, ändert sich der Wert des Kontrastverhältnisses auf 6,08:1 und die Barrierefreiheitsbewertung „AA“ ändert sich in „Erfüllung der Barrierefreiheitsanforderungen“.

Ändern Sie die Farbe des Elements  mit dem Picker oder durch Eingabe des  HEX-Codewerts  . Das Kontrastverhältnis im Farbfeld wird zusammen mit der Anforderungsprüfung automatisch aktualisiert.

Was bedeuten die Farbkontraste („AA“, „AAA“)?

Der Accessibility Checker von Venngage bewertet den Farbkontrast gemäß den  WCAG-Anforderungen  :

  • Level A  ist das Mindestniveau.

  • Level AA  umfasst alle Level A- und AA-Anforderungen.

    • Dies ist die Anforderung, die Venngage anwendet, um alle Elemente in einem barrierefreien Design zu bewerten, das im aktualisierten Editor erstellt wurde.
    • Viele Organisationen streben danach, Level AA zu erreichen; Dies dient als Grundlage für die gesetzlich festgelegte Anforderung zur Einhaltung von Barrierefreiheitsstandards.

  • Stufe AAA  umfasst alle Anforderungen der Stufen A, AA und AAA und erfüllt die höchste Stufe der Standardanforderungen.

 

 

VENNGAGE LOGO

Interessiert an einem Abonnement? Vergleichen Sie unseren Plan.
 

War dieser Beitrag hilfreich?

3 von 4 fanden dies hilfreich

Haben Sie Fragen? Anfrage einreichen