Color Palette & Contrast Checker - WCAG AA/AAA
What is a color palette & contrast checker?
This tool generates tints and shades from a base hex color and checks their contrast on light and dark backgrounds using WCAG 2.1. Copy CSS variables or Tailwind tokens for fast theming.
How to use the contrast checker
- Enter base color: Use a hex code (e.g.,
#7c3aed). - Set backgrounds: Keep the default light/dark or enter your own.
- Review results: See tints/shades plus contrast ratios on light and dark backgrounds.
- Copy tokens: Grab CSS variables or Tailwind config text for your design system.
Why use this tool?
- Accessibility first: Quickly confirm AA/AAA contrast for text on light and dark.
- Ready-to-use tokens: Copy variables and drop them into CSS or Tailwind.
- Local and fast: Calculations run in your browser; nothing is uploaded.
Use case 1: Theme foundations
Generate a full spectrum from one brand color and check readability on your app backgrounds.
Use case 2: Button and text pairs
Test primary text on both default and hovered background colors to ensure AA/AAA.
Use case 3: Presentation palettes
Create slide-friendly colors that stay legible on projected dark/light surfaces.
Examples
Base: #0ea5e9 (cyan)
Outputs: palette of tints/shades and ratios like 8.4:1 on dark, 3.2:1 on light (adjust until AA/AAA).
Common errors
Invalid hex input
Use full hex like #1f2937 or shorthand #fff. If the ratio reads 0, the color was invalid—fix the hex and retry.
Low contrast
If ratios are under 4.5:1 for normal text, darken the foreground or lighten the background (or both) until AA or AAA is hit.
Tips and proven approaches
- Aim for 4.5:1 (AA) for normal text; 7:1 (AAA) for the safest readability.
- Keep separate palettes for dark and light UI; the tool shows both at once.
- Export tokens and reuse them: avoid hardcoded hex values scattered through CSS.
Related tools
- Check text length and layout with the sentence counter when designing UI copy.
- Convert assets to lighter formats with the image resizer for performance alongside good contrast.
- Generate social-friendly gradients by pairing high-contrast stops from the palette.
Privacy and security
All calculations run locally in your browser. No colors, palettes, or tokens are sent or stored on a server.