Color Palette + WCAG Checker

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

All color math runs locally in your browser. No uploads, no accounts, and no design data leaves your device.

Foreground color

Background color

Contrast ratio 4.51:1

AA body text Pass

AAA body text Fail

AA large text Pass

Test colorblind safety

Primary color conversions

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

Generated palette

#1A73E8

Primary

#E88F1A

Complementary

#1ADAE8

Analogous left

#281AE8

Analogous right

#0F4A97

Shade

#6DA6F0

Tint

CSS variables

:root {
  --color-primary: #1A73E8;
  --color-background: #FFFFFF;
  --color-accessible: #1A73E8;
  --color-complementary: #E88F1A;
  --color-analogous-left: #1ADAE8;
  --color-analogous-right: #281AE8;
  --color-shade: #0F4A97;
  --color-tint: #6DA6F0;
}

Tailwind v4 @theme

@theme {
  --color-primary: oklch(0.574 0.195 257.9);
  --color-background: oklch(1.000 0.000 89.9);
  --color-accessible: oklch(0.574 0.195 257.9);
  --color-complementary: oklch(0.727 0.156 65.4);
  --color-analogous-left: oklch(0.811 0.135 203.2);
  --color-analogous-right: oklch(0.443 0.276 269.2);
  --color-shade: oklch(0.421 0.139 257.6);
  --color-tint: oklch(0.717 0.124 255.4);
}

What Is a WCAG Color Contrast Checker?

The Color Palette + WCAG Checker evaluates foreground-background color pairs against the Web Content Accessibility Guidelines (WCAG 2.1) contrast ratio requirements. It reports the exact contrast ratio, pass/fail status for AA and AAA compliance at both body and large text sizes, and suggests the nearest passing color when your pair fails. Beyond contrast checking, the tool generates a full color palette — complementary, analogous, shade, and tint variants — from your primary color and exports them as CSS custom properties or Tailwind v4 @theme tokens using oklch() values. You can also download a PNG swatch sheet for design handoff. All computation runs locally with no third-party service involved.

How to Use the WCAG Color Checker

Enter a foreground and background color as HEX values (e.g., #1A73E8 on #FFFFFF). The checker instantly displays the contrast ratio and pass/fail badges for WCAG AA body text (4.5:1), AAA body text (7:1), and AA large text (3:1). If the pair fails, the tool suggests the nearest passing foreground color that preserves your original hue and saturation. Click "Use suggested color" to apply it. Below the checker, browse the generated palette variants, copy CSS variables or Tailwind v4 theme tokens, and download a PNG swatch for sharing with designers.

Why WCAG Color Contrast Compliance Matters

WCAG 2.1 contrast requirements are not optional guidelines — they are legal requirements in many jurisdictions under the ADA (US), EAA (EU), and EN 301 549 (Europe). Failing to meet AA contrast ratios means some users physically cannot read your text, and it exposes your organization to accessibility lawsuits. Design systems that bake in WCAG compliance from the start avoid costly retrofits. Checking contrast during the design token phase — before components are built — is far cheaper than auditing a shipped product. Exporting compliant tokens directly as CSS variables or Tailwind v4 @theme values bridges the gap between design intent and production code.

Frequently Asked Questions

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.

Browse same tags

Jump to other tools that share the same workflow, format, or use case.