Deutsch
Website-Menü

contrast-enhanced

Text erfüllt den erhöhten Farbkontrast (AAA)

automaticWCAG 1.4.6 (AAA)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass sichtbarer Text ein Kontrastverhältnis von mindestens 7:1 (normal) bzw. 4,5:1 (groß) hat, sofern der Kontrast aus dem CSS berechenbar ist.

Anwendbarkeit. Gilt für den sichtbaren Text, für den contrast-computable gilt (siehe dort für die Zulässigkeitskriterien), eingeschränkt auf Text, dessen Hinter- und Vordergrund tatsächlich berechenbar sind. Zulässiger, aber nicht berechenbarer Text macht diese Regel notApplicable statt cantTell: Das Melden dieser Unsicherheit ist Sache von contrast-computable, sodass die beiden denselben Text nie doppelt melden.

Erwartung. Jeder berechenbare Textknoten erreicht das Verhältnis, das SC 1.4.6 für seine Größe verlangt: 4,5:1 für großen Text, 7:1 für alles andere. Text gilt als groß ab 24px oder, bei einer berechneten Schriftstärke von 700 oder höher, bereits ab 14pt (etwa 18,667px). Text, der durch eine -webkit-text-stroke oder einen text-shadow gezeichnet wird, bleibt contrast-computable überlassen, außer wenn jede Farbe, in der er gezeichnet wird, seine Füllung eingeschlossen, außer wenn diese nichts zeichnet (transparent oder in der Farbe seines Hintergrunds), gegenüber einem flachen Hintergrund unter dem Verhältnis liegt: Dann kann keine Lesart von ihm das Kriterium erfüllen, und er ergibt fail, gemessen an der besten dieser Farben (drawnBy: textStroke oder textShadow). Abstand zum Grenzwert (contrast-ratio): unter dem Text, der sein Verhältnis erreicht, das Element, das ihm am nächsten kommt, mit dem ungerundeten Verhältnis gegenüber dem, das seine Größe verlangt; context.largeText gibt an, welches. Nur Text innerhalb von 10 % seines Verhältnisses gilt als knapp; Text, der weiter darüber liegt, liefert keinen Abstand zum Grenzwert. measuredCount zählt die Elemente, deren Kontrast berechnet wurde. Text, von dem ein ::first-line oder ::first-letter einen Teil in eigener Farbe zeichnet, wird in beiden Farben gemessen: Wo beide ihr Verhältnis erreichen, ergibt er pass, wo beide darunter bleiben, fail (pseudoElementColor nennt das Pseudo-Element), und wo sie sich widersprechen, bleibt er contrast-computable überlassen. Text ohne deckenden Hintergrund dahinter, bis hinauf zum Root, wird auf der Canvas gemessen, die der Browser unter die Seite zeichnet, im Farbschema, in dem die Seite gezeichnet wird, und auf einer Seite, die hell und dunkel unterstützt, auch im anderen, wo sich seine Farben nicht mit dem Schema ändern können, wie contrast-minimum beschreibt. Text normaler Größe, dessen Hintergrund sich nicht ermitteln lässt, ergibt dennoch fail, wenn seine Farbe auf keinem Hintergrund 7:1 erreichen kann (CONTRAST_UNREACHABLE_ANY_BACKGROUND, metrics.bestRatio: sein Verhältnis gegenüber Weiß oder Schwarz, je nachdem, welches höher ist). Ein Platzhalter eines Felds unter seinem Verhältnis (PLACEHOLDER_BELOW_THRESHOLD) ergibt fail, wenn die Seite seine Farben gewählt hat: Farbe, Deckkraft oder Hintergrund des Platzhalters oder der Hintergrund des Felds weichen von denen des Browsers ab, gelesen in einem leeren Frame. Bei einem Platzhalter, der in den eigenen Farben des Browsers bleibt, wird angenommen, dass er das Verhältnis erfüllt (WCAG G148), und wo sich das nicht feststellen lässt, ist er ein cantTell-Vorkommen.

