CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

testland/wcag-color-contrast

Use when designing a color palette, reviewing a component's colors or auditing CSS for contrast: WCAG 2.2 text, large-text and non-text contrast ratios (4.5:1, 3:1) at AA and AAA, the measurement formula and bulk checks over design tokens.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-organized, highly actionable reference skill with executable tooling guidance and concrete hex-level remediation. Its main cost is token efficiency: WCAG thresholds are repeated across sections and standard criteria are re-explained at length, and there is no explicit sequenced workflow for the primary auditing scenarios.

Suggestions

Deduplicate the contrast-ratio values, which appear in the Overview table, the 'Contrast ratios' section, and the AAA subsection — state each ratio once and cross-reference.

Trim explanations of concepts Claude already knows, such as the full SC 1.4.13 dismissable/hoverable/persistent table, down to a one-line summary plus the tooltip-library pitfall.

Add a short numbered audit workflow (identify fg/bg pairs, compute ratio, compare against threshold by text size, apply the matching fix) so the review scenarios have an explicit sequence.

DimensionReasoningScore

Conciseness

The 4.5:1/3:1/7:1 ratios are restated three to four times across the Overview, 'Contrast ratios', and AAA sections, and SC 1.4.13 conditions are explained at length — concepts Claude already knows — so the body is mostly efficient but needs tightening rather than showing only minor trimmable instances.

3 / 5

Actionability

The body provides a complete executable check-contrast.js with violation reporting and CI wiring, a concrete tool table with URLs, and hex-level fixes ('Darken to #767676 or darker', 'Use #666 or darker') covering the common cases, matching the fully-executable level-5 anchor.

5 / 5

Workflow Clarity

All audit ingredients are present in a logical progression (thresholds, tools, bulk token check with exit-1 validation, remediation tables), but no explicit step-by-step sequence is given for the main scenarios like auditing a component's CSS, leaving minor sequencing gaps rather than full checkpoint clarity.

4 / 5

Progressive Disclosure

The single self-contained file is well organized with clear headers, logical section order, and scannable tables, though at ~185 lines the pairing/failure lookup tables could arguably live in a separate reference file — a minor organization gap rather than the ideal split.

4 / 5

Total

16

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description with an explicit trigger clause, multiple concrete actions, and precise domain scoping to WCAG 2.2 contrast. Its only weakness is missing common trigger synonyms such as 'accessibility' or 'a11y' that users would naturally say.

Suggestions

Add natural trigger synonyms such as 'accessibility' or 'a11y' (e.g., 'auditing CSS for contrast or accessibility') to broaden the natural-phrases users would say.

Include large-text and non-text variations users might mention, such as 'AA/AAA compliance' or 'readable text', to round out keyword coverage.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — 'designing a color palette', 'reviewing a component's colors', 'auditing CSS for contrast', 'bulk checks over design tokens' — covering the domain comprehensively, matching the level-5 anchor rather than level 4, which requires minor coverage gaps.

5 / 5

Completeness

It explicitly answers 'when' with a leading 'Use when' clause naming three concrete trigger scenarios, and 'what' with concrete coverage (ratios at AA/AAA, 'the measurement formula and bulk checks over design tokens'), matching the level-5 anchor; level 4 would require a less explicit 'when'.

5 / 5

Trigger Term Quality

Good natural keyword coverage ('color palette', 'CSS', 'contrast', 'WCAG 2.2', '4.5:1', 'AA', 'design tokens'), but common user phrasings like 'accessibility' or 'a11y' are missing, so it falls short of the level-5 comprehensive-synonym anchor.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — WCAG 2.2 color-contrast specifically — with distinct triggers (contrast ratios, design tokens, WCAG) and minimal risk of firing for unrelated skills.

5 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 2 missing

Warning

Total

15

/

16

Passed

Reviewed

On this page