Farbkontrast
Farbnutzung
Folgende Kriterien stammen aus der Checkliste:- Informationen werden nicht nur über Farbe vermittelt, sondern z.B. auch über Hervorhebungen.
Inhalte, die ausschließlich über Farben vermittelt werden, sind für blinde Nutzende gar nicht und für Nutzende mit Farbsehsschwäche nur schwer zugänglich.
Dementsprechend dürfen Inhalte nicht nur über Farben hervorgehoben werden, sondern müssen ebenfalls über weitere Mittel wie Einrückungen, Schriftgrößen und -stärken ausgezeichnet sein.
Auszeichnung von hervorgehobenen Informationen
Zusätzlich zu Farben und Schriftgrößen gibt es folgende Möglichkeiten, um Text hervorzuheben:
OPAL-Editor: Menüleiste: Format > Fett oder Kursiv oder Unterstrichen
OPAL-Editor: Einrückung: Dritte Zeile der Menüleiste > drittes Icon 'Einzug vergrößern'
HTML-Tags: Fett: <strong>, Kursiv: <em>
Für die Umsetzung der nachfolgenden Kriterien wird CSS-Code benötigt.
Einrückungen: Im Strukturelement das Attribut style ergänzen und dort über margin-left die Größe der Einrückung in Prozent oder em definieren.
<p style="margin-left: 2em">Diese Aussage ist eingerückt.</p>
BITV-Anforderungen:
Kontrast von Texten
Folgende Kriterien stammen aus der Checkliste:- Der Text-Hintergrund-Kontrast ist ausreichend: mindestens 4,5 : 1 für kleine Schrift und 3 : 1 für große Schrift.
Gute Kontraste sind wichtig, damit Texte von allen Nutzenden leicht gelesen werden können. Vor allem Menschen mit Seh- und Farbsehschwächen sind jedoch besonders auf einen ausreichenden Kontrast angewiesen.
Schriftgrößen, die größer als 24px bzw. 18pt sind, gelten als große Schrift. Für fett gedruckte Schriften gilt dies bereits ab 18,7px bzw. 14pt. Solch große Schriften haben ein Kontrastverhältnis von 3:1 zu erfüllen. Sämtliche Schriftgrößen unterhalb davon sind schwerer zu lesen und benötigen deshalb einen größeren Kontrast von 4,5:1.
Der Farbkontrast von Texten kann mit dem Colour Contrast Analyser (CCA) selbstständig überprüft werden. Weitere Informationen dazu befinden sich im Handbucheintrag zu Farbkontrastwerkzeuge
Auszeichnung von farbigen Texten
OPAL-Editor: Symbolleiste > Auswahl Icon für Textfarbe
Textfarben mit gutem Kontrast auswählen. Das sind in der Farbpalette von OPAL die dunklen Rot-, Violett- und Blautöne in der dritten Zeile. Für große Schriften können ebenfalls Grün und Orange aus der dritten Zeile verwendet werden.
Für die Umsetzung der nachfolgenden Kriterien wird CSS-Code benötigt.
Farbiger Text: Im Strukturelement das Attribut style ergänzen und in dem Element color einen Farbwert angeben. Dieser kann hexadezimal in der Form #ffffff oder ein RGB Wert in der Form rgb(255,255,255) sein.
<p style="color: #1f4180;">Das ist ein farbiger Satz.</p>
BITV-Anforderungen:
Kontrast von Schaltflächen und Grafiken
Folgende Kriterien stammen aus der Checkliste:- Der Nicht-Text-Kontrast zwischen benachbarten Flächen (z.B. zwischen der Schaltfläche und ihrem Hintergrund) ist ausreichend: mindestens 3:1.
Um grafische Bedienelemente und Grafiken, die Informationen vermitteln, wahrnehmen zu können, brauchen viele Menschen mit Sehbehinderungen und Farbsehschwächen gute Kontraste.
Dementsprechend müssen aneinandergrenzende Farben, beispielsweise die Farbe eines Elements zu ihrer Hintergrundfarbe, einen Kontrast von mindestens 3:1 haben. Bei Grafiken mit vielen verschiedenen farbigen Bereichen gilt dieses Kriterium nur für die Bereiche, die wahrgenommen werden müssen, damit der Inhalt verständlich ist.
Der Farbkontrast von Schaltflächen und Grafiken kann mit dem Colour Contrast Analyser (CCA) selbstständig überprüft werden. Weitere Informationen dazu befinden sich im Handbucheintrag zu Farbkontrastwerkzeuge
Auszeichnung von farbigen Schaltflächen und Grafiken
Für die Umsetzung der nachfolgenden Kriterien wird CSS-Code benötigt.
Hintergrundfarbe: Im Strukturelement das Attribut style ergänzen und in dem Element background-color einen Farbwert angeben. Dieser kann hexadezimal in der Form #ffffff oder ein RGB Wert in der Form rgb(255,255,255) sein.
<p style="background-color: #1f4180;">Der Hintergrund dieses Elements ist farbig.</p>