Zugänglichkeitsprüfer für Farbpaletten
Überprüfen Sie Ihre gesamte Farbpalette auf WCAG-Barrierefreiheit. Fügen Sie 2–8 Farben hinzu und sehen Sie Kontrastverhältnisse für jede Text-Hintergrund-Kombination. Die gesamte Verarbeitung erfolgt in Ihrem Browser.
Paletten-Übersicht
6 Kombination(en) scheitern AA für normalen Text:
- #1A1A2E on #2563EB (3.30:1)
- #2563EB on #1A1A2E (3.30:1)
- #2563EB on #EAEAEA (4.30:1)
- #EAEAEA on #2563EB (4.30:1)
- #EAEAEA on #FFFFFF (1.20:1)
- #FFFFFF on #EAEAEA (1.20:1)
Ihre Palette
Fügen Sie Farben hinzu oder entfernen Sie sie (2–8). Jede Farbe kann als Text oder Hintergrund verwendet werden; wir prüfen jedes Paar.
Kontrastmatrix
Jede Zelle ist "Textfarbe auf Hintergrundfarbe": Verhältnis und WCAG AA (normal) Bestanden/Nicht bestanden.
| Text ↓ \ Hintergrund → | 1A1A2E | 2563EB | EAEAEA | FFFFFF |
|---|---|---|---|---|
1A1A2E | — | 3.30 Nicht bestanden | 14.18 Bestanden | 17.06 Bestanden |
2563EB | 3.30 Nicht bestanden | — | 4.30 Nicht bestanden | 5.17 Bestanden |
EAEAEA | 14.18 Bestanden | 4.30 Nicht bestanden | — | 1.20 Nicht bestanden |
FFFFFF | 17.06 Bestanden | 5.17 Bestanden | 1.20 Nicht bestanden | — |
Voreingestellte Paletten
WCAG-Referenz
Inhaltsverzeichnis
Was ist Paletten-Barrierefreiheit?
Paletten-Barrierefreiheit bedeutet, dass jede Möglichkeit, Farben aus Ihrem Set zu kombinieren — Text auf Hintergrund, Rahmen auf Oberflächen, Schaltflächen auf Karten — die Kontrastanforderungen erfüllt, damit Inhalte lesbar und UI-Elemente für alle Benutzer unterscheidbar sind, einschließlich Menschen mit Sehbehinderungen oder Farbsehunterschieden.
Die Überprüfung eines einzelnen Paares (z.B. Haupttext auf Seitenhintergrund) reicht nicht aus. Überschriften, Bildunterschriften, Schaltflächen, Links und Rahmen schaffen viele mögliche Paare. Eine zugängliche Palette ist eine, bei der die Kombinationen, die Sie tatsächlich verwenden (oder verwenden könnten), die WCAG-Kontrastregeln erfüllen.
Warum die gesamte Palette prüfen?
Design-Systeme und Markenpaletten haben mehrere Rollen: Hintergründe (Seite, Karten, Abschnitte), Text (Überschriften, Haupttext, Bildunterschriften) und UI (Schaltflächen, Rahmen, Icons). Jedes davon kann über einem anderen liegen. Wenn Sie nur "primären Text auf Seitenhintergrund" testen, können Sie fehlschlagende Paare wie "Bildunterschrift auf Kartenhintergrund" oder "Schaltflächentext auf primär" übersehen.
Ein Paletten-Prüfer testet jede Text-auf-Hintergrund-Kombination, damit Sie das vollständige Bild sehen: Welche Paare bestehen, welche scheitern und wie viele Kombinationen AA oder AAA erfüllen. Das erleichtert die Behebung problematischer Paare oder die Dokumentation genehmigter Kombinationen für Ihr Team.
Wie das Tool funktioniert
Fügen Sie 2–8 Farben über die Farbauswahl oder Hex-Eingabe hinzu. Das Tool erstellt jedes geordnete Text-auf-Hintergrund-Paar und berechnet das Kontrastverhältnis mit der WCAG-Formel.
- Zusammenfassung — Gesamtzahl der Kombinationen, wie viele AA (normal) und AAA (normal) bestehen, und eine Liste der fehlschlagenden Paare.
- Kontrastmatrix — Eine Tabelle mit jeder Zelle, die das Verhältnis und Bestanden/Nicht bestanden für WCAG AA normaler Text (4,5:1) zeigt.
- Bericht kopieren — Ein Klick kopiert Ihre Palette, Zusammenfassung und jede Kombination zum Einfügen in Dokumente oder Tickets.
Alle Berechnungen laufen in Ihrem Browser; keine Farbdaten werden an einen Server gesendet.
Wann es verwenden
- Design-Systeme — Bevor Sie Marken- oder UI-Farben festlegen, überprüfen Sie jedes vorgesehene Text-/Hintergrundpaar.
- Theme-Wechsel — Für helle/dunkle oder mehrere Themes stellen Sie sicher, dass die Palette jedes Themes als Set besteht.
- Audits — Sehen Sie schnell, welche Kombinationen in einer vorhandenen Palette scheitern und angepasst werden müssen.
- Dokumentation — Exportieren Sie den Bericht, um genehmigte Paare für Ihr Team oder Ihre Kunden zu dokumentieren.
WCAG-Kontraststufen
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse für Text und UI:
- AA Normal — Mindestens 4,5:1 für normalen Text (unter 18pt oder 14pt fett). Dies ist das übliche Ziel für Fließtext.
- AAA Normal — 7:1 für verbesserten Kontrast.
- AA Groß — 3:1 für großen Text (18pt+ oder 14pt+ fett).
- UI-Komponenten und Grafiken — Mindestens 3:1 für Icons, Rahmen, Formularsteuerelemente und bedeutungsvolle Grafiken.
Die Matrix in diesem Tool zeigt Bestanden/Nicht bestanden für AA Normal. Die Zusammenfassung und der Bericht enthalten Zählungen für AA und AAA, damit Sie sehen können, wie viele Paare jede Stufe erfüllen.
Häufig gestellte Fragen
Der Farbkontrast-Prüfer testet jeweils einen Vordergrund und einen Hintergrund — ideal für die Validierung einer einzelnen Kombination oder das Ausprobieren von Alternativen. Der Zugänglichkeitsprüfer für Farbpaletten testet jedes Paar in einem Set von 2–8 Farben gleichzeitig, sodass Sie sehen können, welche Kombinationen in Ihrer vollständigen Palette bestehen oder scheitern und einen vollständigen Bericht kopieren können.
Wenn eine Farbe kein gültiger 3- oder 6-stelliger Hex-Wert ist (z.B. Sie tippen noch oder haben einen Wert leer gelassen), kann das Tool den Kontrast für Paare, die ihn verwenden, nicht berechnen. Beheben oder entfernen Sie die ungültige Farbe und diese Zellen zeigen stattdessen das Verhältnis und Bestanden/Nicht bestanden.
Sie können zwischen 2 und 8 Farben hinzufügen. Mit 2 Farben erhalten Sie 2 Kombinationen (A auf B, B auf A). Mit 8 Farben erhalten Sie 56 Kombinationen. Die Palette auf die Farben zu beschränken, die Sie tatsächlich für Text und Hintergründe verwenden, hält die Matrix übersichtlich und den Bericht fokussiert.
Nein. Alle Kontrastberechnungen verwenden dieselbe WCAG-Formel und laufen vollständig in Ihrem Browser. Ihre Farben verlassen Ihr Gerät nie.
Wenn viele Kombinationen scheitern, hat Ihre Palette möglicherweise zu viele ähnliche Farbtöne (z.B. helle Grautöne auf leicht unterschiedlichen hellen Grautönen). Fügen Sie mehr Kontrast hinzu: Schließen Sie deutlich hellere und dunklere Farben ein, damit Sie gültige Text-/Hintergrundoptionen haben. Verwenden Sie den Farbkontrast-Prüfer, um einzelne Paare zu testen und Verbesserungsvorschläge zu erhalten.
Ja. Sie können 6-stelligen Hex (z.B. #1A1A2E) oder 3-stellige Kurzform (z.B. #FFF) eingeben. Das Tool erweitert 3-stellige Codes intern auf 6 Stellen und verwendet sie in der Matrix und im Bericht.