Techniken für WCAG 2.0

Zum Inhalt

-

G17: Sicherstellen, dass es ein Kontrastverhältnis von mindestens 7:1 zwischen Text (und Bildern eines Textes) und dem Hintergrund hinter dem Text gibt

Anwendbarkeit

Jede Technik, die visuellen Output erzeugt.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist sicherzustellen, dass Benutzer Text, der vor einem Hintergrund präsentiert wird, lesen können. Diese Technik geht über die 4,5:1 Kontrast-Technik hinaus, um einen größeren Kontrast zur Verfügung zu stellen, um das Lesen für Menschen mit geringerer Sehkraft einfacher zu machen.

Wenn der Hintergrund unifarben (oder ganz schwarz oder ganz weiß) ist, dann kann das Kontrastverhältnis des Textes gewahrt werden, indem man sicherstellt, dass jeder Buchstabe des Textes ein Kontrastverhältnis von 7:1 in Bezug auf den Hintergrund hat.

Wenn der Hintergrund oder die Buchstaben in relativer Luminanz schwanken (oder gemustert sind), dann kann der Hintergrund um die Buchstaben herum ausgewählt oder schattiert werden, so dass die Buchstaben ein Kontrastverhältnis von 7:1 in Bezug auf den Hintergrund hinter ihnen wahren, auch wenn sie dieses Kontrastverhältnis nicht mit dem gesamten Hintergrund haben.

Das Kontrastverhältnis kann manchmal gewahrt werden, indem man die relative Luminanz der Buchstaben genau so ändert, wie sich die relative Luminanz des Hintergrunds über die Seite hinweg ändert.

Eine andere Methode ist es, einen Halo um den Text herum zur Verfügung zu stellen, der das notwendige Kontrastverhältnis bereitstellt, wenn das Hintergrundbild oder die -farbe normalerweise keinen ausreichenden Unterschied in relativer Luminanz hätte.

Beispiele

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Messen Sie die relative Luminanz jedes Buchstaben (außer, sie sind alle uniform), indem Sie die folgende Formel benutzen:

    • L = 0.2126 * R + 0.7152 * G + 0.0722 * B wobei R, G und B definiert sind als:

      • wenn RsRGB <= 0.03928 dann R = RsRGB/12.92 sonst R = ((RsRGB+0.055)/1.055) ^ 2.4

      • wenn GsRGB <= 0.03928 dann G = GsRGB/12.92 sonst G = ((GsRGB+0.055)/1.055) ^ 2.4

      • wenn BsRGB <= 0.03928 dann B = BsRGB/12.92 sonst B = ((BsRGB+0.055)/1.055) ^ 2.4

      und RsRGB, GsRGB und BsRGB definiert sind als:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      Das "^" Zeichen ist der Potenzierungs-Operator.

    Anmerkung: Benutzen Sie bei ungeglätteten Buchstaben den relativen Luminanz-Wert, den Sie zwei Pixel nach innen vom Rand des Buchstabens aus vorfinden.

  2. Messen Sie die relative Luminanz derr Hintergrund-Pixel direkt neben dem Buchstaben, indem Sie die gleiche Formel verwenden.

  3. Berechnen Sie das Kontrastverhältnis, indem Sie die folgenden Formel verwenden:

    • (L1 + 0.05) / (L2 + 0.05), wobei

  4. Prüfen Die, ob das Kontrastverhältnis gleich oder größer als 7:1 ist

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.