skills.rest
jholhewres
jholhewresCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/jholhewres/devclaw-skills --skill color-contrast-jholhewres
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

color-palette

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

Community
Advanced
jubscodesjubscodes
49

gsp-accessibility-audit

Performs WCAG accessibility audits on designs and code, generating reports and compliance statements.

Community
Advanced
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
tavvatavva

browser-automation

Automate browser-driven frontend testing and page interactions with Rodney CLI.

Community
Advanced