Color Contrast Checker - WCAG Accessibility Test

WCAG relative-luminance contrast: AA requires ≥4.5:1 for normal text and ≥3:1 for large text; AAA requires ≥7:1 and ≥4.5:1 respectively. The preview is only for eyeballing — the ratio and the four AA/AAA × normal/large badges are authoritative.

Roughly 18pt and up (or 14pt bold), with your own accessibility spec as the final word. Raising a size into the large-text bracket relaxes the threshold, but that's no excuse for small body copy.

There is no one-click fix. With a fixed brand color, adjust the text side's lightness first, or add a solid or semi-transparent scrim behind the text; on gradients and images, sample the actual pixels behind the glyphs; and test interactive states (hover/focus) as their own pair — a passing default state says nothing about the focus ring.

Buttons, links, placeholders, and disabled states (disabled must still be readable or clearly unusable); chart series colors and axis labels; secondary text and text on borders in design-token reviews; and error-message red on light-red backgrounds.

Not necessarily — passing guarantees a luminance difference, not distinguishability. Re-check important states with a color-blindness simulator and keep non-color cues like icons and copy; for palette conversion or finding the nearest Tailwind color, pair this with a color converter or a Tailwind color finder.