🎨 Color Scale Generator
50
#F5F9FF
100
#E1ECFE
200
#B7D1FC
300
#8EB7FA
400
#649CF8
500
#3B82F6
600
#3472D7
700
#2C62B9
800
#25519A
900
#1E417B
👀 WCAG Compliant Combinations
Showing all 15 combinations that meet minimum accessibility standards (≥3:1)
| Foreground | Background | Contrast | Level | Min Text Size | Preview |
|---|---|---|---|---|---|
color1-50 | color1-900 | 9.5:1 | AAA | Any size | Sample Text |
color1-100 | color1-900 | 8.4:1 | AAA | Any size | Sample Text |
color1-50 | color1-800 | 7.3:1 | AAA | Any size | Sample Text |
color1-100 | color1-800 | 6.5:1 | AA | 16px / 12pt | Sample Text |
color1-200 | color1-900 | 6.5:1 | AA | 16px / 12pt | Sample Text |
color1-50 | color1-700 | 5.6:1 | AA | 16px / 12pt | Sample Text |
color1-100 | color1-700 | 5:1 | AA | 16px / 12pt | Sample Text |
color1-200 | color1-800 | 5:1 | AA | 16px / 12pt | Sample Text |
color1-300 | color1-900 | 4.9:1 | AA | 16px / 12pt | Sample Text |
color1-50 | color1-600 | 4.4:1 | AA Large | 18px / 14pt | Sample Text |
color1-100 | color1-600 | 3.9:1 | AA Large | 18px / 14pt | Sample Text |
color1-200 | color1-700 | 3.8:1 | AA Large | 18px / 14pt | Sample Text |
color1-300 | color1-800 | 3.8:1 | AA Large | 18px / 14pt | Sample Text |
color1-400 | color1-900 | 3.6:1 | AA Large | 18px / 14pt | Sample Text |
color1-50 | color1-500 | 3.5:1 | AA Large | 18px / 14pt | Sample Text |
💻 Code Snippet
:root {
--color1-50: #F5F9FF;
--color1-100: #E1ECFE;
--color1-200: #B7D1FC;
--color1-300: #8EB7FA;
--color1-400: #649CF8;
--color1-500: #3B82F6;
--color1-600: #3472D7;
--color1-700: #2C62B9;
--color1-800: #25519A;
--color1-900: #1E417B;
}