Color Palette + WCAG Checker
Check contrast ratios, AA/AAA compliance, generate palette variants, and export CSS or Tailwind v4 color tokens locally.
Foreground color
Background color
Primary color conversions
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)Generated palette
CSS variables
:root {
}Tailwind v4 @theme
@theme {
}You just tested your Color Palette + WCAG Checker — Try Color Blindness Test next →
What Is a WCAG Color Contrast Checker?
The Color Palette + WCAG Checker computes the relative-luminance contrast ratio between two sRGB colors and grades it against the Web Content Accessibility Guidelines. The formula is fixed: linearise each channel from sRGB to linear-light (L = R*0.2126 + G*0.7152 + B*0.0722 after gamma decoding), then (L_lighter + 0.05) / (L_darker + 0.05). The result is the contrast ratio, ranging from 1.0 (identical colors) to 21.0 (pure black on white). WCAG 2.1 sets three thresholds: 4.5:1 for normal body text (AA), 3:1 for large text ≥18pt or 14pt bold (AA), and 7:1 / 4.5:1 for stricter AAA grades. WCAG 2.2 (published October 2023) adds a 3:1 requirement for UI components and focus-visible outlines that didn't exist in 2.1. Beyond grading, the tool generates a coordinated palette — complementary, analogous, shade, tint — from a single seed color in OKLCH space (perceptually uniform unlike HSL), and exports the result as CSS custom properties or Tailwind v4 @theme tokens. A PNG swatch sheet ships alongside for design handoff.
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.
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.
Use this tool inside a bigger workflow
These collections group follow-up tools and guides that commonly belong in the same job.
Browse same tags
Jump to other tools that share the same workflow, format, or use case.