Farb-Barrierefreiheit & Paletten-Studio
Erstellen Sie barrierefreie Farbpaletten von Grund auf oder aus Bildern, prüfen Sie den WCAG 2.2 Kontrast, simulieren Sie Farbfehlsichtigkeiten und exportieren Sie nach CSS, Tailwind und JSON.
- Präzise Überprüfung der relativen Leuchtdichte und des Kontrastverhältnisses nach WCAG 2.2 (AA, AAA und Nicht-Text)
- Automatische OKLCH-Farbkorrektur mit minimaler Farbverschiebung zur Wahrung der Ausgangsnuance
- Lokale Palettenextraktion im Browser mittels Median-Cut-Algorithmus ohne Server-Upload
- Simulation von Farbenblindheit (Protanopie, Deuteranopie, Tritanopie, Achromatopsie) in realen Komponenten
- Code-Export in diverse Formate: CSS-Variablen, SCSS, Tailwind CSS, Design Tokens JSON, SVG und PNG
Start From
Color Inspector
Basisfarbe eingeben (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Farbfelder der Palette
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
WCAG 2.2 Kontrastprüfung
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
Barrierefreie Vorschläge (minimale OKLCH-Anpassung)
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
Vorschau realer UI-Komponenten
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
Simulation von Farbfehlsichtigkeiten
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Mathematische Näherungssimulation. Die tatsächliche individuelle Wahrnehmung kann variieren.
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
Kontrast-Risikoanalyse für Verläufe
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);Textlesbarkeit auf Bildhintergrund
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);Code und Dateien exportieren
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}Über das Farb-Barrierefreiheit & Paletten-Studio
Das Farb-Barrierefreiheit & Paletten-Studio von Solasu ist ein umfassendes Design-Werkzeug, das weit über einfache Farbpaletten-Generatoren hinausgeht.
Es bietet einen durchgängigen Workflow: Farbkombinationen zusammenstellen, Farbpaletten aus hochgeladenen Fotos extrahieren, WCAG 2.2 Kontrastanforderungen (Stufen AA, AAA sowie UI-Komponenten) überprüfen, minimale OKLCH-Farbkorrekturen berechnen, UI-Komponenten in Hell- und Dunkel-Modi testen, Farbfehlsichtigkeiten simulieren und einsatzbereiten Code für CSS, Tailwind, JSON, SVG, PNG und ZIP-Pakete exportieren.
Alle Berechnungen laufen zu 100% lokal im Browser ab, ohne jegliche Serverübertragung.
Präzise Kontrastberechnung nach W3C / WCAG 2.2 Standards
Verwendet die offizielle sRGB-Gammalinearisierung zur Ermittlung der relativen Leuchtdichte (L = 0.2126*R + 0.7152*G + 0.0722*B).
Prüft unabhängig normalen Text (AA: 4.5:1, AAA: 7.0:1), großen Text (AA: 3.0:1, AAA: 4.5:1) und Nicht-Text-Bedienelemente (3.0:1).
Farbkorrektur mit «minimaler Verschiebung» im OKLCH-Farbraum
Bei unzureichendem Kontrast berechnet das Tool per binärer Helligkeitssuche in OKLCH die nächstgelegene sRGB-Farbe, die den Grenzwert erfüllt, ohne den ursprünglichen Farbton zu verfälschen.
Auswahl zwischen festem Hintergrund, festem Text oder dualer Anpassung mit Delta E Abstandsbewertung.
Lokale Farbextraktion aus Bildern (Median Cut)
Extrahiert automatisch dominante, Akzent-, neutrale, dunkle und helle Farben aus JPEG, PNG und WebP, wobei transparente Pixel ignoriert werden.
Automatische Skalierung auf 1000px und 64MP-Sicherheitsgrenze schützen den Arbeitsspeicher.
Simulation von Farbenblindheit und Komponenten-Vorschau
Simuliert Protanopie, Deuteranopie, Tritanopie und Achromatopsie auf Dashboards, Formularen und Diagrammen.
Warnung gemäß WCAG 2.2 Erfolgskriterium 1.4.1, Statusinformationen nicht ausschließlich über Farbe zu vermitteln.
Produktionsreifer Export in CSS, Tailwind und JSON
Erzeugt CSS-Variablen inklusive Hover- und Dark-Mode-Regeln, Tailwind CSS v3 Konfigurationen und v4 `@theme`-Blöcke, W3C Design Tokens JSON und ZIP-Archive.
Häufig gestellte Fragen (FAQ)
Ist dieses Werkzeug kostenlos? Ist eine Registrierung nötig?
Ja, es ist zu 100% kostenlos und erfordert weder Anmeldung noch ein Benutzerkonto.
Werden meine Bilder oder Farbwerte auf einem Server gespeichert?
Nein. Alle Berechnungen erfolgen lokal im Browser ohne Netzwerkübertragung.
Welche Farbformate werden unterstützt?
Unterstützt werden HEX (3, 4, 6 und 8 Stellen), RGB, RGBA, HSL, HSLA, HSV und OKLCH.
Wie wird das WCAG 2.2 Kontrastverhältnis berechnet?
Über die relative Helligkeit nach der Formel (Heller + 0.05) / (Dunkler + 0.05).
Was ist der Unterschied zwischen Stufe AA und AAA?
AA verlangt 4.5:1 für normalen und 3.0:1 für großen Text; AAA verlangt 7.0:1 bzw. 4.5:1.
Was gilt als «großer Text»?
Text mit mindestens 18pt (ca. 24px) oder 14pt (ca. 18.66px) im Fettdruck.
Was besagt der Nicht-Text-Kontrast?
Kriterium 1.4.11 fordert mindestens 3.0:1 für Eingaberahmen, Icons und Buttons gegenüber dem Hintergrund.
Wie funktioniert die Korrekturempfehlung?
Passt die Helligkeit im OKLCH-Farbraum an, um den am nächsten liegenden passenden Farbwert zu ermitteln.
Was bedeutet «minimale Verschiebung»?
Minimiert den Farbabstand Delta E in Oklab, um das Branding möglichst unverändert beizubehalten.
Wie werden Farben aus Bildern extrahiert?
Mittels des Median-Cut-Algorithmus direkt auf dem Canvas-Element im Browser.
Wie werden transparente Pixel in PNGs behandelt?
Pixel mit einem Alpha-Wert unter 128 werden bei der Extraktion automatisch verworfen.
Kann ich sehr hochauflösende Fotos hochladen?
Ja, Bilder werden vor der Analyse automatisch auf 1000px herunterskaliert.
Ist die Simulation von Farbenblindheit exakt?
Es ist ein anerkanntes mathematisches Modell, wenngleich die reale Wahrnehmung individuell variiert.
Welche Fehlsichtigkeiten können simuliert werden?
Protanopie (Rotblindheit), Deuteranopie (Grünblindheit), Tritanopie (Blaublindheit) und Achromatopsie.
Warum sollten Diagramme nicht nur auf Farbe setzen?
Menschen mit Farbfehlsichtigkeiten können Datenreihen nur anhand von Strichmustern und Beschriftungen trennen.
Wie wird der Dunkelmodus optimiert?
Farben werden für dunkle Hintergründe (#0F172A) angepasst und erneut auf Kontrast geprüft.
Wie wird der Kontrast auf Farbverläufen ermittelt?
Es werden 11 Punkte des Verlaufs geprüft und kritische Abschnitte unter 4.5:1 gewarnt.
Welche Empfehlungen gibt es für Text auf Fotos?
Analysiert die durchschnittliche Helligkeit und berechnet die nötige Deckkraft einer Blende.
Wird Tailwind CSS unterstützt?
Ja, es werden Konfigurationen für Tailwind v3 und moderne `@theme`-Blöcke für Tailwind v4 ausgegeben.
Was enthält das herunterladbare ZIP-Paket?
Enthält palette.css, palette.scss, tailwind.config.js, tokens.json, palette.svg und palette.png.
Funktioniert das Tool auf Smartphones?
Ja, die Benutzeroberfläche ist vollständig responsiv für Touchscreens und Mobilgeräte.
Bedeutet ausreichender Kontrast bereits vollständige Barrierefreiheit?
Nein, Kontrast ist essenziell, aber Tastaturbedienbarkeit und Screenreader-Unterstützung sind ebenso wichtig.