color-contrast-checker

Color Contrast Checker - Auto-activating skill for Frontend Development. Triggers on: color contrast checker, color contrast checker Part of the Frontend Development skill category.

1.03x

Quality

Does it follow best practices?

Impact

99%

1.03x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/color-contrast-checker/SKILL.md

Evaluation results

100%

Accessible Color Pair Validator for a React Design System

WCAG contrast ratio validation in React

Criteria

Without context

With context

React implementation

100%

Relative luminance formula

100%

Correct normal-text AA threshold

100%

Correct large-text AA threshold

100%

Conformance level reporting

100%

Hex color input support

100%

RGB color input support

100%

Production-ready exports

100%

No magic thresholds

100%

AAA threshold present

55%

100%

Edge case handling

100%

98%

Color Accessibility Audit for a CSS Design System Palette

CSS palette accessibility audit with standards validation

Criteria

Without context

With context

WCAG AA referenced

100%

4.5:1 normal-text threshold

100%

3:1 large-text threshold

100%

Contrast ratio in output

100%

Pass/fail per pair

100%

Relative luminance formula

100%

CSS hex color parsing

75%

Production-ready script

100%

AAA level reported

100%

No external contrast library

100%

Structured output file

100%

Real-Time Accessibility Feedback Component for a Vue Settings Panel

Vue component with step-by-step contrast guidance

Criteria

Without context

With context

Vue component structure

100%

Step-by-step implementation

100%

Relative luminance formula

100%

WCAG AA normal-text ratio

100%

WCAG AA large-text ratio

50%

100%

Conformance label in UI

100%

Reactive inputs

100%

Hex input support

100%

Production-ready exports

100%

Usage documentation

100%

No third-party contrast library

100%

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: 3076d78

Evaluated: about 2 months ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Accessible Color Pair Validator for a React Design System Color Accessibility Audit for a CSS Design System Palette Real-Time Accessibility Feedback Component for a Vue Settings Panel

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.