contrast-computable

Farbkontrast ist für gerenderten Text berechenbar

automaticWCAG 1.4.3, 1.4.6 (AAA)Konfidenz: highSchweregrad: seriousperceivable

Ermittelt, ob genügend Informationen vorliegen, um den WCAG-Farbkontrast für sichtbaren Text zu berechnen (z. B. keine Verläufe, Bilder oder Blend-Modi, die den Hintergrund unbestimmbar machen).

Anwendbarkeit. Gilt für jeden sichtbaren Textknoten im Geltungsbereich sowie für die Beschriftung von <input type="button">/[type="submit"]/[type="reset"], die aus dem value-Attribut gerendert wird und daher beim Durchlaufen der Textknoten unsichtbar bleibt, sowie für den Text, den ein Formularfeld anzeigt: den aktuellen Wert eines <textarea> oder eines <input>, das Text anzeigt (text, search, email, url, tel, password, number, die Datums- und Zeittypen), oder, solange der Wert leer ist, seinen Platzhalter, in Farbe, Schrift, Deckkraft und Hintergrund von ::placeholder (nur wo der Browser diesen Stil berechnet; jsdom tut das nicht). Der Text eines Dropdown-<select> (ohne multiple, mit size 1 oder ohne size, nicht appearance: base-select) zählt als Text des select, gezeichnet vom geschlossenen Steuerelement in dessen Farben, Schrift und Hintergrund: seine angezeigte Option und jede andere Option mit den Farben des select. Im Browser gilt das auch für Text, den content in ::before oder ::after erzeugt (Zeichenketten, attr(), wie der Browser es auflöst, Zähler), und für den ::marker-Text eines Listeneintrags (eine Zahl, ein Buchstabe oder eine Zeichenkette; ein Aufzählungspunkt oder ein Bild ist kein Text), jeweils in Farbe und Schrift des Pseudo-Elements auf seinem Element beurteilt; jsdom berechnet keine Stile für Pseudo-Elemente, dort bleibt dieser Text also außen vor. Text zählt nur, wenn sein Element im Sichtbarkeitsmodus des Laufs im DOM sichtbar ist, nicht durch die sr-only-Technik (clip oder clip-path) unsichtbar abgeschnitten ist und weder zu einem deaktivierten Steuerelement noch zu dessen Beschriftung gehört – die WCAG-Ausnahme für inaktive Komponenten der Benutzeroberfläche. Über engineOptions.excludeSelectors ausgeschlossene Teilbäume werden übersprungen, und offene Shadow Roots werden als eigenständige Roots durchlaufen.

Erwartung. Für jeden anwendbaren Textknoten lassen sich beide Seiten der Kontrastberechnung aus dem CSS ermitteln: ein effektiver Hintergrund, der zu einer deckenden Farbe aufgelöst wird, und eine parsbare Vordergrundfarbe. Wo eines davon nicht möglich ist – ein Hintergrundbild oder -verlauf (ein Verlauf aus einer einzigen Farbe ist diese Farbe, und eine Ebene, die unter dem Text nichts zeichnet, etwa eine 1px-Unterstreichung, bleibt außen vor), mix-blend-mode, ein filter (außer drop-shadow() allein über einem deckenden Hintergrund unter dem gesamten Text, der den Schatten verdeckt) oder backdrop-filter, ein text-shadow (der Kontrast hinzufügen kann, den diese Engine ohne Modell für das Glyphen-Rendering nicht berücksichtigen kann), eine Kontur durch -webkit-text-stroke (in eigener Farbe gezeichnet, oft der größte Teil der Glyphe), ein ::first-line oder ::first-letter in eigener Farbe (welchen Text es einfärbt, hängt von den Zeilenumbrüchen ab), Deckkraft auf einem Vorfahren oder auf dem eigenen Element des Texts über einem eigenen Hintergrund, die sich nicht gegen das dahinter Liegende auflösen lässt, ein Root-Hintergrund, der nie deckend wird, wo sich die Canvas der Seite nicht ermitteln lässt (in einem Frame, unter erzwungenen Farben; anderswo wird Text auf der Canvas gemessen, siehe contrast-minimum), eine Farbe, die sich nicht parsen lässt, oder eine Option eines Dropdown-<select> außer der angezeigten mit eigener Farbe, eigenem Hintergrund oder eigener Deckkraft (SELECT_OPTION_COLOR: Sie erscheint nur in der Liste, die das select öffnet, und die Plattform zeichnet diese in jenen Farben oder in ihren eigenen) oder, in einem Emulator wie jsdom, eine Textfarbe, die sich im Farbschema, in dem die Seite gezeichnet wird, nicht ermitteln lässt (COLOR_SCHEME_NOT_RENDERED) –, ist das Ergebnis cantTell mit Angabe des Hindernisses. Diese Regel ist diejenige, die diese Unsicherheit meldet; deshalb können contrast-minimum und contrast-enhanced beim selben Text still bleiben, statt ein Verhältnis zu raten. Eine Ausnahme: Text, der durch eine Kontur oder einen Schatten gezeichnet wird und dessen Farben, die Füllung eingeschlossen, wenn sie zu sehen ist, alle gegenüber einem flachen Hintergrund unter dem AA-Verhältnis liegen, schlägt bei contrast-minimum und contrast-enhanced fehl und wird hier nicht nachgefragt.

