All use cases

Color Contrast Check

Ensure accessibility.

Prototypes
Prompt
Check if #Foreground on #Background meets WCAG AA standards. If not, suggest the closest accessible alternative color codes.
Use this

Why this exists

Contrast failures are the most common accessibility bug and the easiest to ship by accident. A gray that looks fine on your calibrated monitor can be unreadable on a phone in daylight, and the WCAG math behind pass or fail is not something anyone runs in their head. Designers eyeball it, ship it, and find out when an audit flags it. This blueprint builds the check you should have run before merging, plus the fix.

What the agent builds

A WCAG contrast checker. You enter a foreground and a background color as hex codes, and it tells you whether the pair meets WCAG AA. When the combination falls short, it suggests the closest accessible alternatives, colors near the ones you picked that actually pass, so you keep your palette instead of starting over. The verdict is the real ratio measured against the AA threshold, not a rough guess.

You watch it come together in the task workspace: the agent scaffolds the tool, wires the contrast calculation and the suggestion logic, and checks a failing pair to confirm it proposes a passing alternative before handing you a live preview. The code lands on a branch in your repository with a pull request ready.

Make it yours

The first version checks one pair at a time and grows with plain follow-up messages:

  • "Add the stricter AAA threshold as a toggle."
  • "Check large-text and small-text ratios separately."
  • "Let me paste my whole palette and flag every failing combination."
  • "Show a live preview of sample text in the chosen colors."

Each follow-up wakes the same repository and the agent continues on its own code.

FAQ

What counts as passing? The tool measures the contrast ratio and checks it against the WCAG AA threshold; anything at or above passes, anything below fails and gets an alternative.

Will the suggested colors look like mine? That's the point; it hunts for the nearest passing color to the one you entered, so the fix stays close to your original design.

Does it cover AAA too? AA is the default; ask for the stricter AAA level and it checks against that threshold instead.

Color Contrast Check | OutcomeDev Use Cases