CtrlK
BlogDocsLog inGet started
Tessl Logo

testland/wcag-color-contrast

Reference for WCAG 2.2 color-contrast conformance - covers SC 1.4.3 Contrast (Minimum, AA), 1.4.6 Contrast (Enhanced, AAA), 1.4.11 Non-text Contrast (AA), and 1.4.13 Content on Hover or Focus (AA) - with the canonical contrast ratios (4.5:1 normal text, 3:1 large text and UI components), measurement formula references, and bulk design-token checking patterns. Use when designing a color palette, reviewing a component for accessibility, or auditing existing CSS for contrast violations.

74

Quality

93%

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

85%

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

A high-quality reference body: highly actionable with executable code and specific fixes, clear workflow with validation, and well-signaled navigation. The main weakness is minor redundancy (the large-text threshold restated) and a few obvious entries in the canonical-pairings table that could be trimmed.

Suggestions

De-duplicate the large-text threshold: state the 18pt regular / 14pt bold (with px conversions) once and reference it from the Text ratio table instead of repeating it.

Trim the canonical-pairings table to non-obvious cases (e.g. keep #767676 'just passes' and #999 'fails', drop the trivial #000/#FFF = 21:1 'maximum' rows) to improve token efficiency.

Consider moving the check-contrast.js script into an actual scripts/ bundle file and linking to it, so the inline 'scripts/check-contrast.js' path label resolves to a real file.

DimensionReasoningScore

Conciseness

Mostly lean and table-dense with no basic-concept padding, but could be tightened: the large-text threshold is restated (Overview and the Text section) and the canonical-pairings table includes near-obvious entries like #000/#FFF = 21:1. Not a 3 because of this redundancy and minor over-explanation; not a 1 because it generally assumes Claude's competence and avoids verbose prose.

2 / 3

Actionability

Provides a complete, copy-paste-ready check-contrast.js script, specific hex/ratio pairs, concrete tool steps ('Chrome DevTools -> Styles -> color swatch -> Contrast'), and a failures table with exact fixes (#999 -> #767676). Not a 2 because the guidance is fully executable rather than pseudocode or abstract direction.

3 / 3

Workflow Clarity

The design-token bulk-checking workflow is a clear sequence with a validation feedback loop - the script collects violations and exits non-zero, then wires into CI via a11y-violation-gate. Sections are well-ordered (Overview -> ratios -> measuring -> checking -> failures -> references). Not a 2 because the batch operation includes an explicit validation checkpoint (exit(1) on violations).

3 / 3

Progressive Disclosure

Well-organized into clearly headed sections with a dedicated References block linking one level deep to external URLs (WCAG22, WebAIM) and sibling skills; no nested referral chains and easy navigation. No bundle files exist, which is appropriate for this self-contained table-dense reference. Not a 2 because references are clearly signaled and content is appropriately scoped to a single overview file.

3 / 3

Total

11

/

12

Passed

Description

100%

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, third-person description that clearly states both the reference's scope and explicit Use-when triggers, with natural keywords and a well-scoped niche. It does not over-claim and avoids vague fluff.

DimensionReasoningScore

Specificity

Names multiple concrete capabilities and actions - 'covers SC 1.4.3 ... 1.4.13', 'measurement formula references', 'bulk design-token checking patterns', plus the Use-when actions 'designing a color palette, reviewing a component for accessibility, or auditing existing CSS'. Not a 2 because it lists several specific concrete actions rather than just naming a domain.

3 / 3

Completeness

Explicitly answers what ('Reference for WCAG 2.2 color-contrast conformance ... canonical contrast ratios ... bulk design-token checking patterns') and when ('Use when designing a color palette, reviewing a component for accessibility, or auditing existing CSS for contrast violations'). Not a 2 because the 'Use when' trigger clause is explicit, not merely implied.

3 / 3

Trigger Term Quality

Uses natural terms a user would say - 'color palette', 'accessibility', 'reviewing a component', 'auditing existing CSS for contrast violations', 'WCAG'. Good coverage of common phrasings; not a 2 because it captures multiple natural variations rather than a single keyword.

3 / 3

Distinctiveness Conflict Risk

Scoped to a clear niche (WCAG 2.2 color-contrast conformance) with distinct triggers unlikely to fire for sibling skills; cross-references to wcag-checklist-builder/axe-a11y are in the body, not the description. Not a 2 because the triggers are specific to contrast work and would not broadly overlap with other skills.

3 / 3

Total

12

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 1 missing

Warning

Total

15

/

16

Passed

Reviewed

Table of Contents