Zugängliche Farbpalette
Generiere eine Palette im Haupttool und prüfe die vorgesehenen Text-Hintergrund-Paare. Der Export bleibt auch verfügbar, wenn ein Paar die Prüfung nicht besteht.
Diese Anleitung erklärt den Ablauf. Nutze das unten verlinkte Haupttool, um Farben zu generieren und Dateien zu exportieren.
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.
Das Kontrastpanel zeigt starke und schwache Kombinationen. Prüfe jedes vorgesehene Paar manuell, auch mit Farben außerhalb der generierten Palette.
- 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 — Kontrast: Der Generator erzeugt Harmonien und Nuancen. Der WCAG-Prüfer bewertet ein ausgewähltes Text-Hintergrund-Paar. Nutze beide Schritte: Eine Palette kann dekorative Farben enthalten, die sich nicht für normalen Text eignen.
- Schritt 4 — Manuelle Anpassung: Wähle eine andere Nuance oder ändere die Eingabefarbe und prüfe das Paar erneut.
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:
- Barrierefreiheitsprüfung: Dokumentiere jedes Text-Hintergrund-Paar der Oberfläche und prüfe es im jeweiligen Kontext.
- 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
Welches Kontrastmodell nutzt Chromoforge?
Chromoforge nutzt das WCAG-2.x-Modell mit relativer Luminanz. WCAG 2.2 verlangt 4,5:1 für normalen AA-Text und 3:1 für großen AA-Text. Das Tool berechnet kein APCA.
Meine Markenfarbe erfüllt AA auf weißem Hintergrund nicht. Was tun?
Probiere eine dunklere Nuance für Text auf Weiß, eine andere Textfarbe oder nutze die Markenfarbe als Dekoration. Ändere die Farbe manuell und prüfe das Paar im Kontrastpanel.
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.
Mit diesen Tools weitermachen
Passende Werkzeuge und Anleitungen
Praktisches Beispiel
Prüfe den tatsächlichen Text zusammen mit seinem Hintergrund. Farbname oder Tonnummer garantieren keine Lesbarkeit.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */