WCAG AA-Kontrastschwellen
Formula
Normaler Text: 4,5:1; großer Text (≥18pt oder 14pt fett): 3:1; UI-Komponenten: 3:1.
Variables
- R, G, B
- sRGB-Kanäle (0–255 oder 0–1 normalisiert)
- H, S, L
- Farbton (Grad), Sättigung und Helligkeit (0–1) in HSL
- L
- Relative Leuchtdichte (WCAG) oder Helligkeit in HSL/OKLCH
FAQ
- Sind die Kontrastschwellenwerte der WCAG AA für Druckworkflows korrekt?
- Bildschirm-RGB und Druck-CMYK verwenden unterschiedliche Farbskalen. Behandeln Sie Umrechnungen als Näherungsbeweise; Kalibrieren Sie mit ICC-Profilen für den kommerziellen Druck.
- Kann ich diese Formel in CSS verwenden?
- Modernes CSS unterstützt für viele Operationen color-mix(), oklch() und lab(). Berechnen Sie für komplexe Pipelines in JavaScript und exportieren Sie CSS-Variablen.
- Lädt Color DevByte meine Farben hoch?
- Nein. Formel-Referenzseiten sind statische Dokumentation; Interaktive Tools laufen zu 100 % clientseitig in Ihrem Browser.
Übersicht
Mindestkontrastverhältnisse für die Einhaltung der Stufe AA.
Color DevByte dokumentiert diese Formel für Entwickler, Designer und Barrierefreiheitsprüfer, die reproduzierbare Farbberechnungen benötigen, ohne Daten an einen Server zu senden.
Verwenden Sie die verknüpften Farbwerkzeuge, um diese Formel interaktiv mit Live-Vorschau und Multiformat-Export anzuwenden.
Wann ist diese Formel zu verwenden?
Wenden Sie die wcag aa-Kontrastschwellenwerte an, wenn Sie Design-Tokens erstellen, den WCAG-Kontrast validieren oder Farbpipelines in CSS, Tailwind oder JSON des Designsystems automatisieren.
Überprüfen Sie die Ergebnisse bei der Produktions-Benutzeroberfläche immer mit einem Kontrastprüfer oder einer visuellen Vorschau – Grenzfälle bei der Gammakorrektur und der Gamut-Zuordnung können die Ergebnisse verschieben.
Hinweise zur Implementierung
Browserbasierte Tools sollten sRGB vor Luminanz- oder ΔE-Berechnungen linearisieren.
Bevorzugen Sie die OKLCH- oder LAB-Interpolation für Farbverläufe und Themen, um graue Mittelpunkte zu vermeiden, die bei RGB-Mischungen häufig vorkommen.