skills.rest
lukeslp
lukeslpCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual

Checks web interface visual accessibility against WCAG 2.2 AA standards.

Updated Aug 27, 2026
Search Tags:#accessibility#WCAG#visual design#contrast#alt text#color blindness
One-click install
npx skills add https://github.com/lukeslp/accessibility-skills --skill visual-lukeslp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual
Source: https://github.com/lukeslp/accessibility-skills/tree/main/plugins/accessibility/skills/visual
Command: npx skills add https://github.com/lukeslp/accessibility-skills --skill visual-lukeslp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that visual elements on web interfaces are accessible to users with diverse visual needs, including those with color blindness, low vision, and other visual impairments.

Core Features & Use Cases

  • Contrast Guidance: Provides clear contrast ratio requirements for text, UI components, and graphics.
  • Color Independence: Offers strategies to convey information without relying solely on color.
  • Specialized Vision Support: Includes considerations for CVI, photophobia, and color blindness.
  • Alt Text Best Practices: Defines four distinct styles of alt text for various contexts and provides output validation rules.
  • System Integration: Addresses forced colors mode, contrast preferences, and text scaling.
  • Use Case: When designing a new dashboard, use this Skill to ensure all charts, text, and interactive elements meet WCAG AA contrast standards and provide meaningful alt text for all images.

Quick Start

Use the visual skill to check the contrast ratio between '#333333' and '#f5f5f5'.

Frequently Asked Questions about visual

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

FAQPage Schema
How do I check color contrast ratios for WCAG 2.2 AA compliance?▼

To check color contrast for WCAG 2.2 AA compliance, run a Python script that calculates the ratio between your foreground and background colors. This validates that text, UI components, and graphics meet required accessibility standards.

What are the best practices for writing alt text for web images?▼

Alt text best practices involve selecting one of four distinct styles tailored to the image context. You can validate your output against specific rules using a Python alt text auditing script to ensure accessibility.

How do I design web interfaces for users with color blindness and low vision?▼

Designing for color blindness and low vision requires color independence, ensuring information is never conveyed by color alone. This includes contrast guidance and specific strategies for specialized vision needs like CVI and photophobia.

Does this visual accessibility tool support forced colors mode and text scaling?▼

Yes, this visual accessibility tool supports forced colors mode and text scaling through dedicated CSS utilities. It handles system integration to ensure interfaces correctly adapt to user contrast preferences.

When do I need to ensure color independence in my web design?▼

You need to ensure color independence whenever information, status, or errors are indicated visually. Relying solely on color creates barriers for users with color blindness, so additional cues like text or patterns are required.

Related Skills

Explore More Design & Creative Skills→
anyprotoanyproto
8.6k

dark-mode-check

Audit SCSS and TSX files for hardcoded colors and missing dark-mode variants.

Official
Intermediate
therealityreporttherealityreport

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Community
Intermediate
Cap-goCap-go
58

capacitor-accessibility

Guide WCAG-compliant accessibility in Capacitor apps with screen reader and focus management.

Official
Intermediate
shirulotshirulot

Color Palette Generator

Generate WCAG-compliant color palettes with contrast ratio calculations.

Community
Intermediate