Kontrastgitter

Legen Sie Ihre gesamte Farbpalette in eine N×N-Prüfungstabelle — WCAG-Verhältnisse und APCA Lc für jedes Vordergrund-/Hintergrund-Paar, auf einen Blick ersichtlich.

Jede Zelle zeigt das WCAG-Verhältnis und APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

WCAG AA-Textkörper bestanden Nur AA-Großtext Nicht bestanden

Zeilen = Textfarbe (Vordergrund), Spalten = Hintergrund. Jede Zelle zeigt das tatsächliche Vordergrund-Hintergrund-Paar mit zwei Barrierefreiheitsmetriken: WCAG-Verhältnis (AA-Textkörper ≥ 4,5, AA-Großtext ≥ 3,0) und APCA Lc (75+ für Textkörper, 60+ für Großtext).

So auditieren Sie eine gesamte Palette – hinzufügen, lesen, entscheiden.

Alle Kandidatenfarben in einer N×N-Matrix – Barrierefreiheit für jedes Vordergrund × Hintergrund-Paar auf einmal.

01
Farben hinzufügen
Fügen Sie Markenfarben, semantische Farben und Neutrale hinzu (bis 10). Reihen sind Vordergründe, Spalten sind Hintergründe.
02
Tabelle lesen
Jede Zelle zeigt das WCAG-Verhältnis und den APCA-Lc. Punkte leuchten auf: Fließtext benötigt Lc 75+, großer Text 60+.
03
Entscheiden
Speichern Sie Tastenpaare und Textpaare in Ihrer Design-Spezifikation; beseitigen Sie nicht konforme Kombinationen vor der Veröffentlichung.

Kontrast-Grid FAQ

Drei häufige Fragen bei Full-Matrix-Prüfungen.

Warum nicht Paare einzeln im Kontrast-Tool prüfen?: 5 Farben ergeben 30 gerichtete Paare – Einzelprüfungen führen zu Auslassern. Das Grid zeigt alles auf einmal und enthüllt gespiegelte Beziehungen.
WCAG oder APCA – welches zählt?: WCAG 2.1 ist der derzeitige Referenzstandard für Vorschriften; APCA ist der Kandidat für WCAG 3 und erkennt Text im Dunkelmodus und mit niedrigem Kontrast genauer. Einhalten Sie WCAG, beurteilen Sie mit APCA.
Warum gibt es immer schwarze und weiße Spalten?: Schwarzer oder weißer Text ist der universelle Ausfall – wie eine Farbe gegen beide abschneidet, ist die Basis für die Definition semantischer Farben.

Nach der Prüfung

Übernehmen Sie konforme Paare in Ihre semantische Palette und Spezifikation.

Kontrastprüfer

WCAG 2.1-Kontrastprüfung zwischen beliebigen Vordergrund- und Hintergrundfarben.

Farbblindheitssimulator

Simulieren Sie 8 Arten von Farbsehstörungen, um die Barrierefreiheit zu prüfen.

Wissenschaftliche farbenblindensichere Paletten

Die De-facto-Standards wissenschaftlicher Publikationen – Okabe-Ito (empfohlen von Nature Methods), die Paul Tol-Reihe, die Nature NPG-Zeitschriftpalette und das wahrnehmungsgleichmäßige Viridis. Jede Farbprobe verfügt über eine APCA-Kontraststufe, und ein 8-Typen-Farbsichtsimulator unten überprüft jede Palette in Echtzeit.

Semantische UI-Farbpalette

Geben Sie eine Markenfarbe ein, erhalten Sie Primär-/Sekundär-/Erfolgs-/Warn-/Gefahrfarben — exportiert als Tailwind-Konfiguration und CSS-Variablen.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

So auditieren Sie eine gesamte Palette – hinzufügen, lesen, entscheiden.

Alle Kandidatenfarben in einer N×N-Matrix – Barrierefreiheit für jedes Vordergrund × Hintergrund-Paar auf einmal.

Farben hinzufügen

Fügen Sie Markenfarben, semantische Farben und Neutrale hinzu (bis 10). Reihen sind Vordergründe, Spalten sind Hintergründe.

Tabelle lesen

Jede Zelle zeigt das WCAG-Verhältnis und den APCA-Lc. Punkte leuchten auf: Fließtext benötigt Lc 75+, großer Text 60+.

Entscheiden

Speichern Sie Tastenpaare und Textpaare in Ihrer Design-Spezifikation; beseitigen Sie nicht konforme Kombinationen vor der Veröffentlichung.

Kontrast-Grid FAQ

Drei häufige Fragen bei Full-Matrix-Prüfungen.

Warum nicht Paare einzeln im Kontrast-Tool prüfen?

5 Farben ergeben 30 gerichtete Paare – Einzelprüfungen führen zu Auslassern. Das Grid zeigt alles auf einmal und enthüllt gespiegelte Beziehungen.

WCAG oder APCA – welches zählt?

WCAG 2.1 ist der derzeitige Referenzstandard für Vorschriften; APCA ist der Kandidat für WCAG 3 und erkennt Text im Dunkelmodus und mit niedrigem Kontrast genauer. Einhalten Sie WCAG, beurteilen Sie mit APCA.

Warum gibt es immer schwarze und weiße Spalten?

Schwarzer oder weißer Text ist der universelle Ausfall – wie eine Farbe gegen beide abschneidet, ist die Basis für die Definition semantischer Farben.