skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Updated May 22, 2026
Search Tags:#accessibility#wcag#ui audit#svg icons#forced colors#high contrast mode
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-forced-colors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-forced-colors
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-forced-colors
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-forced-colors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds UI elements that become unclear or invisible in Windows High Contrast Mode, helping teams prevent accessibility regressions that break real user experiences.

Core Features & Use Cases

  • Forced-colors coverage detection: Checks whether stylesheets include support for forced-colors: active.
  • SVG icon auditing: Flags small UI icons that use hardcoded fill or stroke values instead of inheriting color safely.
  • Borderless control detection: Identifies buttons and role-based controls that rely only on background color and may disappear in high contrast mode.
  • Use case: A product team can run this Skill on a live page before release to catch inaccessible icons, invisible buttons, and missing forced-colors overrides.

Quick Start

Use this skill to inspect the current page for forced-colors accessibility issues and report any icons, controls, or styles that may fail in Windows High Contrast Mode.

Frequently Asked Questions about qa-detect-forced-colors

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

FAQPage Schema
How do I detect forced-colors accessibility failures on a rendered web page?▼

To detect forced-colors accessibility failures, scan rendered web page stylesheets, SVG icons, and interactive controls for UI elements that break when Windows High Contrast Mode strips color, using browser DOM evaluation and CSS media query inspection.

What is forced-colors coverage detection in CSS?▼

Forced-colors coverage detection checks whether stylesheets include support for the `forced-colors: active` media query, ensuring UI elements remain visible and clear when Windows High Contrast Mode overrides standard styling.

Why do my SVG icons disappear in Windows High Contrast Mode?▼

SVG icons disappear in Windows High Contrast Mode when they use hardcoded fill or stroke values instead of inheriting color safely, causing them to blend into the forced background color and become invisible.

How do I audit buttons for high contrast mode visibility?▼

Audit buttons for high contrast mode visibility by identifying borderless role-based controls that rely only on background color, reporting their bounding boxes to flag elements that may disappear when color is stripped.

Do I need a live browser environment to run a forced-colors UI audit?▼

Yes, running a forced-colors UI audit requires a live browser DOM environment to evaluate CSS media query inspection, inspect rendered SVG icons, and generate bounding-box reports for accessibility defect triage.

Related Skills

Explore More Software Engineering Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-icons

Detect icon UX defects in web interfaces via DOM inspection.

Community
Advanced
robikscuberobikscube

bim-clash-detection

Detect hard and soft clashes between BIM elements from exported bounding-box data.

Community
Intermediate
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-adaptive-state

Detects adaptive state accessibility and theming defects in web UI.

Community
Advanced