Was ein Befund meldet.

blockerProperty, blockerValue (ein CSS-Effekt im Weg): die CSS-Eigenschaft, die die Berechnung verhindert, und ihr Wert, zum Beispiel mix-blend-mode, filter, text-shadow, -webkit-text-stroke oder opacity.
blockerSelector (ein CSS-Effekt im Weg): ein Selektor für das Element, das ihn hat, möglicherweise ein Vorfahre des Texts.
backgroundFillType (ein Hintergrundbild oder ein Verlauf): image, gradient, imageAndGradient oder unknown.
background, backgroundAlpha (ein Hintergrund, der nie deckend wird, oder eine Farbe, die sich nicht auswerten lässt): die Hintergrundfarbe, soweit sie sich ermitteln ließ, als rgba()-Zeichenkette, und ihre Deckkraft von 0 bis 1.
eligibleTextCount (bei bestandener Prüfung): wie viele Textknoten geprüft wurden.
assumptionsCount, assumptionsApplied (bei bestandener Prüfung): wie viele Textknoten eine Annahme brauchten, um einen Hintergrund zu erhalten, und welche Annahmen getroffen wurden. Jeder Eintrag ist ein Code; ROOT_CANVAS_FALLBACK bedeutet, dass für einen Seitenhintergrund, der nie deckend wird, angenommen wurde, dass er auf der Canvas-Farbe liegt, die der Scan nennt (contrast.rootCanvasFallback), oder, mit dem Modus auditorAssist, wo sich die eigene Canvas der Seite nicht ermitteln lässt (in einem Frame, unter erzwungenen Farben), auf dieser Farbe, standardmäßig Weiß. Text, der auf der Canvas gemessen wird, die das Farbschema der Seite ihm gibt, braucht keine.
generatedBy (erzeugter Text, der sich nicht messen lässt): ::before, ::after oder ::marker, das Pseudo-Element, nach dessen Text gefragt wird; der Selektor nennt sein Element. GENERATED_TEXT_UNREADABLE steht für Inhalt, dessen Text sich nicht lesen lässt (ein Zähler in einem seiteneigenen Stil), GENERATED_TEXT_POSITIONED für ein aus dem Fluss genommenes Pseudo-Element ohne eigenen deckenden Hintergrund.
forcedColors (jedes Vorkommen, wenn die gemessenen Farben erzwungen waren): true, und der Hinweis rät, die Seite mit ausgeschalteten erzwungenen Farben erneut zu prüfen. Ein Scan unter erzwungenen Farben misst die eigenen Farben der Seite; das Feld steht also nur dort, wo er die Seite nicht in ihnen halten konnte.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass

