Textfarbkontrastprüfer
Vergleichen Sie opake sRGB-Textfarben mit ungerundeten WCAG-Kontrastschwellen.
Ihre Eingaben
Ihre Ergebnisse
Bereit, wenn Sie es sindIhre Ergebnisse erscheinen hier.
So funktioniert es
Berechnen Sie die relative Leuchtdichte von WCAG sRGB und vergleichen Sie das ungerundete Kontrastverhältnis mit normalen und großen Textschwellenwerten. Eine einfache Vorschau und ein Textbericht behalten die mitgelieferten Farben bei, ohne die Palette der Website zu ändern.
Gut zu wissen
Nur undurchsichtiges 3/6-stelliges sRGB-Hex. Keine Alpha, Gradienten, Weitwinkelfarben, Bilder, gerenderte Antialiasing- oder Nicht-Text-Kontrasttests. WCAG hat Ausnahmen; ein vorübergehendes Farbpaar stellt keine Zugänglichkeit einer Seite her.
Wann Sie dieses Tool verwenden sollten
Der Textkontrast hängt vom Unterschied in der relativen Luminanz zwischen Vordergrund und Hintergrund ab, nicht nur, ob zwei Farben unterschiedlich aussehen. Geben Sie zwei opake sRGB-Hex-Farben an, um ihr Verhältnis zu sehen und separate Normal- und Großtext-Schwellenwerte zu ermitteln. Entscheidungen verwenden den ungerundeten Wert, da das Runden einen nahezu grenzüberschreitenden Wert über einen angezeigten Schwellenwert verschieben kann. Die Vorschau veranschaulicht das mitgelieferte Paar, ohne die Palette dieser Website zu ändern. Ein vorbeigehendes Paar stellt die Zugänglichkeit einer Seite nicht her: Die tatsächliche Textgröße, das Gewicht, die Ausnahmen und der gerenderte Hintergrund müssen noch überprüft werden.
- Überprüfen Sie einen vorgeschlagenen Text und Solid-Hintergrund-Paar.
- Untersuchen Sie ein Verhältnis nahe einer AA-Schwelle.
- Speichern Sie einen kurzen Farbpaarbericht für eine Designüberprüfung.
Wie man Textfarbkontrast-Checker verwendet
Geben Sie zwei opake Hexfarben ein
Verwenden Sie #RGB oder #RRGGBB für Text und Hintergrund. Transparenz und Weitwinkelwerte werden nicht unterstützt.
Überprüfen Sie normalen und großen Text separat
Lesen Sie das Verhältnis, AA und AAA Ergebnisse. Wenden Sie den Großtextstatus nur an, wenn die tatsächliche Größe und das Gewicht der Definition entsprechen.
Überprüfen Sie die Vorschau und den Bericht
Verwenden Sie die Vorschau als Illustration und laden Sie den Textbericht herunter. Überprüfen Sie den tatsächlichen Seitenhintergrund, die Schriftbehandlung und alle anwendbaren Ausnahmen separat.
Schwarzer Text auf weiß
Inputs
Text #000000, Hintergrund #ffffff.
Ergebnis
Das Verhältnis ist 21:1 und erfüllt die angezeigten normalen und großen AA / AAA-Schwellenwerte.
Was es bedeutet
Dies überprüft das mitgelieferte Paar; es überprüft nicht Layout, Interaktion, Fokusindikatoren oder eine ganze Website.
Häufige Fehler zu vermeiden
Vergleich eines gerundeten Verhältnisses
Eine angezeigte gerundete Zahl kann einen Fehler knapp unter einem Schwellenwert verdecken. Entscheidungen verwenden das zugrunde liegende Verhältnis.
Aufrufen einer Überschrift großen Text
Der tatsächliche Text muss der Größen-/Gewichtsdefinition entsprechen. Ein semantisches Heading-Tag allein qualifiziert sich nicht.
Ignorieren des tatsächlichen Hintergrunds
Eine Gradienten-, Bild- oder lichtdurchlässige Schicht kann ein anderes Paar von den eingegebenen Vollfarben darstellen.
Häufig gestellte Fragen
Definitionen, Edge Cases und praktische nächste Schritte für dieses Tool. Suchen Sie alle Tool FAQs
Welche Farbformate werden unterstützt?
Undurchsichtige drei- oder sechsstellige sRGB hex mit einem führenden #. Kurze Werte werden erweitert. Alpha, benannte Farben, Gradienten und Weitwinkelwerte werden nicht akzeptiert.
Was ist Normal-Text AA?
Für das gelieferte Paar ist das getestete Mindestverhältnis 4.5:1. Überprüfen Sie die Ausnahmen des Kriteriums und den tatsächlichen gerenderten Textkontext separat.
Was gilt als großer Text?
Mindestens 18 Punkte, entspricht 24 CSS-Pixel, oder fett mindestens 14 Punkte, über 18.67 CSS-Ppixel. Ein Label in diesem Tool ändert Ihren gerenderten Text nicht.
Warum kann 4.5 in der Nähe einer Grenze immer noch ausfallen?
Die Klassifizierung verwendet das ungerundete Verhältnis. Ein Wert knapp unter 4.5 erfüllt diesen Schwellenwert nicht, selbst wenn eine kurze Anzeige nach oben rundet.
Was sind die AAA-Schwellenwerte?
Die angezeigten Prüfungen verwenden 7:1 für normalen Text und 4.5:1 für großen Text. Dies sind Farbpaarergebnisse, keine allgemeine Konformitätsbewertung.
Ändert die Umkehrung von Vordergrund und Hintergrund das Verhältnis?
Nein. Das Verhältnis vergleicht hellere und dunklere Leuchtdichte symmetrisch. Der visuelle Effekt und der Lesekontext können sich noch unterscheiden.
Kann es Buttons, Icons oder Fokusindikatoren testen?
Dieses Tool erklärt den Textkontrast. Nicht-Text-Kriterien und Interaktionszustände erfordern eine eigene Überprüfung und keine pauschale Schlussfolgerung aus diesen Textergebnissen.
Bedeutet ein vorübergehendes Ergebnis, dass die Website zugänglich ist?
Nein. Inhalt, Tastaturzugriff, Struktur, Beschriftungen, Fokus, Bewegung und viele andere Anforderungen werden nicht durch eine zweifarbige Berechnung überprüft.
Quellen und Verfahren
Verwenden Sie die Verweise unten, um Definitionen und Plattformführung zu überprüfen. Umfang und Grenzen des Modells sind oben erläutert. Lesen Sie unsere redaktionellen Standards.