WCAG-Analysator
Analysieren Sie eine ganze Palette auf WCAG-Kontrastkonformität über jedes Farbpaar. Sehen Sie AA- und AAA-Ergebnisse und beheben Sie schwache Kombinationen.
Zu analysierende Palette
Kontrastmatrix
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
WCAG-2.1-Legende
Stufe AAA
Verhältnis ≥ 7:1 – Exzellent
Stufe AA
Verhältnis ≥ 4,5:1 – Standard
AA groß
Verhältnis ≥ 3:1 – Großer Text
Nicht bestanden
Verhältnis < 3:1 – Nicht konform
Analysieren Sie eine ganze Palette auf WCAG-Kontrastkonformität über jedes Farbpaar. Sehen Sie AA- und AAA-Ergebnisse und beheben Sie schwache Kombinationen.
WCAG-Analysator zeigt nur Bedienelemente und Ergebnisse, die zu seiner Funktion gehören. Verfügbare Optionen hängen vom Werkzeug und von der Eingabe ab.
Unterstützte Formate
So funktioniert es
Schritt 1
Öffnen Sie WCAG-Analysator und bereiten Sie die von der Oberfläche verlangte Eingabe vor
Schritt 2
Passen Sie die sichtbaren Einstellungen an das gewünschte Ergebnis an
Schritt 3
Prüfen Sie das angezeigte Ergebnis, bevor Sie es kopieren, exportieren oder weiterverwenden
Häufige Fehler vermeiden
- Gehen Sie nicht von einem Format oder einer Option aus, die in der Oberfläche nicht angezeigt wird.
- Prüfen Sie die erhaltenen Werte, bevor Sie sie in einem Designsystem oder einer Produktionsdatei verwenden.
- Bei Text und UI-Komponenten sollte zusätzlich der Kontrast geprüft werden.
Profi-Tipps
- Bewahren Sie Ausgangswert und Ergebnis zusammen auf, wenn Sie Varianten vergleichen möchten.
- Verwenden Sie die tatsächlich angezeigten Formate statt eine Umrechnung zu schätzen.
- Auf Mobilgeräten und Tablets sollten Beschriftungen umbrechen dürfen.
Datenverarbeitung
Die Datenverarbeitung hängt von der verwendeten Funktion ab. Einwilligung, Analyse und Kontofunktionen des Sites sind von der Farboperation getrennt.
Funktion dieses Werkzeugs
Analysieren Sie eine ganze Palette auf WCAG-Kontrastkonformität über jedes Farbpaar. Sehen Sie AA- und AAA-Ergebnisse und beheben Sie schwache Kombinationen. WCAG-Analysator bleibt auf diese Aufgabe beschränkt und verspricht keine Funktionen, die nicht in der Oberfläche sichtbar sind. Nutzen Sie die vorhandenen Bedienelemente und prüfen Sie anschließend die angezeigten Werte, bevor Sie sie in ein anderes Werkzeug oder Dokument übernehmen.
Geeignete Eingabe vorbereiten
Beginnen Sie mit der Eingabe, die WCAG-Analysator verlangt: je nach Bildschirm Farbe, Wert, Bild oder Einstellung. Für diese Seite werden Palette, HEX, CSS Variables, JSON genannt. Wenn ein Format oder eine Option nicht in der Oberfläche erscheint, sollten Sie es für diese Funktion nicht als unterstützt betrachten.
Ergebnis lesen und prüfen
Lesen Sie das Ergebnis im Zusammenhang mit der ausgeführten Operation. Vergleichen Sie es mit dem Ausgangswert und prüfen Sie die verwendeten Einstellungen. Bei wichtigen visuellen Anwendungen sollte das Ergebnis zusätzlich in der tatsächlichen Oberfläche kontrolliert werden.
Nutzung auf Mobilgerät und Tablet
WCAG-Analysator verwendet das responsive Layout der Website. Überschriften, Breadcrumbs und Bedienelemente können auf schmalen Bildschirmen umbrechen, damit längere Übersetzungen nicht abgeschnitten werden. Prüfen Sie das Ergebnis trotzdem auf dem Gerät, auf dem es später eingesetzt wird.
Ergebnis im Projekt weiterverwenden
Nach der Prüfung verwenden Sie nur die Aktionen, die WCAG-Analysator tatsächlich anbietet, etwa Kopieren oder Exportieren, wenn diese sichtbar sind. Bewahren Sie den Ausgangswert auf, wenn die Einstellung später reproduziert werden soll, und dokumentieren Sie bei UI-Farben auch die vorgesehene Rolle und den Kontrast.
Verwandte Tools
Anleitungen und Tutorials
Lernen Sie, unsere Werkzeuge mit unseren detaillierten Anleitungen zu verwenden.
wcag-analyzer: praktischer Leitfaden für accessibility
Lokalisierter Leitfaden zur Nutzung von wcag-analyzer, mit Best Practices für accessibility und häufigen Fehlern.
wcag-analyzer: praktischer Leitfaden für accessibility
Lokalisierter Leitfaden zur Nutzung von wcag-analyzer, mit Best Practices für accessibility und häufigen Fehlern.
wcag-analyzer: praktischer Leitfaden für export
Lokalisierter Leitfaden zur Nutzung von wcag-analyzer, mit Best Practices für export und häufigen Fehlern.
Häufig gestellte Fragen
Lernen Sie, unsere Werkzeuge mit unseren detaillierten Anleitungen zu verwenden.