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 Chromaforge-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 barrièrefreie Palette ist nicht nur optisch schon: Jede Kombination aus Textfarbe und Hintergrundfarbe muss die WCAG-Kontrastverhältnisse erf?llen, um für alle Nutzer lesbar zu sein, einschliesslich Menschen mit Sehbeeintr?chtigungen.
Chromaforge generiert barrièrefreie 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 Ubergange erzeugt.
- Schritt 3 — Automatische Prufung: Jede Text/Hintergrund-Kombination wird getestet. Paare, die AA bestehen, werden grun markiert; Versager werden gekennzeichnet.
- Schritt 4 — Assistierte Anpassung: Für fehlschlagende Paare schlagt das Tool automatisch eine angepasste Version vor, die das gewunschte Niveau (AA oder AAA) erfullt.
Ergebnis: Eine vollstandige Palette, bei der du genau weisst, welche Farben auf welchen Hintergrunden verwendet werden konnen.
Praktische Beispiele
Farbzuganglichkeit ist in diesen Kontexten nicht optional:
- Behordliche und offentliche Dienste: BITV 2.0 (Barrièrefreie-Informationstechnik-Verordnung) schreibt für alle deutschen offentlichen 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 altere Benutzer benotigen 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 — Farbzuganglichkeit
Was ist der Unterschied zwischen WCAG 2.1 und WCAG 3.0 bei Kontrasten?
WCAG 2.1 verwendet das Kontrastverhaeltnis basierend auf relativer Luminanz (klassischer Algorithmus). WCAG 3.0, noch im Entwurf, f?hrt APCA (Advanced Perceptual Contrast Algorithm) ein, der Schriftgrosse, Schriftgewicht und Lesungskontext feiner berucksichtigt. Chromaforge berechnet nach WCAG 2.1, dem aktuell gultigem und rechtlich gefordertem Standard.
Meine Markenfarbe erfullt AA auf weissem 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 (Hintergrunde, Icons) und nicht auf Text. 3) Erstelle eine "text-sichere" Variante deiner Farbe, die dunkel genug für Texte ist. Chromaforge kann die minimal notige Version berechnen, die AA besteht.
Zahlen Hintergrundbilder für den Kontrast?
Ja, wenn Text daruber liegt. Beurteile den Kontrast an der problematischsten Stelle des Bildes (hellste Zone bei dunklem Text). Die empfohlene Praxis ist, eine halbtransparente Farbuberlagerung zwischen Bild und Text einzufugen, um einen konstanten Kontrast zu gewahrleisten.
Wird Farbenblindheit in den WCAG-Berechnungen berucksichtigt?
WCAG 2.1-Verhältnisse testen nicht spezifisch Farbenblindheit, aber ein hohes Luminanzverhaeltnis hilft oft auch farbenblinden Nutzern. Um Farbenblindheit gezielt zu testen, verwende erganzend einen Farbsehsimulator (Deuteranopie, Protanopie, Tritanopie).