# Color Palette + WCAG Checker

> Free color palette generator with full WCAG AA/AAA contrast checks, passing-color suggestions, CSS/Tailwind variables, and PNG/CSS swatch export tools.

- **Category:** Developer
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [Color Blindness Test](https://www.teafun.cyou/tools/colorblind/), [Monitor Refresh Rate](https://www.teafun.cyou/tools/monitor/), [Floor Plan Tool](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

Check contrast ratios, AA/AAA compliance, generate palette variants, and export CSS or Tailwind v4 color tokens locally.

## How to Use the WCAG Color Checker

Enter a foreground and background as HEX (`#1A73E8` on `#FFFFFF`) — the ratio and pass/fail badges for AA normal (4.5:1), AAA normal (7:1), AA large (3:1), and AA UI (3:1, WCAG 2.2) appear instantly. When a pair fails, the suggester nudges the foreground darker or lighter along the OKLCH luminance axis while preserving hue and chroma, so brand color identity stays intact. Click Use suggested color to apply. The classic failure to test against: white text on pure yellow `#ffff00` (`#ffffff` foreground) — the ratio is 1.07:1, well below 3:1, despite looking 'high contrast' to typical vision. Black on yellow is 19.55:1, deeply passing. Below the checker, the palette panel shows complementary and analogous variants generated from your input. Copy CSS variables, copy Tailwind 4 theme tokens, or download the PNG swatch.

## Why WCAG Color Contrast Compliance Matters

WCAG contrast compliance is enforceable law under the ADA in the US, the European Accessibility Act (EAA) effective June 2025 for products and services sold in the EU, and EN 301 549 for public-sector procurement. Fines under EAA reach €30 000 to €500 000 depending on jurisdiction. Beyond legal exposure, the 4.5:1 threshold approximates the contrast a person with 20/40 vision needs to read body text comfortably — that is not edge-case impairment, that is most readers over 40 after natural lens yellowing. Designing tokens compliant from day one avoids the retrofit cost of running brand-color hot fixes through every component. A common trap is judging contrast by eye: brand pinks and pale teals 'look readable' to designers with 20/20 vision under studio lighting and fail by 2× under fluorescent office light. Running the ratio early — at the token definition stage, not at component build — settles the question with arithmetic instead of opinion.

_SEO title: WCAG Color Palette Checker – Free Accessible Tool | TeaFun_

## FAQ

### How does the passing suggestion work?

TeaFun keeps the hue and saturation as close as possible to your chosen foreground color, then adjusts lightness until the pair reaches at least WCAG AA for body text.

### Does Tailwind export use the new v4 format?

Yes. The export uses `@theme` tokens with `oklch()` values so you can paste them directly into a Tailwind v4 project.

### Can I use this for client work?

Yes. The checker is browser-only, so you can test brand colors, export tokens, and generate PNG swatches without sending anything to a third-party service.