So nutzt du: APCA Kontrast-Checker
- Gib die Farben für Text und Hintergrund ein (beliebiges CSS-Format).
- Lies den Lc-Wert ab – je höher, desto besser lesbar. Negative Werte bedeuten helle Schrift auf dunklem Hintergrund.
- Prüfe in der Tabelle, ob das Paar für Fließtext, Überschriften oder nur für Nicht-Text-Elemente geeignet ist.
- Vergleiche mit dem daneben angezeigten WCAG-2-Verhältnis, das heute noch der rechtliche und prüfbare Standard ist.
Was ist APCA?
APCA (Accessible Perceptual Contrast Algorithm) wurde von Andrew Somers für das W3C entwickelt und ist die Kontrastmethode, die für die kommenden WCAG-3-Richtlinien vorgeschlagen wird. Statt eines Verhältnisses wie 4,5:1 liefert sie einen Helligkeitskontrastwert Lc von etwa 0 bis 106 (positiv für dunklen Text auf hellem Hintergrund, negativ für helle Schrift auf dunklem Hintergrund). Er bildet ab, wie das menschliche Sehen Kontraste tatsächlich wahrnimmt, einschließlich des Einflusses von Schriftgröße und Schriftstärke.
Warum APCA statt des WCAG-2-Verhältnisses?
- Polaritätsbewusst: WCAG 2 behandelt weiße Schrift auf schwarz und schwarze Schrift auf weiß gleich, unsere Augen tun das aber nicht. APCA bewertet beide unterschiedlich.
- Besser im Dark Mode: Die WCAG-2-Formel überschätzt den Kontrast bei dunklen Farbpaaren, sodass manche „bestandenen“ Kombinationen im Dark Theme schwer lesbar sind. APCA erkennt solche Fälle.
- Weniger falsche Durchfälle: Manche gut lesbaren Farbpaare im mittleren Helligkeitsbereich, etwa weiße Schrift auf orangefarbenen Buttons, fallen nach WCAG 2 durch, während APCA sie realistischer bewertet.
So liest du den Lc-Wert
| Lc | Geeignet für |
|---|---|
| 90+ | Empfohlen für Fließtext und langes Lesen |
| 75 | Minimum für Fließtext (ca. 18px regular) |
| 60 | Sonstigen Inhaltstext (ca. 24px regular oder 16px fett) |
| 45 | Große Überschriften und große UI-Beschriftungen |
| 30 | Platzhaltertext, deaktivierte Zustände, große Icons |
| 15 | Minimum für Nicht-Text-Elemente wie Trennlinien |
Dies sind vereinfachte Richtwerte auf „Bronze-Niveau“. Der vollständige APCA-Ansatz verwendet Nachschlagetabellen je nach Schriftgröße und Schriftstärke.
Sollte ich APCA heute schon nutzen?
WCAG 3 ist noch ein Arbeitsentwurf, und die endgültige Form von APCA kann sich noch ändern. Barrierefreiheitsgesetze und Prüfungen (darunter der European Accessibility Act, der über EN 301 549 auf WCAG 2.1 verweist) verwenden weiterhin das WCAG-2-Verhältnis. Der praktische Weg: Für die Konformität WCAG 2 AA erfüllen und APCA als zweite Meinung nutzen – besonders für dunkle Themes und große Anzeigetexte. WCAG 2 kannst du im Detail mit dem Kontrast-Checker prüfen.
Auch gesucht als: apca kontrast, wcag 3 kontrast, lc kontrast, apca rechner, barrierefreiheit kontrast, textkontrast prüfen, wahrgenommener kontrast, apca checker.
Passende Tools zu: APCA Kontrast-Checker
- Farbenblindheit-Simulator — Lade einen Screenshot oder ein Design hoch und sieh es dir nebeneinander durch acht Arten der Farbfehlsichtigkeit an – oder prüfe eine Palette auf Farben, die nicht mehr zu unterscheiden sind.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
- OKLCH Farbkonverter — Erkunde den wahrnehmungsgleichmäßigen OKLCH-Farbraum mit Live-Reglern, prüfe, ob eine Farbe in sRGB passt, und kopiere passende HEX-, RGB- und HSL-Fallbacks.
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.