Color Accessibility & Palette Studio
Create accessible color palettes from scratch or images. Check WCAG 2.2 contrast, generate correction candidates, simulate color vision deficiency, and export to CSS, Tailwind, or JSON.
- Rigorous WCAG 2.2 relative luminance and contrast ratio checking (AA, AAA, Non-text)
- Automated OKLCH minimum-distance color correction preserving original hue
- Client-side image color extraction with Median Cut quantization and zero server uploads
- Color vision deficiency simulations (Protanopia, Deuteranopia, Tritanopia, Achromatopsia)
- Multi-format code export: CSS variables, SCSS, Tailwind CSS, Design Tokens JSON, SVG, and PNG
Start From
Color Inspector
Enter Base Color (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Palette Swatches
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
WCAG 2.2 Contrast Verification
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.
Accessible Color Suggestions (Minimum OKLCH Change)
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 | — |
Component Previews
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
Color Vision Deficiency Simulation
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Mathematical approximation simulation. Actual visual perception varies by individual.
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
Gradient Contrast & Risk Analysis
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%);Image Overlay Readability
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);Export Code & Assets
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;
}
}About Color Accessibility & Palette Studio
Solasu's Color Accessibility & Palette Studio is far more than a basic color picker or simple contrast checker.
It provides a complete professional design workflow: build color combinations from scratch, extract palettes from uploaded images, verify WCAG 2.2 contrast criteria (AA, AAA, and Non-text UI components), generate minimum-change color corrections in OKLCH, preview real UI components in Light and Dark themes, simulate color vision deficiencies, and export implementation-ready code for CSS, Tailwind, SCSS, JSON, SVG, PNG, and ZIP archives.
All processing executes entirely in your browser memory. Your images and brand colors are never transmitted to any external server.
Rigorous Contrast Calculation Based on W3C / WCAG 2.2 Standards
Contrast is calculated using the official W3C WCAG 2.2 relative luminance formula with exact sRGB gamma linearization (L = 0.2126*R + 0.7152*G + 0.0722*B), rather than naive RGB arithmetic differences.
The studio independently evaluates Normal Text (AA: 4.5:1, AAA: 7.0:1), Large Text (AA: 3.0:1, AAA: 4.5:1), and Non-text UI Components (3.0:1), presenting precise deficit numbers when criteria are not met.
Minimum-Change Color Correction in Perceptually Uniform OKLCH Space
When color pairs fail contrast requirements, our automated algorithm performs binary search in the perceptually uniform OKLCH color space. This preserves the original hue angle and nuance while adjusting lightness just enough to clear the threshold.
Choose between Fixed Background (adjust foreground), Fixed Foreground (adjust background), or Dual Adjustment modes, with objective Delta E distance metrics (Small, Medium, Large).
Client-Side Image Color Extraction with Median Cut Quantization
Upload JPEG, PNG, or WebP images to automatically extract dominant, accent, neutral, dark, and light colors. The Median Cut algorithm ensures representative clustering while discarding semi-transparent pixels (alpha < 128).
Images are safely downsampled to 1000px before analysis to prevent browser memory exhaustion, backed by an 8192px / 64MP hard boundary guard.
Color Vision Deficiency Simulation & Multi-Component UI Previews
Simulate Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-yellow blind), and Achromatopsia (monochromacy) using linear transformation matrices on swatches, dashboards, forms, and charts.
Under WCAG 2.2 SC 1.4.1 (Use of Color), the studio flags UI components that convey status purely through color, demonstrating accessible multi-cue designs combining color, icons, and text labels.
Production-Ready Export to CSS, Tailwind CSS, JSON Tokens, & ZIP
Export your tokens to CSS custom properties (with hover, active, focus states, and dark mode media queries), Tailwind CSS v3 config and v4 CSS `@theme` blocks, SCSS variables, and W3C Design Tokens JSON.
Download clean SVG vector swatches, PNG preview sheets, or a bundled ZIP archive containing all project assets.
Frequently Asked Questions
Is this tool free? Do I need to create an account?
Yes, it is 100% free with no account registration, logins, or hidden subscriptions required. Simply open the page and use it immediately.
Are my uploaded images or palette colors saved on a server?
No. All image decoding, quantization, contrast calculations, and code exports execute strictly within your local browser. Zero network requests are made.
What color code formats are supported?
The studio supports HEX (3, 4, 6, and 8 digits), RGB, RGBA, HSL, HSLA, HSV, and modern CSS OKLCH formats.
How is the WCAG 2.2 contrast ratio calculated?
Following official W3C specifications, channels are linearised from sRGB gamma space to calculate relative luminance (L). The ratio is (Lighter + 0.05) / (Darker + 0.05).
What is the difference between AA and AAA contrast levels?
WCAG 2.2 Level AA requires at least 4.5:1 for normal body text and 3.0:1 for large text. Level AAA requires at least 7.0:1 for normal body text and 4.5:1 for large text.
What qualifies as 'Large Text' under WCAG 2.2?
Large text is defined as at least 18pt (approximately 24px) regular weight, or at least 14pt (approximately 18.66px) bold weight.
What is Non-text Contrast in WCAG 2.2?
Under Success Criterion 1.4.11, user interface components such as form borders, button outlines, and graphical icons must have a contrast ratio of at least 3.0:1 against adjacent background colors.
How does the minimum-change correction algorithm work?
It uses binary search on lightness (L) in the perceptually uniform OKLCH space to discover the closest sRGB color that satisfies the requested contrast threshold while keeping hue and chroma as close to the original as possible.
What does 'Minimum Change' mean mathematically?
It minimizes the Euclidean color difference (Delta E) in Oklab space, ensuring brand identity and aesthetic intent are preserved while achieving accessibility compliance.
How are colors extracted from an uploaded image?
The image is rendered on an HTML5 canvas and processed with the Median Cut color quantization algorithm, grouping pixels into dominant, accent, neutral, dark, and light swatches.
How are transparent pixels in PNG images handled?
Pixels with an alpha channel below 128 (semi-transparent or fully transparent) are automatically excluded from quantization to avoid skewing palette colors.
Can I upload high-resolution or large images?
Yes. Images are automatically downsampled to 1000px on the longest edge before analysis, ensuring fast processing without freezing your browser. A 64MP / 8192px hard safety boundary protects system memory.
Does the colorblind simulation exactly replicate color vision deficiency?
No. Simulations are mathematical approximations using standard linear transformation matrices (Brettel / Machado models). Actual color perception varies among individuals.
Which color vision deficiency types can be simulated?
The studio simulates Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-yellow blind), and Achromatopsia (total monochromacy).
Why should charts and data visualizations not rely on color alone?
Under WCAG 2.2 SC 1.4.1, color must not be the only visual means of conveying information. Accessible charts use line patterns (solid, dashed, dotted), marker shapes, and direct text labels.
How are Dark Mode palettes generated and audited?
The studio pairs primary and accent colors against dark background tones (#0F172A), re-evaluates contrast across all semantic roles, and ensures adequate legibility in both themes.
How is contrast evaluated across gradients?
A gradient cannot be reduced to a single contrast ratio. The studio samples 11 points across the gradient stops against the text color and highlights localized contrast drop risks.
What are the rules for placing text over photographic images?
The studio analyzes overall image luminance, suggests whether white or dark text is preferable, and calculates the optimal opacity for a semi-transparent scrim overlay to guarantee >= 4.5:1 contrast.
Is Tailwind CSS export supported?
Yes, both Tailwind CSS v3 `theme.extend.colors` configuration and modern Tailwind CSS v4 `@theme` CSS variable blocks are generated.
What is included in the downloadable ZIP package?
The ZIP bundle includes `palette.css`, `palette.scss`, `tailwind.config.js`, `tokens.json`, `palette.svg`, and `palette.png`.
Does this studio work on mobile devices and tablets?
Yes. The responsive interface is fully functional on mobile viewports (iOS Safari and Android Chrome), with dedicated mobile and desktop preview frames.
Does passing contrast ratios guarantee full WCAG accessibility?
No. Contrast is a crucial requirement, but full WCAG 2.2 conformance also requires keyboard navigability, screen reader semantics, scalable font sizing, and accessible interaction patterns.