skills.rest
moasq
moasqCOMMUNITY
Explore all skills by this author →
𝕏@foundmodGitHub

color-contrast

Validate color contrast ratios against WCAG and Apple HIG standards.

32|10|Updated Feb 21, 2026
Search Tags:#accessibility#WCAG#readability#color contrast#UI design#dark mode
One-click install
npx skills add https://github.com/moasq/nanowave --skill color-contrast-moasq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-contrast
Source: https://github.com/moasq/nanowave/tree/main/internal/orchestration/skills/ui/color-contrast
Command: npx skills add https://github.com/moasq/nanowave --skill color-contrast-moasq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that color choices in UI designs meet accessibility standards, guaranteeing readability and usability for all users, especially those with visual impairments.

Core Features & Use Cases

  • WCAG Compliance: Validates color ratios against WCAG 2.1 and Apple HIG guidelines.
  • Semantic Color Guidance: Provides best practices for using semantic colors (e.g., red for destructive actions, green for success).
  • Dark Mode Adaptation: Offers strategies for pairing colors effectively in both light and dark modes.
  • Use Case: When designing a new feature, use this Skill to check if the chosen text color on a specific background meets the minimum 4.5:1 contrast ratio for normal text.

Quick Start

Validate that the foreground color 'white' on a background color 'blue' meets WCAG contrast requirements.

Frequently Asked Questions about color-contrast

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

FAQPage Schema
What is the minimum color contrast ratio for normal text to meet WCAG accessibility standards?▼

The minimum color contrast ratio for normal text to meet WCAG accessibility standards is 4.5:1. This ensures readability in UI design and validates compliance with WCAG 2.1 and Apple HIG guidelines.

How do I validate color contrast for dark mode UI designs?▼

To validate color contrast for dark mode UI designs, check foreground and background color pairings against WCAG requirements. Adapt semantic colors and opacity rules to ensure optimal readability across both light and dark modes.

Does this color contrast checker support Apple HIG guidelines as well as WCAG?▼

Yes, this color contrast validation supports Apple HIG guidelines alongside WCAG 2.1 standards. It evaluates UI color choices, semantic color usage, and opacity rules to guarantee accessibility and readability across different platforms.

What are the best practices for using semantic colors in accessible UI design?▼

Best practices for semantic colors in accessible UI design involve using specific hues for actions, like red for destructive and green for success, while maintaining sufficient color contrast. This ensures clear visual communication and WCAG readability compliance.

How do I ensure text readability when placing text over background images?▼

To ensure text readability on background images, apply appropriate opacity rules and color overlays before validating the foreground and background color contrast. This maintains WCAG compliance and optimal user experience in UI design.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
Abrahan-EagleAbrahan-Eagle
1

zonix-ui-design

Reconcile visual design decisions into a cohesive Flutter UI system.

Community
Advanced
Montte-erpMontte-erp
6

wcag-audit-patterns

Audit web pages for WCAG 2.2 violations with automated and manual checks.

Official
Intermediate