<p style="background:#ffffff; color:#999999;">Body text</p>

Vorder- und Hintergrund sind beide flache, deckende Farben, daher lässt sich ein Verhältnis berechnen (unabhängig davon, ob es später AA/AAA besteht).

can't tell

<p style="background-image:url(texture.png); color:#000000;">Body text</p>

Ein background-image hinter dem Text ist keine flache Farbe, daher lässt sich überhaupt kein Kontrastverhältnis berechnen.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

`ANCESTOR_OPACITY`

Suchen Sie den im Bericht genannten Text und notieren Sie den Vorfahren mit einer opacity unter 1.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben Text und Hintergrund so, wie sie auf dem Bildschirm (abgeschwächt) erscheinen, mit der Pipette auf der gerenderten Seite.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Die abgeschwächten Farben auf dem Bildschirm erreichen den Schwellenwert, oder der abgeschwächte Text ist ein inaktives (deaktiviertes) Bedienelement, das ausgenommen ist.

Nicht bestanden. Die abgeschwächten Farben auf dem Bildschirm ergeben ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6), sofern der Text nicht zu einem inaktiven Bedienelement gehört.

`BACKGROUND_FILTER_OR_BACKDROP_FILTER`

Suchen Sie den im Bericht genannten Text und notieren Sie den filter oder backdrop-filter an ihm oder einem Vorfahren (im Bereich „Stile“ der Entwicklertools).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Text- und Hintergrundfarbe so, wie sie mit angewendetem Filter auf dem Bildschirm erscheinen, mit der Pipette auf der gerenderten Seite statt anhand der deklarierten Werte.
Scrollen oder warten Sie bei einem Weichzeichner oder backdrop-filter über wechselndem Inhalt, damit unterschiedlicher Inhalt dahinter vorbeizieht, und prüfen Sie den ungünstigsten Fall.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Mit angewendetem Filter erreicht das Verhältnis auf dem Bildschirm den Schwellenwert.

Nicht bestanden. Mit angewendetem Filter liegt das Verhältnis auf dem Bildschirm unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`BACKGROUND_IMAGE_OR_GRADIENT`

Suchen Sie den im Bericht genannten Text und sehen Sie sich das Bild oder den Verlauf dahinter an.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Textfarbe gegen die hellsten und dunkelsten Stellen des Hintergrunds direkt hinter den Buchstaben.
Ändert sich das Bild (Slides, Video, responsive Bilder), prüfen Sie jede Version und mehrere Fensterbreiten.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Jede Stelle des Hintergrunds hinter den Buchstaben erreicht mindestens das Schwellenverhältnis.

Nicht bestanden. Eine Stelle des Hintergrunds hinter dem Text ergibt ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`BACKGROUND_NOT_COMPUTABLE`

Suchen Sie den im Bericht genannten Text auf der Seite.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Textfarbe gegen die Farbe direkt hinter den Buchstaben; wenn sie variiert, nehmen Sie die dunkelste und die hellste Stelle.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Das Verhältnis erreicht überall hinter dem Text den Schwellenwert.

Nicht bestanden. Das Verhältnis liegt an irgendeiner Stelle hinter dem Text unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`BACKGROUND_NOT_OPAQUE_AT_ROOT`

Suchen Sie den im Bericht genannten Text; die Seite setzt dahinter keinen opaken Hintergrund, sodass dort die Leinwand zu sehen ist, die der Browser malt, oder in einem Frame die umgebende Seite.
Betrachten Sie die Seite dort, wo sie angezeigt wird: in der Seite, die sie einbettet, ohne erzwungene Farben und in jedem Farbschema, das die Seite unterstützt (hell und dunkel).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben den Text gegen den Hintergrund, der in jeder Einstellung tatsächlich zu sehen ist.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Das Verhältnis erreicht den Schwellenwert in jeder Einstellung, in der die Seite angezeigt wird.

Nicht bestanden. In einer Einstellung, in der die Seite angezeigt wird, liegt das Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`BACKGROUND_OVERLAP`

