CtrlK
BlogDocsLog inGet started
Tessl Logo

color-contrast

Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects required to understand content. Does not apply to inactive/disabled UI components or purely decorative elements.

47

Quality

50%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/color-contrast/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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.

The body is a well-structured, appropriately sized overview: concrete thresholds, tool-based verification, a fix-until-passing loop, and a clean handoff to the actual references/rule.md bundle file. Its main weakness is redundancy — thresholds repeated across three sections and a few asides re-explaining contrast basics Claude already knows.

DimensionReasoningScore

Conciseness

Mostly efficient, but the 4.5:1/3:1 thresholds are stated three times (Quick Reference, Check, and Explain), and Explain covers concepts Claude already knows ('A ratio of 1:1 means no contrast (same color); 21:1 is maximum', the relative luminance formula). This exceeds anchor 4's 'minor instances of over-explanation' but is far from anchor 2's padded verbosity.

3 / 5

Actionability

Concrete thresholds (4.5:1, 3:1, 7:1 AAA), named verification tools ('WebAIM, browser DevTools accessibility panel'), enumerated interactive states ('default, hover, focus, active, and visited'), and an explicit pitfall ('Do not use opacity to lighten text — compute the effective blended color') give mostly executable guidance for an instruction-only skill; the minor gap is no worked ratio example or CSS snippet in the body itself.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review structure is coherent, with an explicit verification checkpoint ('Use a contrast checker tool … to verify the exact ratio') and an iterate-until-passing loop ('Darken … until the ratio meets the minimum'); the operation is neither destructive nor batch, so no cap applies. It falls short of 5 because the sequence is implied by section names rather than explicit steps, and Check leans on a formula detailed only later in Explain.

4 / 5

Progressive Disclosure

The body is a lean, well-organized overview that ends with a clearly signaled, one-level-deep pointer ('see `references/rule.md`') to a real file holding the bulk detail (CSS examples, requirements table, tool links) with no further nesting — a direct match for anchor 5's 'clear overview with well-signaled one-level-deep references'.

5 / 5

Total

16

/

20

Passed

Description

28%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.

The description reads as a lifted WCAG applicability statement: it enumerates scope and exclusions concretely but never says what the skill does, never mentions contrast ratios or thresholds, and lacks every natural trigger term a user would say. It provides a garbled 'when' with no 'what', making correct skill selection difficult.

Suggestions

State the capability explicitly in third person, e.g. 'Checks and fixes color contrast ratios for text and UI components to meet WCAG 2.1 Level AA (4.5:1 normal text, 3:1 large text and non-text components)'.

Add the natural trigger terms users would actually say — 'color contrast', 'contrast ratio', 'WCAG', 'accessibility', 'readable text' — which are currently absent from the description.

Repair the truncated 'Use when applies to…' clause into a full trigger sentence naming the context, e.g. 'Use when auditing accessibility, verifying WCAG contrast compliance, or when a user mentions low-contrast or hard-to-read text.'

DimensionReasoningScore

Specificity

The description enumerates concrete scope items ('UI component borders (input fields, buttons), focus indicators, icons that convey meaning') but contains no action verbs and never states the skill's actual subject — the word 'contrast' does not appear anywhere. It fits anchor 2 (actions minimal-or-absent) better than anchor 3, which requires 1-2 concrete actions.

2 / 5

Completeness

A 'Use when…' clause is present but grammatically truncated ('Use when applies to…'), and the 'what' is missing entirely — the description never states the skill checks or fixes contrast ratios. Anchor 2 ('only 'when' is present without 'what') is the closest match; it cannot reach 3-4 without a stated capability.

2 / 5

Trigger Term Quality

The natural phrases a user would say when needing this skill — 'contrast', 'color contrast ratio', 'WCAG', 'accessibility', 'readable' — are entirely absent; only generic UI element nouns ('text', 'buttons', 'focus indicators') appear, matching anchor 2's 'missing the natural phrases users say'.

2 / 5

Distinctiveness Conflict Risk

The enumerated scope plus explicit exclusions ('Does not apply to inactive/disabled UI components or purely decorative elements') give it some specificity, but because contrast is never named it could overlap with sibling accessibility rules covering focus indicators, icons, or graphical objects — anchor 3 ('could still overlap with similar skills').

3 / 5

Total

9

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

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.