Zugängliche Farbpalette
Entwirf Paletten, die Interface-Text lesbar und WCAG-freundlich halten.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromoforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Eine barrierefreie Palette ist nicht nur optisch schön: Jede Kombination aus Textfarbe und Hintergrundfarbe muss die WCAG-Kontrastverhältnisse erfüllen, um für alle Nutzer lesbar zu sein, einschließlich Menschen mit Sehbeeinträchtigungen.
Chromoforge generiert barrierefreie Paletten durch einen strengen Prozess:
- Schritt 1 — Basisfarbe: Gib deine Hauptfarbe (z.B. Markenfarbe) ein. Das Tool analysiert sie und berechnet ihre relative Luminanz.
- Schritt 2 — Nuancengenerierung: Hellere und dunklere Varianten werden durch Helligkeitsanpassungen im perceptuellen OKLCH-Farbraum für visuell lineare Übergänge erzeugt.
- Schritt 3 — Automatische Prüfung: Jede Text/Hintergrund-Kombination wird getestet. Paare, die AA bestehen, werden grün markiert; Versager werden gekennzeichnet.
- Schritt 4 — Assistierte Anpassung: Für fehlschlagende Paare schlägt das Tool automatisch eine angepasste Version vor, die das gewünschte Niveau (AA oder AAA) erfüllt.
Ergebnis: Eine vollständige Palette, bei der du genau weißt, welche Farben auf welchen Hintergründen verwendet werden können.
Praktische Beispiele
Farbzugänglichkeit ist in diesen Kontexten nicht optional:
- Behördliche und öffentliche Dienste: BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) schreibt für alle deutschen öffentlichen Websites Niveau AA vor. Eine validierte Palette verhindert Nicht-Konformität.
- Design-System-Komponenten: Dokumentiere in deinem Storybook oder Figma, welche Farb-/Hintergrundkombinationen genehmigt sind, damit das Team sie korrekt verwendet.
- Medizinische und finanzielle Anwendungen: Gestresste oder ältere Benutzer benötigen hohe Kontraste. Strebe in diesen Bereichen AAA an.
- HTML-E-Mails: E-Mail-Clients rendern Farben manchmal unterschiedlich. Verwende ausreichend hohe Kontraste, um Rendering-Variationen zu kompensieren.
FAQ — Farbzugänglichkeit
Was ist der Unterschied zwischen WCAG 2.1 und WCAG 3.0 bei Kontrasten?
WCAG 2.1 verwendet das Kontrastverhältnis basierend auf relativer Luminanz (klassischer Algorithmus). WCAG 3.0, noch im Entwurf, führt APCA (Advanced Perceptual Contrast Algorithm) ein, der Schriftgröße, Schriftgewicht und Lesungskontext feiner berücksichtigt. Chromoforge berechnet nach WCAG 2.1, dem aktuell gültigen und rechtlich geforderten Standard.
Meine Markenfarbe erfüllt AA auf weißem Hintergrund nicht. Was tun?
Drei Optionen: 1) Dunkel die Farbe ab, bis das Verhältnis erreicht ist (der Farbton bleibt erkennbar). 2) Verwende die Markenfarbe nur als Dekoration (Hintergründe, Icons) und nicht auf Text. 3) Erstelle eine "text-sichere" Variante deiner Farbe, die dunkel genug für Texte ist. Chromoforge kann die minimal nötige Version berechnen, die AA besteht.
Zahlen Hintergrundbilder für den Kontrast?
Ja, wenn Text darüber liegt. Beurteile den Kontrast an der problematischsten Stelle des Bildes (hellste Zone bei dunklem Text). Die empfohlene Praxis ist, eine halbtransparente Farbüberlagerung zwischen Bild und Text einzufügen, um einen konstanten Kontrast zu gewährleisten.