Was ein Befund meldet.

  • metrics.ratio (bei einem fail): das Kontrastverhältnis des Texts, zum Beispiel 4.5 für 4.5:1, ungerundet, verglichen mit metrics.threshold (7 oder 4.5 bei großem Text).
  • colors.foregroundHex, colors.backgroundHex (bei einem fail): die Text- und die Hintergrundfarbe, aus denen das Verhältnis berechnet wurde, als Hex (für den Text die -webkit-text-fill-color, in der er gezeichnet wird, sofern nicht gesetzt color). Eine halbtransparente Textfarbe wird zuerst mit dem Hintergrund verrechnet.
  • selectField (ein Dropdown-select im eigenen Hintergrund des Browsers): backgroundHex, sein berechneter Hintergrund, und fieldHex, die Field-Farbe, in der Chromium es zeichnet. Der Text wird gegen beide gemessen, und das niedrigere Verhältnis wird gemeldet.
  • colors.foregroundRgba, colors.backgroundRgba (bei einem fail): dieselben Farben als rgba()-Zeichenketten.
  • typography.fontSizePx, typography.fontSizePt (bei einem fail): die Schriftgröße, wie sie gezeichnet wird (die berechnete Größe mal CSS-zoom, bei SVG-Text mit der Skalierung durch viewBox und transform, und mal dem Faktor, um den font-size-adjust die Schrift skaliert), in CSS-Pixeln und in Punkt.
  • typography.declaredFontSizePx, typography.sizeScaledBy (bei einem fail, der in einer anderen Größe gezeichnet wird): die berechnete font-size und was ihn anders gezeichnet hat (zoom, svg, font-size-adjust). Wo das den Text auf die andere Seite der Grenze für großen Text bringt, sagt der Hinweis es (contrast_hint_drawnSize).
  • typography.fontWeight, typography.fontWeightLabel, typography.isBold (bei einem fail): die berechnete Schriftstärke als Zahl, bold (700 oder mehr) oder normal, und ob sie als fett gilt.
  • typography.isLargeText (bei einem fail): ob der Text als groß gilt, was den Schwellenwert bestimmt.
  • Die obigen Felder zu Verhältnis, Schwellenwert und Typografie sind anders als der Rest von data.details ein stabiler Vertrag.
  • assumptionsApplied, assumedRootCanvasColor (bei einem fail): null, außer wenn der Seitenhintergrund nie deckend wurde und angenommen wurde, dass er auf einer Canvas-Farbe liegt: einer, 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), dem Fallback. Dann ist assumptionsApplied ["ROOT_CANVAS_FALLBACK"] und assumedRootCanvasColor diese Farbe. Text auf der Canvas, die das Farbschema der Seite ihm gibt, wird auf dieser Canvas gemessen, ohne beides.
  • colorScheme (bei einem fail auf der Canvas einer Seite, die hell und dunkel unterstützt): 'light' oder 'dark', das Schema, in dem der Text das Verhältnis verfehlt, während er im anderen besteht; fehlt, wo er es in jedem gemessenen Schema verfehlt.
  • colorSchemesChecked (bei einem fail und bei bestandener Prüfung): die Schemata, in denen der Text auf der Canvas gemessen wurde, wenn die Seite beide unterstützt und eines nicht gemessen werden konnte.
  • generatedBy (bei einem fail für erzeugten Text): ::before, ::after oder ::marker, das Pseudo-Element, dessen Text gemessen wird; der Selektor nennt sein Element, und Farben und Schrift sind die des Pseudo-Elements.
  • eligibleTextCount, computableTextCount (bei bestandener Prüfung und beim notApplicable-Ergebnis, wenn kein Text berechenbar war): wie viele Textknoten im Geltungsbereich lagen und bei wie vielen davon sich die Farben ermitteln ließen. Bei bestandener Prüfung stehen beide zusätzlich unter metrics.
  • 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.

Abstand zum Grenzwert. Diese Regel misst contrast-ratio als Verhältnis, und der Wert muss den Grenzwert erreichen. Lag ein bestandenes Ergebnis nahe am Grenzwert, nennt das Feld margin des Ergebnisses das Element, das ihm am nächsten kam und ihn trotzdem einhielt. So zeigt sich ein knappes Ergebnis, bevor eine kleine Änderung es kippt. Anders als die Felder eines Befunds ist es ein stabiler Vertrag. Siehe Ausgabeschema.

Beispiele

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

