color-contrast

Calculate WCAG contrast ratios between foreground and background colors.

3|Updated Feb 13, 2026

Search Tags:#design #accessibility #a11y #web development #wcag #color contrast

Ready to run

npx skills add https://github.com/jholhewres/devclaw-skills --skill color-contrast-jholhewres

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color-contrast
Source: https://github.com/jholhewres/devclaw-skills/tree/main/skills/color-contrast
Command: npx skills add https://github.com/jholhewres/devclaw-skills --skill color-contrast-jholhewres

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers and designers ensure their color choices meet Web Content Accessibility Guidelines (WCAG) for readability, especially for users with visual impairments.

Core Features & Use Cases

Calculate Contrast Ratios: Computes the contrast ratio between foreground and background colors.
WCAG Compliance Check: Determines if the contrast meets AA or AAA standards for normal and large text.
Use Case: Quickly verify if your chosen text color on a specific background color is accessible for users with low vision.

Quick Start

Calculate the color contrast ratio for foreground RGB (255, 255, 255) and background RGB (0, 0, 0).

Frequently Asked Questions about color-contrast

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

FAQPage Schema

How do I check WCAG color contrast ratios for web accessibility?▼

To check WCAG color contrast ratios, you need to calculate the luminance difference between foreground and background RGB colors. This Skill automates verifying if your text and background combinations meet AA or AAA accessibility standards.

What is the minimum color contrast ratio for WCAG AA compliance?▼

WCAG AA compliance requires a color contrast ratio of 4.5:1 for normal text and 3:1 for large text. This Skill calculates these exact ratios from your RGB inputs to determine if your web design meets accessibility requirements.

Can I use RGB values to verify large text accessibility standards?▼

Yes, you can verify large text accessibility standards by inputting foreground and background RGB values. The Skill calculates the specific contrast ratio needed to satisfy WCAG AA and AAA requirements for large text readability.

How does a color contrast checker evaluate visual impairment readability?▼

A color contrast checker evaluates visual impairment readability by calculating the precise contrast ratio between foreground and background colors. This verifies that color choices meet WCAG standards for users with low vision.

What is the best way to automate WCAG contrast checks in a design workflow?▼

The best way to automate WCAG contrast checks is to calculate ratios programmatically using foreground and background RGB values. This Skill integrates into web development workflows to verify AA and AAA compliance instantly.