Slash Command

/check-contrast

Scans CSS, SCSS, and styled-components for WCAG color contrast ratios on text/UI elements, generates pass/fail report with stats and worst offenders.

Css

React

accessibility

npx claudepluginhub rohitg00/awesome-claude-code-toolkit --plugin color-contrast

Popularity

Parent stars

1,716

Parent forks

535

Invocation

How this command is triggered — by the user, by Claude, or both

Slash command

/color-contrast:check-contrast

Model invocable

No pre-commands

Context Preview

The summary Claude sees in its command listing — used to decide when to auto-load this command

# /check-contrast - Check Color Contrast

Check color contrast ratios against WCAG accessibility requirements.

## Steps

1. Scan CSS, SCSS, and styled-components for all text color and background color pairs
2. Resolve CSS custom properties and theme variables to actual color values
3. Calculate the luminance contrast ratio for each foreground/background pair
4. Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
5. Check non-text contrast for UI components and graphical objects: 3:1 ratio
6. Identify text on images or gradients that may hav...

Command Content

29 lines · ~374 tokens

Other plugins with /check-contrast

/contrast

275

Invokes contrast-master agent to check color contrast ratios, fix failures, and review themes.

accessibility-agents

/audit-design

Audit existing HTML/CSS design quality. Checks WCAG contrast, font compliance, OKLCH tokens, state coverage, anti-AI-slop. No generation — validation only.

fuse-design

/audit

Audits UI codebase for design style consistency, hardcoded design tokens (colors, spacing), accessibility (color contrast), and best practices across file, directory, or project scopes.

5 tools

frontend-design-system

/accessibility-audit

35.7k

Audits UI code for WCAG 2.1/2.2 compliance at A/AA/AAA level, identifies issues across perceivable/operable/etc. criteria, and provides remediation. Accepts file/component path or prompts for target.

ui-design

/review

2.9k

Reviews HTML file for design anti-patterns, principles violations, and accessibility issues. Generates markdown report with status tables and recommendations.

5 tools

frontend-design-pro

/accessibility-audit

279

Audits an HTML file for WCAG AA compliance: contrast ratios, keyboard navigation, semantic HTML, ARIA usage, touch targets, and label associations.

7 tools

naksha

Stats

LanguageJavaScript

Parent stars1,716

Parent forks535

MaintenanceFair

Last CommitFeb 4, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

# /check-contrast - Check Color Contrast Check color contrast ratios against WCAG accessibility requirements. ## Steps 1. Scan CSS, SCSS, and styled-components for all text color and background color pairs 2. Resolve CSS custom properties and theme variables to actual color values 3. Calculate the luminance contrast ratio for each foreground/background pair 4. Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold) 5. Check non-text contrast for UI components and graphical objects: 3:1 ratio 6. Identify text on images or gradients that may hav...

/check-contrast - Check Color Contrast

Check color contrast ratios against WCAG accessibility requirements.

Steps

Scan CSS, SCSS, and styled-components for all text color and background color pairs

Resolve CSS custom properties and theme variables to actual color values

Calculate the luminance contrast ratio for each foreground/background pair

Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)

Check non-text contrast for UI components and graphical objects: 3:1 ratio

Identify text on images or gradients that may have insufficient contrast

Check focus indicator contrast against adjacent colors

Verify contrast in both light and dark themes if the app supports them

Flag transparent or semi-transparent colors that reduce effective contrast

Generate a report: element, foreground color, background color, ratio, pass/fail

Show the total pass/fail count and compliance percentage

Highlight the worst offenders that need immediate attention

Rules

Test both light and dark mode color schemes

Account for opacity when calculating effective contrast

Large text threshold: 18px regular or 14px bold

Do not flag disabled elements as they are exempt from contrast requirements

Check placeholder text contrast (should meet 4.5:1 even though many sites skip this)

Consider adjacent color contrast for interactive component boundaries

Report all unique color pairs, not every instance

/check-contrast - Check Color Contrast

Check color contrast ratios against WCAG accessibility requirements.

Steps

Scan CSS, SCSS, and styled-components for all text color and background color pairs
Resolve CSS custom properties and theme variables to actual color values
Calculate the luminance contrast ratio for each foreground/background pair
Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
Check non-text contrast for UI components and graphical objects: 3:1 ratio
Identify text on images or gradients that may have insufficient contrast
Check focus indicator contrast against adjacent colors
Verify contrast in both light and dark themes if the app supports them
Flag transparent or semi-transparent colors that reduce effective contrast
Generate a report: element, foreground color, background color, ratio, pass/fail
Show the total pass/fail count and compliance percentage
Highlight the worst offenders that need immediate attention

Rules

Test both light and dark mode color schemes
Account for opacity when calculating effective contrast
Large text threshold: 18px regular or 14px bold
Do not flag disabled elements as they are exempt from contrast requirements
Check placeholder text contrast (should meet 4.5:1 even though many sites skip this)
Consider adjacent color contrast for interactive component boundaries
Report all unique color pairs, not every instance

/check-contrast

Popularity

Invocation

Context Preview

Command Content

Other plugins with /check-contrast

Help us improve

Help us improve

Find plugins for your project

/check-contrast

Popularity

Invocation

Context Preview

Command Content

/check-contrast - Check Color Contrast

Steps

Rules

Other plugins with /check-contrast

Help us improve

/check-contrast - Check Color Contrast

Steps

Rules