Techniken für WCAG 2.0

Zum Inhalt

-

G145: Sicherstellen, dass es ein Kontrastverhältnis von mindestens 3:1 zwischen Text (und Bildern von Text) 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 lockert die Anforderung an das Kontrastverhältnis von 4,5:1 für Text, der mindestens 18 Punkt groß ist (wenn er nicht fett ist) oder mindestens 14 Punkt groß ist (wenn er fett ist).

Wenn der Hintergrund unifarben (oder ganz schwarz oder ganz weiß) ist, dann kann das Kontrastverhältnis des großformatigen Textes gewahrt werden, indem man sicherstellt, dass jeder Buchstabe des Textes ein Kontrastverhältnis von 3: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 3: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.

(derzeit keine aufgelistet)

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 3: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.