skills.rest
rebuildup
rebuildupCOMMUNITY
Explore all skills by this author →
Website𝕏@361do_sleepGitHub

high-contrast-design

Design and verify interfaces that remain usable under forced-colors and increased-contrast preferences.

1|Updated Sep 11, 2026
Search Tags:#accessibility#css#wcag#high contrast#forced-colors#prefers-contrast#system colors
One-click install
npx skills add https://github.com/rebuildup/my-web-2026 --skill high-contrast-design-rebuildup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-contrast-design
Source: https://github.com/rebuildup/my-web-2026/tree/main/skills/high-contrast-design
Command: npx skills add https://github.com/rebuildup/my-web-2026 --skill high-contrast-design-rebuildup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interfaces often break when users enable OS contrast themes or forced-colors modes: focus rings disappear, custom SVG icons blend into backgrounds, and state indicators that rely on subtle color or shadow become invisible. This Skill provides a structured workflow to keep information, state, and operability intact when the user agent replaces your palette. ## Core Features & Use Cases - Contrast Mode Analysis: Distinguishes prefers-contrast: more from forced-colors: active and treats light/dark appearance as independent from contrast preference. - System Color Mapping: Translates semantic color roles (canvas, text, link, button, selected, disabled) to user-selected system colors instead of hard-coding brand palettes. - Non-Color Redundancy: Ensures selected, error, chart series, and focus states survive palette replacement via shape, border, pattern, position, or text. - Use Case: A custom checkbox and chart disappear under a Windows contrast theme. Use this Skill to map component roles to system colors, add non-color state indicators, and verify the same task across light, dark, increased-contrast, and forced-colors variants. ## Quick Start Review my component styles and make them survive Windows forced-colors mode without losing focus, selection, or error state visibility.

Frequently Asked Questions about high-contrast-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my website work with Windows high contrast mode?▼

Map semantic roles like text, links, buttons, and selection to system colors instead of hard-coding brand palettes, and ensure focus, selection, and error states have non-color indicators such as borders or icons. Then verify the same tasks in forced-colors mode with real rendering, not just contrast ratio numbers.

What is the difference between prefers-contrast and forced-colors?▼

prefers-contrast: more is a user preference for stronger contrast that authors respond to with their own styles. forced-colors: active means the user agent replaces your palette with user-selected system colors, which may not even be high contrast. They require separate handling.

Is dark mode the same as high contrast mode?▼

No. Dark mode is an appearance preference with dark backgrounds and light text, while high contrast concerns the distinguishability of foreground from background. You should test light, dark, increased-contrast, and forced-colors combinations as separate variants.

When should I use forced-color-adjust: none?▼

Only for narrow elements where the exact color is itself the information, such as a color picker swatch, and where you can guarantee contrast and state visibility yourself. Never apply it to roots or large containers just to preserve brand colors.

Why do my SVG icons disappear in forced-colors mode?▼

Icons with hard-coded fill or stroke colors do not follow the forced system palette and can blend into the background. Use currentColor or system color keywords so semantic icons participate in the user's palette, and treat decorative illustrations differently.

Related Skills

Explore More Design & Creative Skills→
shuretokkishuretokki

colorize

Define a color palette with semantic roles and accessibility considerations for interfaces.

Community
Intermediate
Bizarre-IndustriesBizarre-Industries

accessibility

Audit web accessibility against WCAG 2.2 criteria and ARIA patterns.

Official
Intermediate
DeiblerDeibler
8

color-accessibility-and-mode

Design accessible color palettes meeting WCAG contrast, dark mode, and color-blindness requirements.

Community
Intermediate
binfen1binfen1

ui-ux-pro-max

Plan and deliver UI/UX design systems for web and mobile projects.

Community
Advanced