Farbkontrast & APCA
Prüfe Farbpaare nach WCAG 2.2, simuliere Sehschwächen und vergleiche ganze Paletten.
Kontrastverhältnis 17.85 zu 1. AAA bestanden. APCA Lc 105.
1
Farben
Hex-Wert, Farbwähler oder Regler.
Feinabstimmung
222
47
11
Feinabstimmung
0
0
100
2
LiveErgebnis
Live berechnet nach WCAG 2.2 und APCA.
WCAG-Kontrastverhältnis
17.85 : 1
34.57
APCA-Wert
Lc 105
5 von 5 WCAG-Prüfungen bestanden.
AAA bestanden
Erfüllt alle Textstufen von WCAG 2.2.
3
Vorschau
So wirken die Farben bei verschiedenen Sehweisen.
Überschrift in 24 px
Fließtext in 16 px. Ein ganzer Satz zeigt, ob die Farben auch über längere Zeit gut lesbar bleiben.
Kleingedrucktes in 12 px kippt zuerst.
Ein Link im Fließtext
Primäre AktionSekundäre Aktion
Die Vorschau zeigt deine Farben unverändert. Wähle oben eine Sehweise.
4
Vorschläge
Nächste Farben, die AA oder AAA erreichen.
Dein Farbpaar besteht AA und AAA für normalen Text. Hier ist nichts zu tun.
5
Prüfdetails
Alle Schwellen im Überblick.
| Prüfung | Mindestwert | Ergebnis |
|---|---|---|
| Normaler TextAA, Kriterium 1.4.3 | 4.50 : 1 | Bestanden |
| Großer TextAA, Kriterium 1.4.3 | 3.00 : 1 | Bestanden |
| Normaler TextAAA, Kriterium 1.4.6 | 7.00 : 1 | Bestanden |
| Großer TextAAA, Kriterium 1.4.6 | 4.50 : 1 | Bestanden |
| Bedienelemente und GrafikenAA, Kriterium 1.4.11 | 3.00 : 1 | Bestanden |
APCA-Stufen
APCA ist ein Entwurf für WCAG 3 und kein Teil der Konformität nach WCAG 2.x. Für Prüfungen nach BFSG und EN 301 549 zählt das Verhältnis.
- Lc 90: Bevorzugt für Fließtext, auch bei kleiner SchriftBestanden
- Lc 75: Minimum für Fließtext (etwa 16 px, normale Stärke)Bestanden
- Lc 60: Minimum für Inhaltstext (etwa 24 px oder 16 px fett)Bestanden
- Lc 45: Minimum für große, kräftige Überschriften (etwa 36 px)Bestanden
- Lc 30: Absolutes Minimum für sonstigen Text und IconsBestanden
6
Palette prüfen
Jede Textfarbe auf jedem Hintergrund, mit Verhältnis und Stufe.
- #0F172A
- #FFFFFF
- #0F6268
- #B91C1C
| Textfarbe auf Hintergrund | #0F172A | #FFFFFF | #0F6268 | #B91C1C |
|---|---|---|---|---|
| #0F172A | –gleiche Farbe | Aa17.85 : 1 AAA | Aa2.52 : 1 Nicht bestanden | Aa2.75 : 1 Nicht bestanden |
| #FFFFFF | Aa17.85 : 1 AAA | –gleiche Farbe | Aa7.07 : 1 AAA | Aa6.47 : 1 AA |
| #0F6268 | Aa2.52 : 1 Nicht bestanden | Aa7.07 : 1 AAA | –gleiche Farbe | Aa1.09 : 1 Nicht bestanden |
| #B91C1C | Aa2.75 : 1 Nicht bestanden | Aa6.47 : 1 AA | Aa1.09 : 1 Nicht bestanden | –gleiche Farbe |