Paletten-Balancer
Check palette contrast against a base color and auto-suggest accessible tweaks.
Summary
No colors meet target
No adjustments needed
Results
Add HEX colors to evaluate contrast.
Tips
- Keep at least AA (4.5:1) for text on brand surfaces.
- Test both light and dark modes—base color shifts can change results.
- Export CSS variables or JSON to sync with design systems.
Überblick
Gleicht Markenpaletten mit einer gewählten Hintergrundfarbe ab, um Barrierefreiheitsziele schnell zu erreichen.
Anleitung
- Basis-Hintergrundfarbe und Ziel-Kontrastverhältnis festlegen.
- Paletten-HEX-Werte oder eine kommagetrennte Liste einfügen.
- Anpassungsvorschläge prüfen und CSS/JSON-Tokens exportieren.
Anwendungsfälle
- Markenfarben in Dashboards und UI-Shells auf AA-Konformität prüfen.
- Zugängliche Alternativpaletten für Kampagnen vorschlagen.
- Dark-Mode-Varianten vor Design-Reviews auditieren.
Tipps & Wissen
- Finale Farben in echten Komponenten testen – Overlays können den Kontrast verschieben.
- Paletten-Dokumentation mit Design-Tokens synchron halten, um Drift zu vermeiden.
- JSON-Exporte mit Designsystem- oder QA-Teams teilen.