The prompt

Create a polished WCAG contrast checker with Tailwind CSS. Use a two-column card with foreground and background controls, each combining a native color input and an editable hex field, plus a swap-colors button between them. Under the controls, show a generous live preview containing large heading text, body copy, and a button using the chosen colors. Finish with a results strip that shows the contrast ratio and four pass/fail badges for AA normal, AA large, AAA normal, and AAA large text. Then add JavaScript that accepts three- or six-digit hex colors, keeps the native pickers and text fields synchronized, marks invalid input without breaking the last valid preview, swaps the colors, calculates relative luminance and contrast using the WCAG formula, formats the ratio to two decimals, and updates every pass badge against the correct 3.0, 4.5, and 7.0 thresholds.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.