feat(cli): add contrast checker to panda studio

[Adebesin-Cell]

Stacked PR. Base is feat/cli-studio-clean (the studio PR, #3663), so this diff is just the contrast checker. Review #3663 first.

📝 Description

Add a contrast checker to panda studio. Pick two color tokens and see the WCAG contrast ratio with AA/AAA pass badges, so you can check a pairing without leaving the viewer.

⛳️ Current behavior (updates)

The studio viewer shows your colors, but there's no way to tell whether two of them meet contrast guidelines.

🚀 New behavior

A Contrast tool under the viewer's Playground nav. Two dropdowns pick the foreground and background from your color tokens; a live preview shows the pairing, the ratio (e.g. 4.52 : 1), and badges for AA, AA Large, AAA, and AAA Large.

Ratios are computed in the browser by rasterizing each color to a canvas pixel, so it handles any CSS color format your tokens use — including oklch, which the default preset emits.

💣 Is this a breaking change (Yes/No):

No.

📝 Additional Information

The studio stack:

• feat(cli): add panda studio #3663 — panda studio (base)
• this PR — contrast checker
• feat(cli): add typography playground to panda studio #3665 — typography playground

Test plan:

• pnpm --filter @pandacss/cli test
• contrast math verified in the running viewer: #000/#fff → 21.00, oklch inputs rasterize correctly, badges flip at 3 / 4.5 / 7

[changeset-bot]

🦋 Changeset detected

Latest commit: 227f75d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@pandacss/cli	Patch
@pandacss/dev	Patch
@pandacss/language-server	Patch
@pandacss/typescript-plugin	Patch
playground	Patch
website	Patch
@pandacss/compiler-shared	Patch
@pandacss/compiler-wasm	Patch
@pandacss/compiler	Patch
@pandacss/config	Patch
@pandacss/eslint-plugin	Patch
@pandacss/mcp	Patch
@pandacss/postcss	Patch
@pandacss/preset-base	Patch
@pandacss/preset-panda	Patch
@pandacss/rollup	Patch
@pandacss/transformer	Patch
@pandacss/types	Patch
@pandacss/vite	Patch
@pandacss/webpack	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
panda-docs	Error		Jul 18, 2026 5:11am
panda-playground	Error		Jul 18, 2026 5:11am
panda-studio	Error		Jul 18, 2026 5:11am

[Adebesin-Cell]

Consolidated into #3666 — the full panda studio feature now ships as one PR.