Skill LibraryPrompt Skill1 DesignsTop Views

High Contrast and Forced Colors

Audit components and pages for high contrast, forced-colors, prefers-contrast, focus indicators, non-text contrast, and system-color fallbacks.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Accessibility

Skill Directive

Description

Audit components and pages for high contrast, forced-colors, prefers-contrast, focus indicators, non-text contrast, and system-color fallbacks.

TagsAccessibility

Skill Prompt

- Collect target components/pages, all interaction states, focusable controls, current color tokens, supported browsers/systems, and required WCAG level first.
- Check baseline contrast plus `prefers-contrast: more` and `forced-colors: active`; do not treat dark mode as high contrast mode.
- In forced colors, preserve system-color semantics such as `Canvas`, `CanvasText`, `ButtonFace`, `ButtonText`, `Highlight`, and `HighlightText`; use `forced-color-adjust: none` only for controlled exceptions.
- Focus indicators must be visible and strong; prefer `outline` and `outline-offset`; do not rely only on box-shadow, glow, or background images because forced colors may remove them.
- Non-text UI must remain perceivable: borders, icons, input boundaries, selected states, error states, chart lines, and SVG fill/stroke need contrast or text/shape redundancy.
- Validate keyboard paths, hover/focus/active/disabled/selected/error/loading states, and whether charts, patterns, and SVG remain understandable in high contrast.
- Return a patch or QA report with selectors, token changes, manual checks, automated tool results, unsupported edges, and retest recommendations.
- Sources referenced: shadcn/ui registry and skills docs, Radix accessibility and data-state patterns, Tailwind responsive/states docs, Next.js accessibility guidance, PatrickJS/awesome-cursorrules CC0 rules, Motion.dev, HyperUI, Flowbite, and 21st.dev Agent Elements. The content is rewritten as Interface Lab production guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

High Contrast and Forced Colors

More pages using High Contrast and Forced Colors