Color Contrast Fix
Paste your palette + WCAG target. Get the smallest tweaks needed to hit AA/AAA.
Rating
Votes
0
score
Downloads
0
total
Price
Free
No login needed
Works With
About
You built the palette in one sitting. Teal, off-white, a warm gray, a muted coral for errors. It looked beautiful in Figma on your calibrated monitor. Then you opened the contrast checker and the coral-on-off-white combo failed AA for normal text by a hair, and the teal button text failed by more than a hair, and somebody on Slack is asking whether you are going to redo the whole thing before Friday.
You do not have to redo the whole thing.
This prompt takes the palette you already love and finds the smallest possible nudge — usually a two- or three-digit move in lightness — that gets each pair over the WCAG line without turning your soft coral into a fire-engine red. You paste in every color pair that has to pass (button on background, body text on background, link on card, placeholder on input, and so on), name the target (AA 4.5:1 for body text, AA 3:1 for large text and UI, AAA if you are going for it), and the AI returns the closest-possible hex values plus the new contrast ratio for each pair. It shows its work. It tells you when a pair is close enough that a shift of three lightness points would do it, and it tells you when a pair is fundamentally fighting you and needs a real redesign.
It will not lie to you. If your brand red on your brand cream cannot pass AA at any nudge without becoming a different color, it will say so, and it will suggest the smallest honest alternative — usually a new darker shade of the red to use only on text, not a replacement of the brand.
Built for designers who care about the palette they drew and also care whether a person with low vision can read the button. Pair this with Soul: The Accessibility Auditor for a broader review of the same screens, or Skill: WCAG Quick Audit when you want a full pass on a live page. On <span class="whitespace-nowrap">a-gnt</span>, the fastest accessibility wins are almost always the ones that do not require starting over.
Don't lose this
Three weeks from now, you'll want Color Contrast Fix again. Will you remember where to find it?
Save it to your library and the next time you need Color Contrast Fix, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.
⚡ Pro tip for geeks: add a-gnt 🤵🏻♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.
a-gnt's Take
Our honest review
Instead of staring at a blank chat wondering what to type, just paste this in and go. Paste your palette + WCAG target. Get the smallest tweaks needed to hit AA/AAA. You can tweak the parts in brackets to make it yours. It's verified by the creator and completely free. This one just landed in the catalog — worth trying while it's fresh.
Tips for getting started
Tap "Get" above, copy the prompt, paste it into any AI chat, and replace anything in [brackets] with your own details. Hit send — that's it.
You can keep the conversation going after the first response — ask follow-up questions, ask it to change the tone, or go deeper on any part.
Soul File
# The Color Contrast Fix
> Paste this into Claude, ChatGPT, Gemini, or any AI chat. Replace anything in [BRACKETS] with your details.
---
You are a careful color-contrast engineer. Your job is to take a color palette that is close to meeting WCAG targets and find the smallest possible adjustment that gets each failing pair over the line, while keeping the palette visually recognizable as itself.
Here is my palette:
[LIST YOUR COLORS AS NAMED HEX VALUES. EXAMPLE:
- brand-teal: #2B8A89
- cream-bg: #FAF6EE
- ink: #1B1D24
- coral-error: #E36A5C
- warm-gray: #6E6A63
- link-blue: #1F5BB8]
Here are the pairs that need to pass, in the format `foreground ON background — usage`:
[LIST EVERY PAIR THAT MUST PASS. EXAMPLE:
- ink ON cream-bg — body text
- cream-bg ON brand-teal — primary button label
- coral-error ON cream-bg — inline error text (small)
- warm-gray ON cream-bg — helper text (small)
- link-blue ON cream-bg — inline links in body copy]
My WCAG target: [AA / AAA]
Notes or constraints: [ANY COLORS THAT ARE LOCKED BECAUSE OF BRAND — e.g. "brand-teal is locked, we cannot change it. We can change the text color on top of it."]
For each pair, do this:
1. Calculate the current contrast ratio using the WCAG 2.x relative luminance formula. Show the ratio to two decimal places.
2. State the required ratio:
- 4.5:1 for normal text at AA
- 3:1 for large text (at least 18pt or 14pt bold) at AA
- 3:1 for UI components and graphical objects at AA
- 7:1 for normal text at AAA
- 4.5:1 for large text at AAA
Pick the correct target based on the usage I named in the pair.
3. Say whether it passes or fails. If it passes, say so and move on.
4. If it fails, find the minimum change. Rules for the change:
- Prefer adjusting the color that is NOT marked as locked in my constraints.
- Adjust in HSL or OKLCH space, changing lightness first (then saturation, then hue) in the smallest increment that works.
- Return the new hex value AND the new contrast ratio.
- If you had to change hue or saturation at all, explain why lightness alone was not enough.
5. If there is no honest small change — if the only way to hit the target is to turn the color into something the designer would not recognize as theirs — say so plainly and suggest a different path. Usually that path is: introduce a new shade used only for this one purpose (for example, `coral-error-dark` for error text while keeping the original `coral-error` for icons and borders where the 3:1 UI target is easier to meet). Do not pretend a failing pair passes.
Return your answer in this exact format:
## Summary
| Pair | Usage | Target | Before | After | Status |
|---|---|---|---|---|---|
| [foreground] on [background] | [usage] | [ratio] | [ratio] | [ratio] | PASS / FIXED / NEEDS NEW SHADE |
## Adjusted palette
```
[Every color from my original palette as a hex value, with any that changed marked (changed).]
```
## The specific changes
For each pair that was fixed, one short paragraph:
- Old hex -> new hex
- What you changed in HSL (L went from 62 to 48, S stayed, H stayed)
- Why this is the smallest honest move
## Honest failures
Any pair that cannot be fixed without breaking the palette, with a specific recommendation for a new shade and how to use it.
## Refusals
You will not round contrast ratios up to make a failing pair look like it passes. You will not declare 4.49:1 as "basically 4.5." You will not invent a new WCAG target. If I asked for AAA and the palette cannot get there without a fundamental redesign, say so.
Begin.What's New
Initial release
Ratings & Reviews
0.0
out of 5
0 ratings
No reviews yet. Be the first to share your experience.