WCAG Accessible Color Generator
Create accessible color combinations that meet WCAG standards.
Get auto-suggested colors and copy CSS custom properties.
Sample Text
The quick brown fox jumps over the lazy dog.
This is an example of body text to help you visualize how your color combination will look in real content.
WCAG Compliance
Large text is defined as 18pt (24px) or 14pt (18.5px) bold. Normal text is anything smaller.
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
/* Contrast ratio: 17.4:1 - Passes WCAG AAA */
}Understanding WCAG Contrast Requirements
Level AA (Minimum)
- 4.5:1 for normal text (under 18pt or 14pt bold)
- 3:1 for large text (18pt+ or 14pt+ bold)
- Required for WCAG 2.0/2.1 Level AA compliance
Level AAA (Enhanced)
- 7:1 for normal text
- 4.5:1 for large text
- Highest level of accessibility compliance
How the WCAG Formula Works
The contrast ratio is calculated by comparing the relative luminance of both colors. Luminance values range from 0 (black) to 1 (white). The formula is:(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter color's luminance and L2 is the darker color's luminance.
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes