Farbpalette & Kontrastprüfer
Paletten erzeugen und WCAG 2.1 Kontrast prüfen (AA/AAA). Auf eine Farbprobe klicken, um sie als Vorder- (FG) oder Hintergrundfarbe (BG) zu verwenden.
Paletten-Generator
Wähle eine Basisfarbe und ein Schema. Jede Probe zeigt Tönungen → Basis → Schattierungen. Mit den „Auf FG/auf BG anwenden“-Pillen bestimmst du, wohin ein Klick eine Probe setzt.
Basisfarbe
Schema
Schritte (Tönungen/Schattierungen)
Kontrastprüfer
AA erfordert 4.5:1 für normalen Text und 3.0:1 für großen Text (≥24px normal oder ≥18.66px fett). AAA ist strenger: 7.0:1 normal und 4.5:1 groß.
Vordergrund
Hintergrund
Beispieltext
Schriftgröße (px)
Stärke
Kontrast: —
AA Normal: —
AA Groß: —
AAA Normal: —
AAA Groß: —
Vorschautext
Badge
Tabelle: Palette-Farben vs. aktueller Hintergrund
| Farbe | Hex | Verhältnis | AA N | AA G | AAA N | AAA G |
|---|
Was diese Zahlen bedeuten
- Kontrast verwendet die relative Leuchtdichte (Y) im sRGB-Farbraum mit
(Lhell+0.05)/(Ldunkel+0.05). - „Großer“ Text = ≥24px normal oder ≥18.66px fett.
- WCAG AA/AAA Schwellenwerte: 4.5/7.0 für normal; 3.0/4.5 für groß.
- „CSS-Variablen kopieren“ exportiert
--color-fg,--color-bgund die ersten 12 Palettenfarben als--color-01..12.