Schwarz auf Weiß liegt bei etwa 21:1, weit über der AAA-Schwelle von 7:1.

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

Grau auf Weiß liegt bei etwa 4,6:1 – besteht das AA-Minimum, scheitert aber an der strengeren AAA-Schwelle von 7:1.

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.

CONTRAST_UNREACHABLE_ANY_BACKGROUND

  1. Suchen Sie den im Bericht genannten Text und notieren Sie seine Farbe, die der Bericht angibt.
  2. Messen Sie diese Farbe mit einem Kontrastrechner gegen Weiß und gegen Schwarz.
  3. Vergleichen Sie das höhere der beiden Verhältnisse mit 7:1.

Bestanden. Gegen Weiß oder Schwarz erreicht die Textfarbe 7:1, ein Hintergrund kann sie also auf das Verhältnis bringen; messen Sie sie dann gegen ihren eigenen Hintergrund.

Nicht bestanden. Gegen Weiß wie gegen Schwarz bleibt die Textfarbe unter 7:1, kein Hintergrund bringt sie also auf das Verhältnis; das verstößt gegen WCAG 1.4.6.

ENGINE_EXCEPTION

  1. Suchen Sie den im Bericht genannten Text (die Prüfung wurde vorzeitig beendet, daher wurde nichts gemessen).
  2. 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.
  3. Notieren Sie Schriftgröße und -stärke und vergleichen Sie das Verhältnis mit 7:1 (4,5:1 für großen Text: mindestens 24px oder 18.66px und fett).

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.6.

PLACEHOLDER_BELOW_THRESHOLD

  1. Suchen Sie das im Bericht genannte Feld und leeren Sie es, damit der Platzhalter erscheint.
  2. Prüfen Sie im Bereich „Stile“, ob das CSS der Seite Farbe oder Deckkraft von ::placeholder oder den Hintergrund des Feldes setzt.
  3. Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben den Platzhaltertext gegen den Feldhintergrund und vergleichen Sie mit 7:1 (4,5:1 für großen Text: mindestens 24px oder 18.66px und fett).
  4. Prüfen Sie, ob der Platzhalter Informationen enthält, die zum Ausfüllen des Feldes nötig sind (ein Format oder eine Anweisung), statt nur eines Beispiels.

Bestanden. Der Platzhalter erreicht 7:1 (oder 4,5:1, wenn groß), oder er wird vollständig in den eigenen Standardfarben des Browsers gezeichnet.

Nicht bestanden. Die Seite setzt die Farben von Platzhalter oder Feld und das Verhältnis liegt unter dem Schwellenwert; das verstößt gegen WCAG 1.4.6.

SYMBOLIC_CHARACTER_BELOW_THRESHOLD

  1. Suchen Sie das im Bericht genannte Zeichen (etwa ×, ☰, › oder eine Glyphe aus einer Icon-Schrift).
  2. Entscheiden Sie, ob es Text ist, den Menschen lesen (Teil von Wörtern, eine Zahl), oder ein Symbol, das für eine Aktion steht, etwa ein Schließen- oder Menüsymbol.
  3. Ist es Text, messen Sie es mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben gegen seinen Hintergrund und vergleichen Sie mit 7:1 (4,5:1 für großen Text: mindestens 24px oder 18.66px und fett).
  4. Ist es ein Symbol, prüfen Sie zuerst, ob sichtbarer Text daneben dasselbe sagt, etwa das Wort „Schließen“ neben einem Schließen-Symbol. Dann ist das Symbol nicht der einzige Weg, es zu verstehen, und braucht das Verhältnis 3:1 nicht.
  5. Andernfalls messen Sie das Symbol gegen seinen Hintergrund und vergleichen mit 3:1 (WCAG 1.4.11).

Bestanden. Es ist Text und erreicht sein Verhältnis, oder es ist ein Symbol, das 3:1 erreicht oder dessen Bedeutung auch sichtbarer Text daneben wiedergibt.

Nicht bestanden. Es ist Text unter 7:1; das verstößt gegen WCAG 1.4.6; oder ein Symbol unter 3:1, das der einzige sichtbare Hinweis darauf ist, was es bedeutet oder tut; das verstößt gegen WCAG 1.4.11.

Quellcode ansehen