Suchen Sie den im Bericht genannten Text und prüfen Sie, welches Element tatsächlich dahinter gezeichnet wird (untersuchen Sie es und schalten Sie das überlappende Element aus und wieder ein).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Textfarbe gegen die Farbe, die hinter den Buchstaben tatsächlich zu sehen ist.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Die Farbe, die tatsächlich hinter dem Text liegt, erreicht mindestens das Schwellenverhältnis.

Nicht bestanden. Die Farbe, die tatsächlich hinter dem Text liegt, ergibt ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`BACKGROUND_UNPARSABLE`

Suchen Sie den im Bericht genannten Text und untersuchen Sie den Wert der Hintergrundfarbe in den Entwicklertools (oft eine neuere Syntax wie oklch(), lab() oder color()).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Textfarbe gegen den Hintergrund, wie er auf dem Bildschirm dargestellt wird.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Das Verhältnis erreicht den Schwellenwert.

Nicht bestanden. Das Verhältnis liegt unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`COLOR_SCHEME_NOT_RENDERED`

Öffnen Sie die Seite in einem Browser mit dem im Bericht genannten Farbschema (blockerValue: light oder dark), oder emulieren Sie es in den Entwicklertools (Rendering, prefers-color-scheme).
Suchen Sie den im Bericht genannten Text und messen Sie ihn mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner, dessen Farben Sie mit einer Pipette aufnehmen, gegen den Hintergrund dahinter.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. In diesem Farbschema erreicht das Verhältnis den Schwellenwert.

Nicht bestanden. In diesem Farbschema liegt das Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`ELEMENT_OPACITY`

Suchen Sie den im Bericht genannten Text und notieren Sie die opacity unter 1 an seinem Element.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben Text und Hintergrund so, wie sie auf dem Bildschirm (abgeschwächt) erscheinen, mit der Pipette auf der gerenderten Seite.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Die abgeschwächten Farben auf dem Bildschirm erreichen den Schwellenwert, oder der abgeschwächte Text ist ein inaktives (deaktiviertes) Bedienelement, das ausgenommen ist.

`ENGINE_EXCEPTION`

Suchen Sie den im Bericht genannten Text (die Prüfung wurde vorzeitig beendet, daher wurde nichts gemessen).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Textfarbe gegen den Hintergrund direkt hinter den Buchstaben.
Notieren Sie Schriftgröße und -stärke, um zu entscheiden, ob der Text als groß gilt (mindestens 24px oder 18.66px und fett).
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Das Verhältnis erreicht den Schwellenwert für seine Größe.

Nicht bestanden. Das Verhältnis liegt unter dem Schwellenwert für seine Größe; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`FOREGROUND_UNPARSABLE`

Suchen Sie den im Bericht genannten Text und untersuchen Sie seinen Farbwert in den Entwicklertools (oft eine neuere Syntax wie oklch(), lab() oder color()).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die dargestellte Textfarbe gegen ihren Hintergrund.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Das Verhältnis erreicht den Schwellenwert.

Nicht bestanden. Das Verhältnis liegt unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`GENERATED_TEXT_POSITIONED`

Suchen Sie das im Bericht genannte Element und finden Sie den Text, den sein ::before oder ::after auf dem Bildschirm zeichnet (er ist von seinem Element entfernt positioniert).
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Farbe dieses Textes gegen das, was an seiner tatsächlichen Position dahinter zu sehen ist.
Ändern Sie die Fenstergröße und scrollen Sie, um andere Positionen zu prüfen, an denen er auf einem anderen Hintergrund landen kann.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Wo immer er landet, erreicht der generierte Text den Schwellenwert.

Nicht bestanden. Dort, wo der generierte Text landet, liegt das Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`GENERATED_TEXT_UNREADABLE`

