hermes

Review colour contrast and fix the palette

Checks colour pairs or design tokens against contrast requirements and proposes the nearest passing alternatives that keep the brand hue. Use when defining or auditing a palette or theme.

context

Contrast reviews go wrong in three ways: the ratio is estimated by eye instead of computed, a 4.47:1 result is rounded up to "4.5, passes", and the suggested fix swaps the brand colour for a generic grey or breaks three other pairs that share the token. The useful answer is exact numbers, the smallest change that passes, and a check that the change holds everywhere the token is used.

task

Check this palette against :

Usage: (if empty, test every plausible foreground against every background, and say that you assumed the usage).

  1. Normalise every colour to sRGB hex. Composite any translucent colour over the background it actually sits on before measuring, and show the composited hex. If that background is unknown, composite it over every background in the palette it could sit on, report the worst result, and say so.
  2. Compute, do not estimate. If you can run code, do. Otherwise show the working for at least the failing pairs.
  • WCAG 2: relative luminance from linearised sRGB channels (threshold 0.04045, then ((c + 0.055) / 1.055) ^ 2.4, weighted 0.2126 R + 0.7152 G + 0.0722 B), then ratio = (L1 + 0.05) / (L2 + 0.05). Truncate to two decimals; never round up to a pass.
  • Thresholds: wcag2-aa needs 4.5:1 for normal text and 3:1 for large text (at least 24 px, or 18.66 px bold) and for UI components and meaningful graphics (SC 1.4.11). wcag2-aaa needs 7:1 and 4.5:1 for text; non-text stays 3:1.
  • APCA: report the signed Lc value (polarity matters) and judge it against the usage's font size and weight. Lc 75 is the usual minimum for body text, 90 preferred; lower values apply only to larger or bolder text. APCA cannot be done reliably by hand: if you cannot run the APCA-W3 algorithm in code, give an approximate Lc marked "≈", say so in Notes, and also report the WCAG 2 ratio. Say clearly that APCA is not a WCAG 2 conformance test.
  1. For every failing pair, propose fixes that keep the hue: adjust lightness in OKLCH, holding hue fixed and reducing chroma only if the colour leaves the sRGB gamut, until the pair just passes. Offer both directions (darken the foreground, or lighten or darken the background) when both are viable, and name the one that changes the brand less.
  2. Re-check each proposed colour against every other pair that uses the same token, and report any new failure. A token that is both a background for light text and a foreground on a dark surface can be pulled in opposite directions; when no single value passes both, say so and propose splitting the token.
  3. If the palette has no text colours or no background colours, or the usage is too vague to tell text from UI, ask instead of guessing.
constraints
  • Never mark a pair as passing on a rounded value.
  • Do not judge aesthetics. Do not change colours that already pass unless a shared token forces it.
  • Disabled controls and pure decoration are exempt from WCAG 2 contrast. Mark them exempt, not failing, and only when the usage says so.
  • Separate what you verified from what you inferred. Mark inferences as such.
  • When you do not know, say "I don't know" once and state what would settle it.
output format

Results

| Foreground | Background | Usage | Ratio or Lc | Required | Result (pass / fail / exempt) |

Fixes

| Token | Original | Proposed | New ratio or Lc | Direction | Other pairs affected |

Notes

Assumptions, any translucent colours, and the method used (computed by code or by hand).

examples
example

#777777 text on #FFFFFF, 16 px regular, wcag2-aa: ratio 4.47:1 (4.478 truncated), fails (needs 4.5:1). Nearest fix keeping the neutral hue: #767676 gives 4.54:1, passes.

1 required value still a placeholder; the assistant will ask for it.

details

kind
Prompt: a task you run by name to get one finished thing back
domain
Software engineering
category
Accessibility
level
Intermediate
made for
Product / UX / UI designer, Frontend engineer
risk
read-only
version
v1.0.0 · incubating
reviewed
2026-10-02
works in
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install review-color-contrast --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill review-color-contrast -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the software-engineering plugin
claude plugin install hodios-software-engineering@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of Accessibility
PersonaAccessibility

Accessibility specialist

Accessibility specialist who builds and reviews with WCAG, the ARIA Authoring Practices and real assistive-technology behaviour in mind, ranking barriers by who is blocked.

accessibility-specialist
PromptAccessibility

Audit a mobile screen for accessibility

Audits an iOS, Android, React Native or Flutter screen for labels, traits, focus order, text scaling, touch targets, contrast and gestures, with platform fixes and a VoiceOver or TalkBack test script.

audit-mobile-accessibility
PromptAccessibility

Audit web accessibility against WCAG 2.2

Audits markup or components against WCAG 2.2 and reports each issue by success criterion with user impact, severity and a concrete code fix. Use before a release or a compliance review.

audit-web-accessibility
PromptAccessibility

Build an accessible ARIA widget

Implements a combobox, tabs, dialog, menu, disclosure, tree or listbox per the ARIA Authoring Practices pattern, using native elements whenever they suffice. Use for custom interactive widgets.

build-aria-widget
PromptAccessibility

Build or fix an accessible form

Builds or repairs a web form with programmatic labels, grouping, autocomplete, helpful error messages and announced validation. Use for sign-up, checkout, settings or any data-entry form.

fix-form-accessibility
PromptAccessibility

Fix keyboard navigation in a component

Finds and fixes keyboard barriers in a UI component (focus order, traps, invisible focus, mouse-only controls) and adds a keyboard test checklist. Use when a widget fails without a mouse.

fix-keyboard-navigation