Deutsch
Website-Menü

contrast-minimum

Text erfüllt den minimalen Farbkontrast (AA)

automaticWCAG 1.4.3 (AA)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass sichtbarer Text ein Kontrastverhältnis von mindestens 4,5:1 (normal) bzw. 3: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.3 für seine Größe verlangt: 3:1 für großen Text, 4,5: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. contrast-computable entscheidet, wonach bei den Verhältnissen der WCAG gefragt wird. Bei eigenen Verhältnissen dieser Regel (den Einstellungen einer Variante) wird hier nach Text in zwei Farben gefragt, die sich nur bei diesen Verhältnissen widersprechen, und nach Text, der durch eine Kontur oder einen Schatten gezeichnet wird, dessen beste Farbe sie erreicht, nicht aber das AA-Verhältnis der WCAG (PSEUDO_ELEMENT_COLOR, TEXT_STROKE, TEXT_SHADOW), da es sonst keine Regel täte. Text, der durch eine Kontur gezeichnet wird, deren beste Farbe zwischen dem AA-Verhältnis der WCAG und einem höheren Verhältnis der Variante liegt, ergibt hier fail und wird zusätzlich von contrast-computable nachgefragt: zwei Antworten auf zwei Anforderungen, die der Variante und WCAG 1.4.3. 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. Text ohne deckenden Hintergrund dahinter, bis hinauf zum Root, wird in beiden Kontrastmodi auf der Canvas gemessen, die der Browser unter die Seite zeichnet: der Canvas-Farbe des Farbschemas, in dem die Seite gezeichnet wird, über das die eigene color-scheme-Angabe der Seite (auf dem Root oder in <meta name="color-scheme">) entscheidet, wie CSS Color Adjustment 1 es definiert. Eine Seite, die kein Schema angibt, wird hell gezeichnet, auf Weiß, unabhängig davon, was die Nutzenden bevorzugen; eine, die nur dark angibt, auf der dunklen Canvas. Im Browser werden die Farben aus der Seite gelesen; ein Emulator (jsdom), der keine Systemfarbe auflöst, übernimmt die von Chromium (#121212 für die dunkle Canvas, #ffffff für den Text, den ein dunkles Schema vorgibt). Eine Canvas, die der Scan nennt, wenn contrast.rootCanvasFallback eine angibt, wird an ihrer Stelle gemessen. Wo sich die Canvas nicht ermitteln lässt (in einem Frame, wo die umgebende Seite durchscheinen kann; unter erzwungenen Farben, wo sie die Palette der Nutzenden ist), bleibt der Text contrast-computable überlassen oder wird mit dem Modus auditorAssist auf dem Fallback gemessen. Eine Seite, die beide Schemata unterstützt (light dark), wird in dem gezeichnet, das die Nutzenden bevorzugen. Der Scan sieht dieses (im Browser, wie es gezeichnet wird; jsdom zeichnet hell), und ihr Text wird dort gemessen und, wo sich seine Farben nicht mit dem Schema ändern können, auch im anderen, auf der Canvas dieses Schemas: nicht dort, wo eine CSS-Regel in einer prefers-color-scheme-Abfrage, ein light-dark()-Wert oder eine Systemfarbe (außer den eigenen Text- und Linkfarben des Schemas, wo keine CSS-Regel den Text färbt) die Farbe des Texts oder einen Hintergrund dahinter erreicht. Er ergibt fail, wo er in einem der gemessenen Schemata das Verhältnis verfehlt, und pass, wo er es in jedem erreicht.

Was ein Befund meldet.

  • metrics.ratio (Text unter dem Schwellenwert): das Kontrastverhältnis des Texts zu seinem Hintergrund (4.5 für 4.5:1), verglichen mit metrics.threshold, dem Verhältnis, das seine Größe verlangt.
  • colors.foregroundHex, colors.backgroundHex (Text unter dem Schwellenwert): die Textfarbe (die -webkit-text-fill-color, in der er gezeichnet wird, sofern nicht gesetzt color) und die Hintergrundfarbe dahinter, als Hex, nachdem eventuelle Transparenz verrechnet wurde. colors.foregroundRgba und colors.backgroundRgba geben dieselben beiden Farben in rgba()-Form an.
  • 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.
  • typography.fontSizePx, typography.fontSizePt (Text unter dem Schwellenwert): die Schriftgröße, wie sie gezeichnet wird, in CSS-Pixeln und in Punkt: 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 (sein adjust-Wert geteilt durch den eigenen Aspektwert der Schrift, im Browser gelesen). An dieser Größe wird der Schwellenwert für großen Text beurteilt, als WCAGs „size when the content is delivered“.
  • typography.declaredFontSizePx, typography.sizeScaledBy (Text unter dem Schwellenwert, in einer anderen Größe gezeichnet): 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 (Text unter dem Schwellenwert): die berechnete Schriftstärke als Zahl (400, 700) und wie geschrieben.
  • typography.isBold, typography.isLargeText (Text unter dem Schwellenwert): ob der Text als fett gilt und ob als großer Text, also in der Größe, die nur 3:1 braucht.
  • Die obigen Felder zu Verhältnis, Schwellenwert und Typografie sind anders als der Rest von data.details ein stabiler Vertrag.
  • assumptionsApplied, assumedRootCanvasColor (Text unter dem Schwellenwert): null, außer wenn die Seite keinen deckenden Hintergrund festlegt und der Text auf einer Canvas-Farbe gemessen wurde, 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 dem Fallback (standardmäßig Weiß). Dann ist assumptionsApplied ['ROOT_CANVAS_FALLBACK'] und assumedRootCanvasColor diese Farbe.
  • colorScheme (Text unter dem Schwellenwert, auf der Canvas einer Seite, die hell und dunkel unterstützt): 'light' oder 'dark', das Schema, in dem er das Verhältnis verfehlt, während er im anderen besteht, und der Hinweis nennt es; Verhältnis und Farben sind die dieses Schemas. Fehlt, wo er es in jedem gemessenen Schema verfehlt (dann im Schema gemeldet, in dem die Seite gezeichnet wird), und auf einer Seite mit nur einem Schema.
  • colorSchemesChecked (Text unter dem Schwellenwert und bei bestandener Prüfung): die Schemata, in denen der Text auf der Canvas gemessen wurde, ['light'] oder ['dark'], wenn die Seite beide unterstützt und eines nicht gemessen werden konnte. Ein Binding kann mit dem Browser im anderen Schema erneut scannen. Fehlt, wo jedes Schema gemessen wurde, das die Seite unterstützt.
  • generatedBy (erzeugter Text unter dem Schwellenwert): ::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 (die Zusammenfassung, wenn nichts fehlschlägt): wie viele Textknoten die Regel betrachtet hat und bei wie vielen davon sie die Farben berechnen konnte. Bei bestandener Prüfung unter metrics wiederholt.
  • 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:#767676;">Body text</p>

Etwa 4,6:1, über dem AA-Minimum von 4,5:1 für normalen Text.

fail
<div style="background:#ffffff;">
  <div style="opacity:0.5; background:#ffffff;">
    <p style="color:#000000;">Body text</p>
  </div>
</div>

50 % Deckkraft eines Vorfahren (Gruppe) über Weiß ergibt ein flaches Grau bei etwa 4:1, unter dem AA-Minimum.

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_SWITCH_OFFERED

  1. Suchen Sie den im Bericht genannten Kontrastschalter und prüfen Sie, ob er leicht zu finden ist, oben auf der Seite oder auf jeder Seite, und per Tastatur erreichbar ist.
  2. Schalten Sie den Schalter ein.
  3. Suchen Sie den im Bericht genannten Text und messen Sie ihn mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben gegen seinen Hintergrund; vergleichen Sie mit 4,5:1 (3:1 für großen Text: mindestens 24px oder 18.66px und fett).
  4. Wechseln Sie zu einer anderen Seite und prüfen Sie, ob die Einstellung erhalten bleibt.

Bestanden. Der Schalter ist leicht zu finden und zu bedienen, und wenn er eingeschaltet ist, erreicht der Text sein Verhältnis (G174).

Nicht bestanden. Der Schalter ist schwer zu finden oder hebt diesen Text nicht auf sein Verhältnis an, sodass der Text gegen WCAG 1.4.3 verstößt.

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

LOGO_TEXT_BELOW_THRESHOLD

  1. Suchen Sie den im Bericht genannten Text (oft im Kopfbereich der Website oder in ihrem Link zur Startseite).
  2. Entscheiden Sie, ob er Teil eines Logos oder Markennamens ist, etwa der Name der Website in ihrer Logogestaltung, und nicht ein Slogan, Menüeintrag oder anderer Text.
  3. Ist es kein Logotext, messen Sie ihn 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 4,5:1 (3:1 für großen Text: mindestens 24px oder 18.66px und fett).

Bestanden. Der Text ist Teil eines Logos oder Markennamens, für den keine Kontrastanforderung gilt, oder er erreicht sein Verhältnis.

Nicht bestanden. Der Text ist nicht Teil eines Logos oder Markennamens und liegt unter seinem Verhältnis; das verstößt gegen WCAG 1.4.3.

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 4,5:1 (3: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 4,5:1 (oder 3: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.3.

PSEUDO_ELEMENT_COLOR

  1. Suchen Sie den im Bericht genannten Text und notieren Sie die Farbe von ::first-line oder ::first-letter im Bereich „Stile“.
  2. 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.
  3. Ändern Sie die Fenstergröße, um zu sehen, für welche Wörter die Farbe der ersten Zeile bei unterschiedlichen Breiten gilt.
  4. Vergleichen Sie jedes Verhältnis mit dem, das der Bericht für diese Farbe als erforderlich angibt: 4,5:1 für die meisten Texte oder 3:1 für großen Text (mindestens 24px oder 18.66px und fett).

Bestanden. Beide Farben erreichen das für sie erforderliche Verhältnis.

Nicht bestanden. Eine der Farben ergibt ein Verhältnis unter dem für sie erforderlichen; der Text besteht die Prüfung nicht.

SEMIBOLD_BELOW_THRESHOLD

  1. Suchen Sie den im Bericht genannten halbfetten Text.
  2. Vergleichen Sie ihn direkt mit fettem Text (Stärke 700) gleicher Größe und Schrift auf der Seite oder in den Entwicklertools, indem Sie font-weight umschalten.
  3. Entscheiden Sie, ob er als fett wirkt; wenn ja, gilt er als groß und braucht 3:1, sonst 4,5:1.

Bestanden. Der Text wirkt fett, ist also großer Text, und sein Verhältnis erreicht 3:1.

Nicht bestanden. Der Text wirkt nicht fett, ist also normaler Text unter 4,5:1; das verstößt gegen WCAG 1.4.3.

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 4,5:1 (3: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 4.5:1; das verstößt gegen WCAG 1.4.3; 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.

TEXT_SHADOW

  1. Suchen Sie den im Bericht genannten Text und notieren Sie seinen text-shadow.
  2. Zoomen Sie hinein und prüfen Sie, ob der Schatten eine geschlossene Kontur oder einen Halo um jeden Buchstaben bildet.
  3. Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben die Farbe, die die Buchstaben bildet, gegen den Hintergrund.
  4. Vergleichen Sie das Verhältnis mit dem, das der Bericht als erforderlich angibt: 4,5:1 für die meisten Texte oder 3:1 für großen Text (mindestens 24px oder 18.66px und fett).

Bestanden. Die Farbe, die die Buchstaben bildet, erreicht das erforderliche Verhältnis.

Nicht bestanden. Die Farbe, die die Buchstaben bildet, ergibt ein Verhältnis unter dem erforderlichen; der Text besteht die Prüfung nicht.

TEXT_STROKE

  1. Suchen Sie den im Bericht genannten Text und notieren Sie Breite und Farbe seines -webkit-text-stroke.
  2. 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).
  3. Messen Sie mit dem Farbwähler in den Entwicklertools des Browsers oder mit einem Kontrastrechner und per Pipette aufgenommenen Farben diese Farbe gegen den Hintergrund.
  4. Vergleichen Sie das Verhältnis mit dem, das der Bericht als erforderlich angibt: 4,5:1 für die meisten Texte oder 3:1 für großen Text (mindestens 24px oder 18.66px und fett).

Bestanden. Die Farbe, die die Buchstaben bildet, erreicht das erforderliche Verhältnis.

Nicht bestanden. Die Farbe, die die Buchstaben bildet, ergibt ein Verhältnis unter dem erforderlichen; der Text besteht die Prüfung nicht.

Quellcode ansehen