Suchen Sie das im Bericht genannte Element und sehen Sie sich den Text an, den sein ::before, ::after oder Listenmarker zeichnet (eine Zahl, ein Aufzählungszeichen oder eine Beschriftung).
Entscheiden Sie, ob es Text ist, den Menschen lesen müssen (eine Zahl, ein Wort oder eine Beschriftung), oder eine rein dekorative Form.
Ist es Text, messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben seine Farbe gegen den Hintergrund dahinter.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Der generierte Text erreicht den Schwellenwert, oder er ist rein dekorativ.

Nicht bestanden. Der generierte Text ist lesbarer Inhalt und sein Verhältnis liegt unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`MIX_BLEND_MODE`

Suchen Sie den im Bericht genannten Text und notieren Sie den mix-blend-mode an ihm oder seinem Container.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die gemischten Text- und Hintergrundfarben so, wie sie auf dem Bildschirm erscheinen, mit der Pipette auf der gerenderten Seite.
Kann unterschiedlicher Inhalt dahinter liegen (Scrollen, Slider), prüfen Sie den ungünstigsten Fall.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Die gemischten Farben auf dem Bildschirm erreichen den Schwellenwert.

Nicht bestanden. Die gemischten Farben auf dem Bildschirm ergeben ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`PSEUDO_ELEMENT_COLOR`

Suchen Sie den im Bericht genannten Text und notieren Sie die Farbe von ::first-line oder ::first-letter im Bereich „Stile“.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben sowohl die Textfarbe des Elements als auch die Farbe der ersten Zeile oder des ersten Buchstabens gegen den Hintergrund.
Ändern Sie die Fenstergröße, um zu sehen, dass die Farbe der ersten Zeile bei unterschiedlichen Breiten für unterschiedliche Wörter gilt.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Beide Farben erreichen den Schwellenwert.

Nicht bestanden. Eine der Farben ergibt ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`SELECT_OPTION_COLOR`

Suchen Sie die im Bericht genannte Auswahlliste und öffnen Sie sie mit der Maus und mit Alt+Pfeil nach unten.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben in der geöffneten Liste den Text jeder Option gegen ihren Hintergrund, einschließlich der hervorgehobenen Option, in jedem Browser, den die Seite unterstützt.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Jede Option in der geöffneten Liste erreicht den Schwellenwert.

Nicht bestanden. Eine Option in der geöffneten Liste ergibt ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`TEXT_SHADOW`

Suchen Sie den im Bericht genannten Text und notieren Sie seinen text-shadow.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Füllfarbe des Textes gegen den Hintergrund.
Fällt die Füllung durch, zoomen Sie hinein und prüfen Sie, ob der Schatten eine geschlossene Kontur oder einen Halo um jeden Buchstaben bildet; falls ja, messen Sie die Schattenfarbe gegen den Hintergrund und die Füllung gegen den Schatten.
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Die Füllung erreicht den Schwellenwert gegenüber dem Hintergrund, oder ein geschlossener Halo umgibt jeden Buchstaben und ergibt das Schwellenverhältnis.

Nicht bestanden. Weder die Füllung gegenüber dem Hintergrund noch ein geschlossener Halo um die Buchstaben erreicht den Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

`TEXT_STROKE`

Suchen Sie den im Bericht genannten Text und notieren Sie Breite und Farbe seines -webkit-text-stroke.
Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Füllfarbe gegen den Hintergrund und die Konturfarbe gegen den Hintergrund.
Zoomen Sie hinein, um zu sehen, welche Farbe den Großteil jedes Buchstabens bildet (eine dünne Kontur zählt weniger als die Füllung).
Vergleichen Sie das Verhältnis für WCAG 1.4.3 mit 4,5:1 (3:1 für großen Text) und für 1.4.6 mit 7:1 (4,5:1 für großen Text).

Bestanden. Füllung und Kontur erreichen beide den Schwellenwert, oder die Farbe, die die Buchstaben eindeutig bildet, erreicht ihn.

Nicht bestanden. Die Farbe, die die Buchstaben bildet, ergibt ein Verhältnis unter dem Schwellenwert; das verstößt gegen WCAG 1.4.3 (oder 1.4.6).

Quellcode ansehen