Zum Inhalt springen
helpyself

Kontrast-Prüfer

Local only — nothing is uploaded unless you save or share it.

Ein Farbkontrast-Prüfer für die WCAG-Stufen der Barrierefreiheit.

  1. Geben Sie Ihre Textfarbe und die Hintergrundfarbe ein
  2. Lesen Sie das Verhältnis und welche WCAG-Stufen es besteht
  3. Fällt es durch, nehmen Sie die vorgeschlagene Farbe, die besteht

Beispiel für großen Text

Beispiel für normalen Fließtext — die Größe, die der größte Teil Ihrer Inhalte tatsächlich benutzt.

:1
    Tool speichern

    Kontrast-Prüfer griffbereit halten

    Als Lesezeichen

    Über dieses Tool

    Nehmen Sie ihn als schlichten Farbprüfer für zwei Farben, oder als Kontrast-Prüfer mit Deckkraft: ein halbdurchsichtiger Vordergrund wird über den Hintergrund gerechnet, bevor das Verhältnis ermittelt wird, statt sein Alpha stillschweigend zu ignorieren. Das Farbkontrastverhältnis misst, wie unterscheidbar Text vom Hintergrund dahinter ist, auf einer Skala von 1 bis 21. Die Web Content Accessibility Guidelines setzen die Latte für normalen Fließtext auf 4,5 zu 1 in Stufe AA, senken sie für großen Text auf 3 zu 1 und heben sie für die strengere Stufe AAA auf 7 zu 1. Diese Zahlen sind keine willkürlichen Vorlieben: geringer Kontrast ist einer der häufigsten Barrierefreiheitsfehler im Web und betrifft weit mehr Menschen, als es scheinen mag — jeden mit eingeschränktem Sehvermögen, jeden über etwa vierzig und jeden, der bei hellem Sonnenlicht auf einen Bildschirm schaut. Dieser Prüfer berechnet das Verhältnis sauber und linearisiert die sRGB-Werte zuerst, den Schritt, den naive Rechner überspringen und der Grund, warum ihre Ergebnisse echten Barrierefreiheits-Audits widersprechen. Durchsichtigen Text rechnet er zuerst über den Hintergrund, denn eine Farbe mit Alpha hat für sich allein keinen wahren Kontrastwert. Fällt ein Paar durch, schlägt er die nächstliegende Abstufung Ihrer Textfarbe vor, die besteht.

    Häufige Fragen

    Was ist ein gutes Kontrastverhältnis?

    4,5:1 oder besser für normalen Fließtext, das ist WCAG-Stufe AA. Großer Text darf auf 3:1 herunter, und die strengere Stufe AAA verlangt 7:1. Alles unter 3:1 ist für die meisten Menschen Arbeit und für manche unlesbar.

    Was ist ein gutes Kontrastverhältnis?

    4,5:1 oder besser für normalen Fließtext, das ist WCAG-Stufe AA. Großer Text darf auf 3:1 herunter, und die strengere Stufe AAA verlangt 7:1. Alles unter 3:1 ist für die meisten Menschen Arbeit und für manche unlesbar.

    Was gilt als großer Text?

    18pt, also 24px, oder 14pt fett, also etwa 18,66px. Alles ab dieser Größe braucht in Stufe AA nur ein Verhältnis von 3 zu 1 statt 4,5 zu 1. Die Schwelle für großen Text auf normalen Fließtext anzuwenden ist eine der häufigsten Arten, wie ein Audit durchfällt, nachdem alle dachten, es sei bestanden.

    Soll ich AA oder AAA anstreben?

    AA ist der praktische Standard und das, worauf sich die meisten Gesetze beziehen, darunter der European Accessibility Act. AAA ist strenger und über ein ganzes Designsystem hinweg schwer zu treffen, wird also meist als Anspruch für Fließtext behandelt und nicht als pauschale Pflicht.

    Warum weicht Ihr Verhältnis von einem Rechner ab, den ich anderswo benutzt habe?

    Fast immer, weil der andere die rohen RGB-Werte mittelt, statt sie zuerst zu linearisieren. sRGB ist gammakodiert, die WCAG-Formel wendet also je Kanal eine bestimmte Transformation an, bevor sie gewichtet. Das zu überspringen liefert Zahlen, die plausibel aussehen und echte Audits nicht bestehen.

    Wie wird durchsichtiger Text behandelt?

    Er wird zuerst über die Hintergrundfarbe gerechnet und dann gemessen. Eine Farbe mit Alphakanal hat für sich genommen kein sinnvolles Kontrastverhältnis, denn was Sie tatsächlich sehen, ist eine Mischung. Werkzeuge, die Alpha ignorieren, melden ein Bestanden für Text, der in der Praxis unsichtbar ist.

    Zählt Kontrast auch für Symbole und Rahmen?

    Ja. WCAG 2.1 verlangt 3 zu 1 für Bedienelemente und bedeutungstragende Grafiken, was Rahmen von Formularfeldern, Fokusanzeigen und Symbolschaltflächen einschließt. Die werden hier neben den Textstufen mitgeprüft.

    Helfen Sie, dieses Tool zu verbessern

    Einen Fehler gefunden, eine Änderung im Kopf, oder fehlt Ihnen ein Tool?

    /contrast-checker

    ↑↓ bewegen · Enter öffnen · Esc schließen