Audit beginner Works with: Any AI

Color Contrast and Visual Design Check

Table output Has example

Verify text and UI colors meet contrast requirements and propose compliant alternatives.

The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.

Check my colors for accessibility. Standard target (for example WCAG 2.2 AA): [STANDARD]. Brand palette and where each color is used (text, backgrounds, buttons, links, borders, icons, charts): [COLOR_USAGE_LIST_WITH_HEX_VALUES].

Calculate or instruct me to calculate, and be explicit: do not guess contrast ratios. If you cannot compute reliably, provide the formula (relative luminance with the sRGB linearization, ratio equals (L1 + 0.05) divided by (L2 + 0.05)) and a list of the pairs for me to check in a contrast tool.

Return tables:
1. Pairs: Foreground | Background | Use | Required ratio (4.5:1 normal text, 3:1 large text and UI components) | Ratio (calculated or "to check") | Pass or fail.
2. Failing pairs: suggested adjusted hex values that stay close to the brand color, with the new ratio to verify.
3. State colors: hover, focus, visited, disabled, error, success. Focus indicators need visible contrast with adjacent colors.
4. Information conveyed by color alone: places that need an additional cue (icon, text, pattern), especially charts and form errors.
5. Dark mode and gradients and text on images: extra checks.

Add a verification routine with two tools and a color-blindness simulation test. Remind me that passing ratios is necessary but not sufficient.

Fill in before use

Optional: type your details and the prompt above updates. Nothing is saved or sent.

Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.

Foreground | Background | Use | Required | Ratio | Result
#767676 | #FFFFFF | Body text | 4.5:1 | 4.54 (verify in a tool) | Pass, borderline
#9BA5B0 | #FFFFFF | Captions | 4.5:1 | to check | Likely fail
#FFFFFF | #3B82F6 | Button text | 4.5:1 | to check | Check
Failing pair suggestion: caption text #6B7280 on white; verify the new ratio in a contrast tool.
State colors: focus outline needs 3:1 against adjacent colors; error text must not rely on red alone, add an icon and the words "Error:".
Charts: the red/green lines also need different dash patterns. Verification routine: check each pair in two tools, then run a color-blindness simulation.

• contrast
• color