Accessible Color Palette Generator & Contrast Checker
Generate WCAG-compliant 5-color palettes and test custom foreground/background pairs against Level AA and AAA standards.
Accessibility Contrast Matrix
| #000000 | #222222 | #777777 | #CCCCCC | #FFFFFF | |
|---|---|---|---|---|---|
| #000000 | - | 1.32:1 | 4.69:1 | 13.08:1 | 21.00:1 |
| #222222 | 1.32:1 | - | 3.55:1 | 9.91:1 | 15.91:1 |
| #777777 | 4.69:1 | 3.55:1 | - | 2.79:1 | 4.48:1 |
| #CCCCCC | 13.08:1 | 9.91:1 | 2.79:1 | - | 1.61:1 |
| #FFFFFF | 21.00:1 | 15.91:1 | 4.48:1 | 1.61:1 | - |
Technical Architecture: Reverse-Engineering WCAG 2.1 Relative Luminance​
Web Content Accessibility Guidelines (WCAG 2.1) require sufficient visual contrast between text and its background to ensure readability for users with low vision or color vision deficiencies. Calculating accurate contrast requires transforming non-linear sRGB values into linear relative luminance.
1. sRGB Linearization & Relative Luminance (L)​
Because human perception of light is non-linear, 8-bit sRGB color channels (0-255) undergo gamma expansion according to W3C specifications:
function getRelativeLuminance(r: number, g: number, b: number): number {
const [rLin, gLin, bLin] = [r, g, b].map((val) => {
const s = val / 255;
return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
});
// ITU-R Recommendation BT.709 spectral weighting coefficients
return 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
}
The spectral weights reflect human eye sensitivity: human vision is most sensitive to green light (71.52%), moderately sensitive to red (21.26%), and least sensitive to blue (7.22%).
2. Contrast Ratio Formula​
With the relative luminance of the lighter color ($L_1$) and darker color ($L_2$) calculated, the contrast ratio is defined as:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
The constant offset 0.05 accounts for ambient light flare reflected from display glass surfaces. Contrast ratios range from 1:1 (identical colors) up to 21:1 (pure black #000000 on pure white #ffffff).
WCAG 2.1 Accessibility Thresholds​
| Compliance Standard | Normal Body Text (< 18pt / 24px) | Large Text (≥ 18pt or ≥ 14pt Bold) | Interactive UI Components & Icons |
|---|---|---|---|
| WCAG Level AA (Mandatory Minimum) | 4.5 : 1 | 3.0 : 1 | 3.0 : 1 |
| WCAG Level AAA (Enhanced Standard) | 7.0 : 1 | 4.5 : 1 | Optional (Recommended) |
Client-Side Security & Zero-Server Data Isolation​
- 100% In-Browser Execution: Luminance analysis, palette pairing, and contrast matrix checks run entirely in local JavaScript memory.
- Confidential Brand Colors: Proprietary enterprise design systems and confidential UI redesign palettes are never transmitted to external APIs or analytics servers.
- Instant Token Export: Copy accessible CSS variables directly to your clipboard for immediate integration into Tailwind, CSS modules, or Figma tokens.
Get notified about updates to this tool
No spam. Just high-quality updates about new features and guides.
Related Tools​
Related Posts​
Markdown is a lightweight markup language that allows you to format plain text. It is widely used for documentation, writing articles, and creating web content.
A guide for senior developers on identifying and avoiding off-by-one errors in JavaScript with practical code examples.
You can check the history of a specific line in VS Code using the built-in features or the specific view. You can also install the free extension.