Farbkontrast prüfen

Prüfen Sie den Kontrast zwischen Text und Hintergrund anhand der WCAG-Schwellen AA und AAA.

Vorschau
Aa

So wird Ihr Text aussehen.

Deckende Farben. Großer Text: ab 24 px oder 18,67 px fett. Das Ergebnis prüft nur den Textkontrast.

Ihre Dateien werden hier auf Ihrem Gerät verarbeitet

Wir senden Ihre Datei- oder Textinhalte nicht an einen Verarbeitungsserver. Es ist kein Konto erforderlich und es gibt keine tägliche Betriebsquote. Einzelne Tools haben Größenbeschränkungen, um den Speicher Ihres Geräts zu schützen.

Eine Verbindung ist erforderlich, um die Website und ihre Ressourcen zu laden. Hosting kann technische Besuchsdaten erhalten. Favoriten speichern nur Werkzeugkennungen in diesem Browser.

Wie wir mit Ihren Daten umgehen →

Wie man dieses Tool benutzt

  1. Geben Sie Daten ein oder laden Sie das Werkzeugbeispiel.
  2. Wählen Sie die Optionen und betätigen Sie die Hauptschaltfläche.
  3. Prüfen Sie das Ergebnis vor dem Kopieren oder Herunterladen.

Ein Beispiel, das Sie überprüfen können

Prüfen Sie den Kontrast zwischen Text und Hintergrund anhand der WCAG-Schwellen AA und AAA.

Beispieleingabe

#000000 / #FFFFFF

Erwartetes Ergebnis

21:1
AA: ✓
AAA: ✓

Prüfen Sie das Ergebnis vor dem Kopieren oder Herunterladen.

Farbkontrast prüfen: Anwendung und praktische Hinweise

Geben Sie zwei deckende HEX-Farben mit drei oder sechs Stellen ein, mit oder ohne Raute. Das Verhältnis verwendet die relative sRGB-Leuchtdichte und hängt nicht von der Größe der Vorschau ab. AA verlangt 4,5:1 für normalen und 3:1 für großen Text; AAA verlangt 7:1 beziehungsweise 4,5:1. Großer Text beginnt bei 24 CSS-Pixeln oder ungefähr 18,67 Pixeln in Fettschrift. Der Vergleich erfolgt vor dem Runden der Anzeige. Die Prüfung gilt für ein gleichmäßiges Farbpaar. Transparenz, Fotos, Verläufe, Interaktionszustände und die gesamte Barrierefreiheit einer Seite werden nicht untersucht. Prüfen Sie bei Änderungen des tatsächlichen Hintergrunds dessen wirksame Farben erneut. Speichern Sie beide Farbcodes zusammen mit dem Ergebnis.

Farbkontrast prüfen. Beginnen Sie mit dem Beispiel und prüfen Sie die Beziehung zwischen Eingabe und Ausgabe, bevor Sie ein vollständiges Dokument einfügen. Das Beispiel ist klein genug, um es ohne weitere Anwendung nachzuvollziehen. Ersetzen Sie die Daten anschließend durch eine repräsentative Probe und passen Sie die Optionen an. Die Hauptschaltfläche führt die Verarbeitung aus; das Laden des Beispiels füllt lediglich die Felder. Wenn Sie danach eine Eingabe ändern, wird das vorherige Ergebnis ausgeblendet, damit Sie keine überholte Fassung kopieren. Führen Sie die Verarbeitung nach jeder Änderung erneut aus. Leeren stellt die ursprünglichen Formularwerte wieder her und verwirft die Ausgabe. Kopieren überträgt den Ausgabetext in die Zwischenablage, sofern der Browser dies erlaubt. Herunterladen erstellt eine Datei erst nach ausdrücklicher Betätigung; die Berechnung selbst startet keinen Download. Bewahren Sie die Eingabe separat auf, wenn Sie den Vorgang später wiederholen möchten. Dieses Formular ist kein Projektarchiv und speichert keinen Verlauf. Benennen Sie Vergleichsdateien nach ihren Einstellungen und prüfen Sie, welche Datei geöffnet ist.

Farbkontrast prüfen. Prüfen Sie eine kurze Probe mit vorhersehbarem Ergebnis und einen weiteren Fall mit den für Ihre Arbeit wichtigen Besonderheiten. Kontrollieren Sie Anfang und Ende der Ausgabe: Eine scheinbar richtige Kopie kann zu früheren Eingaben gehören, wenn Sie mehrere Fassungen außerhalb dieser Seite gespeichert haben. Verkleinern Sie bei Fehlern die Probe bis zur problematischen Stelle und beachten Sie die angegebenen Grenzen. Entfernen Sie Informationen nicht allein zum Ausblenden einer Meldung; prüfen Sie zuerst, ob die gewählte Verarbeitung Ihrem Ziel entspricht. Öffnen Sie eine heruntergeladene Datei vor der Weiterverwendung und kontrollieren Sie Zeichen, Struktur und Werte. Die Datei enthält das Ergebnis, aber keine Formulareinstellungen. Bewahren Sie Eingabe und Optionen ebenfalls auf, wenn Sie den Vorgang später erklären möchten.

Ein praktischer Check vor der Verwendung des Ergebnisses

Farbkontrast prüfen. Prüfen Sie den Kontrast zwischen Text und Hintergrund anhand der WCAG-Schwellen AA und AAA. Prüfen Sie das Ergebnis vor dem Kopieren oder Herunterladen.

Optionen und Grenzen

Geben Sie zwei deckende HEX-Farben mit drei oder sechs Stellen ein, mit oder ohne Raute. Das Verhältnis verwendet die relative sRGB-Leuchtdichte und hängt nicht von der Größe der Vorschau ab. AA verlangt 4,5:1 für normalen und 3:1 für großen Text; AAA verlangt 7:1 beziehungsweise 4,5:1. Großer Text beginnt bei 24 CSS-Pixeln oder ungefähr 18,67 Pixeln in Fettschrift. Der Vergleich erfolgt vor dem Runden der Anzeige. Die Prüfung gilt für ein gleichmäßiges Farbpaar. Transparenz, Fotos, Verläufe, Interaktionszustände und die gesamte Barrierefreiheit einer Seite werden nicht untersucht. Prüfen Sie bei Änderungen des tatsächlichen Hintergrunds dessen wirksame Farben erneut. Speichern Sie beide Farbcodes zusammen mit dem Ergebnis.

Anleitungen