Jorbit
Designer

Color Palette & Contrast

Generate palettes and check WCAG contrast ratios.

Palette

:root {
  --color-1: #0f172a;
  --color-2: #1e293b;
  --color-3: #3b82f6;
  --color-4: #22d3ee;
  --color-5: #f8fafc;
}

WCAG contrast checker

The quick brown fox
Jumps over the lazy dog with WCAG-tested contrast.
Ratio
17.85
AA Normal
Pass
AA Large
Pass
AAA Normal
Pass

About Color Palette & Contrast

Build accessible color palettes for your next project. Generate harmonious schemes from a single base color and instantly verify WCAG 2.1 AA and AAA contrast ratios for text on every combination — no more failing accessibility audits at launch.

Why use Color Palette & Contrast?

  • Generate palettes from any base color
  • Live WCAG AA and AAA contrast ratio checks
  • Hex codes ready to copy
  • Works for both light and dark themes

How it works

  1. 1Pick a base color or paste a hex value.
  2. 2Review the generated palette and contrast ratios.
  3. 3Copy the hex codes that pass WCAG AA for your text.

Frequently asked questions

What's the difference between AA and AAA?

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1.

Does this work for color-blind users?

WCAG contrast is the baseline for low-vision accessibility. For color-blindness, also rely on shape, position and text — not color alone.

Related tools

All tools →
Designer

Favicon Generator

One image → full favicon pack at every size.

Open tool
Designer

Image Compressor

Compress and convert to WebP — fully in your browser.

Open tool
Designer

CSS Effects Generator

Gradients, box-shadows and glassmorphism with copy-ready CSS.

Open tool