Techniken für WCAG 2.0

Zum Inhalt

-

G18: Sicherstellen, dass es ein Kontrastverhältnis von mindestens 4,5: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. Für Erfolgskriterium 1.4.3 beschreibt diese Technik das minimale Kontrastverhältnis für Text, der kleiner als 18 Punkt ist (wenn er nicht fett ist) und kleiner als 14 Punkt ist (wenn er fett ist). Für Erfolgskriterium 1.4.5 schwächt diese Technik die Anforderung an das Kontrastverhältnisses von 7:1 ab 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 die relative Luminanz des Textes gewahrt werden, indem man sicherstellt, dass jeder Buchstabe des Textes ein Kontrastverhältnis von 4,5:1 zum 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 4,5:1 in Bezug auf den Hintergrund hinter ihnen wahren, auch wenn sie dieses Kontrastverhältnis nicht mit dem gesamten Hintergrund haben.

Wenn ein Buchstabe zum Beispiel oben heller ist als unten, dann kann es möglicherweise schwierig sein, das Kontrastverhältnis zwischen dem Buchstaben und dem Hintergrund hinter dem gesamten Buchstaben beizubehalten. In diesem Fall könnte der Designer den Hintergrund hinter dem Buchstaben abdunkeln oder eine dünne schwarze Kontur (mindestens 1 Pixel breit) um den Buchstaben herum hinzufügen, damit das Kontrastverhältnis zwischen dem Buchstaben und dem Hintergrund größer als 4,5:1 bleibt.

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.

Wenn zum Beispiel eine Seite an einer Ecke sehr hell ist und zu sehr dunkel an der anderen Seite hin verläuft, dann gibt es keine Farbe, die über die gesamte Seite hin laufen kann und die Richtlinie zum Kontrastverhältnis an beiden Ecken erfüllt. Eine Möglichkeit, um dies zu thematisieren, wäre, auch die Helligkeit der Buchstaben zu ändern, so dass jeder Buchstabe immer das Kontrastverhältnis zum Hintergrund, der direkt hinter dem Buchstaben liegt, einhält.

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 4,5: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.