WCAG 2.2 UI Contrast Audit Planner: Text and Non Text Checks, Focus Visible Notes, Fix Order, and a Retest Spreadsheet

Prompt

Act as an accessibility minded product designer who audits UI kits against WCAG 2.2 contrast and focus visible expectations, writes fix queues for design systems teams, and keeps a retest sheet that engineers actually fill in.

Inputs:
- Product surface and target level (AA or AAA) for the release: [SurfaceAndLevel]
- Component inventory to sample (buttons, inputs, links, charts, toasts): [ComponentInventory]
- Token names or hex pairs already in the design system: [ColorTokens]
- Known problem themes from users or prior audits: [KnownIssues]
- Tooling available (Figma plugins, Storybook, axe, manual): [Tooling]
- Output format: [Format]

Generate:
1. A scope statement: which WCAG 2.2 success criteria you are covering (contrast text, non text contrast, focus visible) and what is out of scope this pass.
2. A sampling plan across ComponentInventory: how many variants (default, hover, disabled, error) and on which backgrounds.
3. A measurement method using Tooling: where to sample pixels, how to record ratio, and when to mark [confirm with contrast checker].
4. A findings table template: component, state, foreground, background, ratio, criterion, pass/fail, severity.
5. A fix order that prefers token changes over one off hex edits, addressing KnownIssues first.
6. Focus visible notes: expected ring contrast and thickness in plain language without inventing proprietary APIs.
7. A retest spreadsheet column list and a Definition of Done for the audit.
8. A communication blurb for stakeholders that avoids fake compliance percentages.

Constraints:
- Do not invent legal safe harbors or claim certification.
- Do not invent exact contrast ratios for tokens you were not given; compute only when hex pairs are provided, otherwise leave blanks.
- Plain design systems tone. No em dashes.

Instructions

Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.

Generated Output

This image was generated using the prompt above.

WCAG 2.2 UI Contrast Audit Planner: Text and Non Text Checks, Focus Visible Notes, Fix Order, and a Retest Spreadsheet - Result

Examples

Example Input

SurfaceAndLevel: B2B dashboard web app, WCAG 2.2 AA
ComponentInventory: primary button, ghost button, text input, inline error, sidebar nav link, line chart, toast
ColorTokens: --bg #FFFFFF, --text #595959, --text-muted #8A8A8A, --brand #2B6CB0, --danger #E53E3E, --focus #805AD5, --bg-dark #1A202C
KnownIssues: muted labels on white; ghost button border hard to see; chart gridlines faint
Tooling: Figma, Stark plugin, Storybook, axe DevTools
Format: scope, sampling, findings template, fix order, retest

Example Output

1) SCOPE
In scope: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast, 2.4.7 Focus Visible (and 2.4.13 Focus Appearance if you adopt it for this release [confirm team target]).
Out of scope this pass: captions, motion, full screen reader script QA.

2) SAMPLING
For each component: default, hover, focus, disabled, error (if any) on --bg and on --bg-dark where used.
Charts: gridline vs plot background; toast on both themes.
Record 2 samples per state.

3) METHOD
- Figma: Stark on text layers; note font size/weight for large text exception
- Storybook: axe on each story; manually check focus ring with keyboard
- Ratio blank until measured; do not guess

4) FINDINGS TEMPLATE
| ID | Component | State | Fg | Bg | Ratio | Criterion | P/F | Sev |
| F1 | text-muted label | default | #8A8A8A | #FFFFFF | [measure] | 1.4.3 | | high |
| F2 | ghost button border | default | [border] | #FFFFFF | [measure] | 1.4.11 | | med |
| F3 | chart gridline | default | [grid] | plot bg | [measure] | 1.4.11 | | med |

5) FIX ORDER
1. Raise --text-muted until body size text hits AA on --bg (token change)
2. Darken ghost border token or increase width to meet non text contrast
3. Brand button text on --brand: verify white or dark label meets AA
4. Danger text on white for inline errors
5. Chart gridline token last (visual polish after readable UI)

6) FOCUS VISIBLE
- Keyboard focus must show a visible ring on all interactive samples
- Prefer --focus ring against both light and dark backgrounds; if ratio fails, add an outer light halo on dark surfaces
- Disabled controls are not in the tab order

7) RETEST SHEET COLUMNS
ID | PR link | Before ratio | After ratio | Tester | Date | Build | Pass
Definition of Done: every fail in the findings table has Pass on retest or an accepted exception logged with owner.

8) STAKEHOLDER BLURB
We audited contrast and focus for the listed dashboard components toward WCAG 2.2 AA. This is an engineering and design checklist, not a certification. Remaining fails are queued by token fix order before release.