← Back to Home

🎨 WCAG Accessible Color Palette Generator

📌 This tool has been merged into color palette generator. Please use the new version.
intext EN
Home › Design Tools › Accessible Color Palette Generator

Auto-generate WCAG 2.1 AA/AAA compliant color schemes with real-time contrast checking and color blindness simulation

Zero Dependencies · Works Offline

🎯 Base Color Configuration

👁️ Color Blindness Simulation

📐 Contrast Matrix

📊 Contrast Results

💻 CSS Variables

WCAG Accessible Color Palette Generator - Auto Colorblind-Friendly Color Schemes

The WCAG Accessible Color Palette Generator is a free online tool that helps designers and developers automatically generate color schemes compliant with WCAG 2.1 accessibility standards. The tool provides real-time contrast checking, color blindness simulation preview, and one-click CSS variable export, ensuring your designs are friendly and accessible to all users.

Core Features

What is WCAG Contrast?

The Web Content Accessibility Guidelines (WCAG) 2.1 require sufficient brightness contrast between text and background to ensure content is readable for users with visual impairments. AA level requires normal text contrast of at least 4.5:1 and large text at least 3:1. AAA level is stricter, requiring 7:1 for normal text and 4.5:1 for large text.

Colorblind-Friendly Design Principles

When designing colorblind-friendly interfaces, do not rely solely on color to convey information. Recommendations: 1) Use color + shape/texture/text label combinations; 2) Avoid red-green color schemes; 3) Ensure different colors have brightness differences under colorblind vision; 4) Use this tool's color blindness simulation to verify designs.

Frequently Asked Questions

What are WCAG contrast standards?▼
WCAG 2.1 contrast standards require sufficient visual distinction between text and background. AA level requires: normal text (under 18pt) contrast ≥ 4.5:1, large text (≥ 18pt or 14pt bold) contrast ≥ 3:1. AAA level requires: normal text contrast ≥ 7:1, large text contrast ≥ 4.5:1. Non-text elements require contrast ≥ 3:1.
Why do I need a colorblind-friendly palette?▼
Approximately 8% of males and 0.5% of females worldwide have color vision deficiency. If a design relies solely on color to convey information, colorblind users may not be able to understand the content correctly.
How is contrast ratio calculated?▼
Contrast ratio formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance is calculated by converting RGB to linear space and weighting by 0.2126R + 0.7152G + 0.0722B.
Which color blindness types are simulated?▼
Three common types: Protanopia (red-blind), Deuteranopia (green-blind, most common), Tritanopia (blue-blind), plus Protanomaly and Deuteranomaly.
Is palette data uploaded?▼
No. This tool runs entirely in the browser locally. All color calculations, contrast checks, and color blindness simulations are performed on the client side.
`).join('')+''} function renderContrastResults(prgb,brgb,req,reqL){const cr=contrastRatio(prgb,brgb);const crInv=contrastRatio(hexToRgb('#e2e8f0'),brgb);const crSub=contrastRatio(hexToRgb('#94a3b8'),brgb);const out=document.getElementById('contrast-results');out.innerHTML=`
Primary/BG
${cr.toFixed(2)}:1 ${cr>=req?'✅ AA+AAA':cr>=reqL?'⚠️ AA large only':'❌ Non-compliant'}
Text/BG
${crInv.toFixed(2)}:1 ${crInv>=req?'✅ AA+AAA':'❌'}
Muted/BG
${crSub.toFixed(2)}:1 ${crSub>=req?'✅ AA+AAA':crSub>=reqL?'⚠️ AA large only':'❌'}
`} function renderContrastMatrix(){const keys=[0,3,6,7];const m=document.getElementById('contrast-matrix');let html='';keys.forEach(i=>{html+=``});html+='';keys.forEach(i=>{html+=``;keys.forEach(j=>{const cr=contrastRatio(palette[i].rgb,palette[j].rgb);const cls=cr>=7?'contrast-pass':cr>=4.5?'contrast-warn':'contrast-fail';html+=``});html+=''});html+='
${palette[i].name}
${palette[i].name}		${cr.toFixed(1)}:1
';m.innerHTML=html} function renderCVDSimulation(){const out=document.getElementById('cvd-preview');const colors=palette.slice(0,6);let html='
';colors.forEach(c=>{const sim=cvdType==='normal'?c.rgb:simulateCVD(c.rgb,cvdType);const hex=cvdType==='normal'?c.hex:rgbToHex(sim.r,sim.g,sim.b);html+=`
${c.name}
${hex}
`});html+='
';const prgb=colors[0].rgb,brgb=colors[3].rgb;const sP=cvdType==='normal'?prgb:simulateCVD(prgb,cvdType);const sB=cvdType==='normal'?brgb:simulateCVD(brgb,cvdType);const cr=contrastRatio(sP,sB);const pHex=cvdType==='normal'?colors[0].hex:rgbToHex(sP.r,sP.g,sP.b);const bHex=cvdType==='normal'?colors[3].hex:rgbToHex(sB.r,sB.g,sB.b);html+=`

Heading Text Preview

Body text preview - Contrast ${cr.toFixed(2)}:1 ${cr>=4.5?'✅':'❌'}

`;out.innerHTML=html} function renderCSS(){const out=document.getElementById('css-output');out.textContent=`:root {\n${palette.map(c=>` --color-${c.name.replace(/\s/g,'-')}: ${c.hex};`).join('\n')}\n}`} function copyCSS(){const text=document.getElementById('css-output').textContent;navigator.clipboard.writeText(text).then(()=>showToast())} function showToast(){const t=document.getElementById('copy-toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1500)} function toggleFaq(el){el.classList.toggle('open')} generatePalette();