contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Updated May 19, 2026
One-click install
npx skills add https://github.com/lord-vinayak/orive-reqcap --skill contrast-checker-lord-vinayak
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: contrast-checker
Source: https://github.com/lord-vinayak/orive-reqcap/tree/main/.claude/skills/audit/contrast-checker_
Command: npx skills add https://github.com/lord-vinayak/orive-reqcap --skill contrast-checker-lord-vinayak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides precise calculation and evaluation of color contrast ratios, ensuring compliance with accessibility standards and aiding in the creation of inclusive design.

Core Features & Use Cases

  • Calculate WCAG 2.2 Contrast Ratio: Accurately compute contrast ratios between colors for compliance with WCAG standards.
  • Dynamic State Evaluation: Check contrast in various states like hover, focus, and disabled for comprehensive accessibility.
  • Color Blindness Simulation: Simulate color vision deficiencies to ensure design is accessible to all users.
  • Dark Mode Assessment: Validate contrast in both light and dark mode variants.
  • Palette Audit: Assess and improve color palettes for accessibility.
  • Finding Compliant Alternatives: Offer solutions to improve contrast and find compliant color combinations.
  • Use Case: A designer can use this Skill to check the contrast of a button and ensure it meets WCAG standards for accessibility.

Quick Start

Run the contrast-checker skill with the color #ffffff on #000000 to evaluate its contrast.

Frequently Asked Questions about contrast-checker

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

FAQPage Schema
How do I check WCAG color contrast ratios for accessibility compliance?

To check WCAG color contrast ratios, provide color values in any standard format for evaluation against WCAG 2.2 and APCA standards. The tool calculates precise contrast ratios and provides a detailed compliance analysis for inclusive design.

Can I simulate color blindness when auditing a color palette?

Yes, you can simulate color blindness during a palette audit to ensure designs are accessible to all users. The evaluation simulates color vision deficiencies alongside standard contrast checks to identify potential accessibility barriers.

How do I evaluate dark mode contrast for UI components?

You can evaluate dark mode contrast by assessing your color values in both light and dark mode variants. The analysis validates contrast compliance across both display modes to ensure consistent accessibility.

Does this contrast checker evaluate dynamic states like hover and focus?

Yes, the contrast checker evaluates dynamic states including hover, focus, and disabled conditions. This dynamic state evaluation ensures comprehensive accessibility compliance beyond default visual presentations.

What is the best way to find WCAG compliant color alternatives?

The best way to find WCAG compliant alternatives is to run a palette audit on your current colors. The evaluation identifies failures and offers solutions to improve contrast, suggesting compliant color combinations.

Do I need APCA or WCAG 2.2 to calculate color contrast accurately?

You do not need to choose between APCA and WCAG 2.2 manually, as the evaluation utilizes both standards to calculate color contrast accurately. This dual approach provides comprehensive contrast evaluation for accessibility compliance.