Build a WCAG contrast checker with Tailwind CSS: two color inputs (with native pickers plus hex text fields) for foreground and background, a large preview area rendering sample text at several sizes and weights, and a results panel computing the contrast ratio with pass/fail badges for AA normal, AA large and AAA at each size. Add a swap-colors button, a ratio dial or bar visualizing where the pair lands, and suggestions that nudge the foreground lighter or darker until the pair passes the selected level.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。