skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

contrast-checker

Analyzes color contrast ratios in code files for WCAG 2.1 compliance and suggests accessible alternatives.

Updated Mar 28, 2026
Search Tags:#accessibility#a11y#css#wcag#color contrast#ui components#contrast ratio
One-click install
npx skills add https://github.com/po4yka/blog --skill contrast-checker-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contrast-checker
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/accesslint-contrast-checker
Command: npx skills add https://github.com/po4yka/blog --skill contrast-checker-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually verifying that text and UI component colors meet WCAG contrast requirements is tedious and error-prone, especially when colors are scattered across CSS variables, design tokens, and theme files. This Skill automates the analysis and produces actionable fixes. ## Core Features & Use Cases - WCAG Contrast Analysis: Calculates contrast ratios for color pairs and checks them against WCAG 1.4.3 (text) and 1.4.11 (UI component) thresholds using MCP tools. - Accessible Color Suggestions: Generates compliant alternative hex values that preserve the original hue and design theme. - Scoped Reporting: Analyzes only the files you specify while searching the broader codebase for referenced color definitions, then reports violations with file locations, ratios, and fixes. - Use Case: Point it at a button component file and receive a report showing that #7c8aff text on #ffffff fails at 3.03:1, plus a recommendation to use #5061ff for a passing 4.67:1 ratio. ## Quick Start Ask the assistant to check color contrast for WCAG compliance in a specific file such as src/components/PrimaryButton.tsx.

Frequently Asked Questions about contrast-checker

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

FAQPage Schema
How do I check color contrast for WCAG compliance in my code?▼

Specify the files or directories to analyze, and the skill extracts color definitions, calculates contrast ratios with MCP tools, and reports each violation with its location, current ratio, and a compliant replacement color.

What contrast ratio is required for WCAG AA compliance?▼

Normal text requires 4.5:1 and large text (18pt or 14pt bold) requires 3:1 under WCAG 1.4.3. UI component boundaries, states, and icons require 3:1 against adjacent colors under WCAG 1.4.11.

Does text inside a button use the UI component contrast threshold?▼

No. Text within buttons, inputs, and other UI components must meet the text contrast requirements of WCAG 1.4.3 (4.5:1 for normal text), not the 3:1 non-text threshold that applies only to borders and state indicators.

Can the contrast checker suggest accessible replacement colors?▼

Yes. The suggest_accessible_color MCP tool generates compliant alternatives that preserve the original hue while adjusting lightness, returning the new hex value and its resulting contrast ratio.

What files does the contrast analysis cover?▼

Analysis is scoped to the file paths you specify or that are inferred from context. The skill may search the wider codebase only to resolve referenced CSS variables, design tokens, and theme definitions used by those files.

Related Skills

Explore More Software Engineering Skills→
RLufRLuf

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Community
Intermediate
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
michaelsvanbeekmichaelsvanbeek
1

accessibility-testing

Automate accessibility testing and WCAG compliance validation for web projects.

Community
Advanced