🎨 Color Scale Generator

👀 WCAG Compliant Combinations

Pick a background color

Showing text colors that are legible onblue-900#002242· 7 pass (≥3:1)

AAA4 · Passes at any text size.

The quick brown fox
blue-5014.7:1
The quick brown fox
blue-10012.3:1
The quick brown fox
blue-20010.2:1
The quick brown fox
blue-3008.3:1

AA2 · Use at 16px or larger for body text.

The quick brown fox
blue-4006.7:1
The quick brown fox
blue-5005.3:1

AA Large1 · Large text only — 24px, or 18.66px bold.

The quick brown fox
blue-6003.5:1

💻 Code Snippet

Format

Color Format

:root {
  --blue-50: #EEF6FF;
  --blue-100: #CBE4FF;
  --blue-200: #A7D2FF;
  --blue-300: #81BFFF;
  --blue-400: #6CACED;
  --blue-500: #5799DB;
  --blue-600: #3B79B5;
  --blue-700: #205A91;
  --blue-800: #003D6E;
  --blue-900: #002242;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue-50: #002242;
    --blue-100: #003D6E;
    --blue-200: #205A91;
    --blue-300: #3B79B5;
    --blue-400: #5799DB;
    --blue-500: #6CACED;
    --blue-600: #81BFFF;
    --blue-700: #A7D2FF;
    --blue-800: #CBE4FF;
    --blue-900: #EEF6FF;
  }
}