Run any Skill in Manus with one click

accessibility-contrast-audit

Stars3

Forks0

UpdatedDecember 22, 2025 at 09:10

[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

CANTAGESTUDIO

CANTAGESTUDIO/CosmicAtlasPacker

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	accessibility-contrast-audit
description	[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.

Accessibility & Contrast Audit

Quantitative accessibility checks for contrast, font size, hit areas, and semantic structure.

Quick Start

python3 scripts/audit_accessibility.py --source src/ --tokens tokens.json

WCAG Standards Reference

Criterion	Level AA	Level AAA
Normal text contrast	4.5:1	7:1
Large text contrast (18px+ or 14px bold)	3:1	4.5:1
UI components/graphics	3:1	3:1
Minimum touch target	44×44px	44×44px
Minimum font size (body)	16px	16px

Problem Types

Type	Severity	Description
`low-contrast`	error	Text/background contrast below WCAG threshold
`text-too-small`	warning	Font size below recommended minimum
`hit-area-too-small`	warning	Touch/click target below 44×44px
`heading-skip`	warning	Heading levels skipped (h1→h3)
`missing-alt`	error	Image missing alt text

More from this repository

same repository

smart-rules

CANTAGESTUDIO/CosmicAtlasPacker

[Utility] Analyzes user prompts and efficiently loads only relevant rule documents. Auto-generates category-document mapping config file on first invocation by scanning project documents. Supports both automatic and manual invocation. (project)

2025-12-253

best-practice-core

CANTAGESTUDIO/CosmicAtlasPacker

[Dev] Extracts and organizes best practices for a given topic into a minimal tree structure (max depth 3, max 5 children per node). Use during task planning when writing subtasks in Docs/{name}_Task.md - output is added under each subtask as a concise reference guide. Pure reasoning task with strict formatting rules: keywords/noun phrases only, no prose. (project)

2025-12-253

smart-rules

CANTAGESTUDIO/CosmicAtlasPacker

2025-12-253

aesthetic-critic-historian

CANTAGESTUDIO/CosmicAtlasPacker

[Aesthetics] Positions aesthetics within art/design history, identifies what traditions it echoes, and spots clichés, generic trends, and AI-slop patterns to avoid. Outputs Critical Notes as Memo nodes in Brain canvas.

2025-12-223

aesthetic-cultural-research

CANTAGESTUDIO/CosmicAtlasPacker

[Aesthetics] Maps aesthetic briefs to cultural references: art movements, photography, film, architecture, music, fashion. Outputs reference lists with visual language analysis. Organizes findings as Image and Memo nodes in Brain canvas.

2025-12-223

aesthetic-form-composition

CANTAGESTUDIO/CosmicAtlasPacker

[Aesthetics] Analyzes form, composition, and spatial relationships: eye paths, balance/asymmetry, rhythm, layering, fore/mid/background usage. Outputs compositional rules as Memo nodes in Brain canvas.

2025-12-223

name	accessibility-contrast-audit
description	[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.

Accessibility & Contrast Audit

Quantitative accessibility checks for contrast, font size, hit areas, and semantic structure.

Quick Start

python3 scripts/audit_accessibility.py --source src/ --tokens tokens.json

WCAG Standards Reference

Criterion	Level AA	Level AAA
Normal text contrast	4.5:1	7:1
Large text contrast (18px+ or 14px bold)	3:1	4.5:1
UI components/graphics	3:1	3:1
Minimum touch target	44×44px	44×44px
Minimum font size (body)	16px	16px

Problem Types

Type	Severity	Description
`low-contrast`	error	Text/background contrast below WCAG threshold
`text-too-small`	warning	Font size below recommended minimum
`hit-area-too-small`	warning	Touch/click target below 44×44px
`heading-skip`	warning	Heading levels skipped (h1→h3)
`missing-alt`	error	Image missing alt text