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%

Without context: $0.4068 · 1m 55s · 20 turns · 20 in / 7,619 out tokens

With context: $0.4343 · 1m 52s · 25 turns · 436 in / 6,214 out tokens

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%

Without context: $0.2165 · 58s · 13 turns · 14 in / 3,853 out tokens

With context: $0.4872 · 1m 55s · 26 turns · 335 in / 6,621 out tokens

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%

Without context: $0.2826 · 1m 16s · 14 turns · 14 in / 5,276 out tokens

With context: $0.4581 · 1m 53s · 24 turns · 279 in / 6,961 out tokens

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: 994edc4

Evaluated: 18 days 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.