Support Centre

Verwendung von Farbkontrasten für Barrierefreiheit

Renée Meloche
Renée Meloche
  • Aktualisiert

Kontrast und Farbe spielen eine wichtige Rolle dabei, ob Ihr Design den Barrierefreiheitsstandards entspricht.

Natürlich möchten Sie für Ihr Design Farben wählen, die  gut zusammenpassen  und  visuelles Interesse wecken  , aber Sie möchten auch sicherstellen, dass Leser mit Sehbehinderungen oder Behinderungen  Ihr Design sehen und verstehen  können .

Wie wähle ich die richtigen Farben aus?

Wenn Sie Farben für Ihr Design auswählen, möchten Sie sicherstellen, dass diese auch eingehalten werden

  • Ergänzen Sie  sich gegenseitig

  • Erzählen Sie eine  visuelle Geschichte  , die  eine Verbindung zu Ihren Daten herstellt

  • Verwenden Sie Farben mit ausreichendem  Kontrast , um die Zugänglichkeit zu gewährleisten

Es gibt  zahlreiche Ressourcen  , die Ihnen den Einstieg in die Farbauswahl für Ihr Design erleichtern, darunter grundlegende  Farbräder  wie das folgende sowie solche, die monochromatische, analoge, komplementäre und kontrastierende Farben anzeigen:

Ein Satz mit drei Farbrädern.  Die erste mit der Bezeichnung „Primär“ zeigt die Farben Rot, Blau und Gelb an ihren jeweiligen Positionen auf dem Rad.  Das Sekundenrad mit der Aufschrift „Secondary“ zeigt die Farben Lila, Orange und Grün.  Das dritte Rad, „Tertiär“, zeigt die Farben Magenta, Vermillion, Bernstein, Chartreuse, Blaugrün und Violett.
 

Wie erstelle ich Designs mit zugänglichem Kontrast?

Der Kontrast wird durch die Helligkeit oder Lebendigkeit einer Farbe oder eines Elements im Vergleich zu einem anderen Element bestimmt.

Schwarzer Text auf weißem Hintergrund sorgt für einen  hohen Kontrast  . Derselbe Text auf einem weißen Hintergrund ist viel schwerer zu erkennen, wenn er eine hellere Farbe hat, wie z. B. Gelb, was ihn  kontrastarm  macht .

Zwei Textbeispiele auf weißem Hintergrund;  Auf jedem steht „Beispieltext“ in derselben Serifenschriftart, -größe und -stärke.  Auf der linken Seite ist der Text schwarz und gut lesbar.  Auf der rechten Seite ist der Text hellgelb und vor dem weißen Hintergrund schwer zu erkennen.

Elemente mit geringem Kontrast können schwer zu erkennen sein und Text mit geringem Kontrast kann schwer zu lesen sein. Ein hohes Kontrastverhältnis stellt sicher, dass Text lesbar und nicht-textliche Elemente wahrnehmbar sind.

Für Leser mit einer Sehbehinderung fällt es besonders schwer, kontrastarme Elemente zu lesen oder zu sehen, aber auch für andere beeinträchtigt dies die Lesbarkeit.

Tipps zum Schaffen von Kontrasten

  • Verwenden Sie dunkle Farben auf hellem Hintergrund oder helle Farben auf dunklem Hintergrund

  • Verwenden Sie einfarbige Muster im Hintergrund, um darüber liegende Elemente besser sichtbar zu machen

  • Führen Sie  die Barrierefreiheitsprüfung von Venngage  aus , um die Kontrastverhältnisse zu prüfen und Vorschläge anzuzeigen

Welche Tools im Venngage Editor können mir helfen, den Kontrast anzupassen?

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

Der Accessibility Checker  von Venngage ist der schnellste Weg, die Kontrastverhältnisse in Ihrem Design zu überprüfen und zu sehen, wie Sie sie anpassen können, um sie klarer zu machen.

Wählen Sie „Datei“ aus dem oberen Navigationsmenü  (über der oberen Symbolleiste) und dann „Barrierefreiheit prüfen“, um das Bedienfeld „Barrierefreiheit“ zu öffnen.

Elemente in Ihrem Design, die die Kontrastanforderungen der Web Content Accessibility Guidelines (WCAG)  nicht erfüllen, werden unter der Überschrift „Farbkontrast“ aufgeführt.

Die rechte Panel-Ansicht von Venngages Barrierefreiheitsprüfung mit nicht ausgeblendetem Abschnitt „Farbkontrast“.  Text im Design (nicht abgebildet) wird als Text mit unzureichendem Farbkontrast hervorgehoben und es gibt eine Aktualisierungsschaltfläche zum erneuten Scannen des Dokuments, wenn der Benutzer die Farben bearbeitet hat, um den Kontrast anzupassen.

Wählen Sie ein einzelnes Element  in Ihrem Design aus, etwa ein Symbol oder ein Textfeld, um zu  prüfen, ob es den Kontrastanforderungen entspricht  .

 

VENNGAGE LOGO

Interessiert an einem Abonnement? Vergleichen Sie unseren Plan.
 

War dieser Beitrag hilfreich?

6 von 11 fanden dies hilfreich

Haben Sie Fragen? Anfrage einreichen