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

Ready to run

npx skills add https://github.com/moasq/nanowave --skill color-contrast-moasq

💬 Prompt for ChatGPT / Claude Chat▼

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.