skills.rest
47network
47networkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-critique

Audits UI color contrast and typography readability for WCAG alignment and actionable fixes.

5|Updated Apr 15, 2026
Search Tags:#typography#design#accessibility#audit#usability#contrast#color-blindness
One-click install
npx skills add https://github.com/47network/Sven --skill design-critique-47network
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-critique
Source: https://github.com/47network/Sven/tree/main/skills/design/design-critique
Command: npx skills add https://github.com/47network/Sven --skill design-critique-47network

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and improve design quality by evaluating color contrast, typography readability, and accessibility to produce actionable fixes.

Core Features & Use Cases

  • Color contrast evaluation against WCAG standards, color-blindness simulations, and practical improvement suggestions.
  • Typography readability assessment including body and heading hierarchy, line length, and spacing.
  • End-to-end audits (audit_full) with a consolidated score and a prioritized list of fixes; suggest_improvements generates CSS-ready guidance.

Quick Start

Audit color and typography of your UI to get a comprehensive accessibility and readability report.

Frequently Asked Questions about design-critique

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI color contrast for WCAG compliance?▼

Color contrast checks evaluate your UI color palettes against WCAG standards to identify low-contrast issues. The analysis generates prioritized remediation steps and CSS-ready guidance to ensure your interface meets accessibility requirements.

What's the best way to audit typography hierarchy and readability?▼

Auditing typography readability involves evaluating body and heading hierarchy, line length, and spacing. This analysis identifies readability issues in your typography scale and generates actionable recommendations for structured design fixes.

Can I simulate color-blindness to test my design's accessibility?▼

Yes, color-blindness simulations evaluate your UI color palettes to identify problematic combinations. The analysis provides practical improvement suggestions to make your web and mobile interfaces more accessible to users with visual impairments.

Does this accessibility audit work for both web and mobile interfaces?▼

Yes, the accessibility audit applies to both web and mobile interfaces. It evaluates color palettes, typography scales, and hierarchy to generate consolidated scores, structured findings, and prioritized remediation steps for your UI designs.

How do I generate a full design accessibility report with prioritized fixes?▼

Running an end-to-end audit evaluates color contrast and typography readability to produce a consolidated score. This full report includes structured findings and a prioritized list of recommended fixes with CSS-ready guidance for implementation.

Related Skills

Explore More Design & Creative Skills→
HuuBarHuuBar

ui-designer

Extract design systems from reference UI images into structured documentation.

Community
Advanced
jiikkojiikko
2

style-review

Analyzes CSS/UI code for WCAG compliance and contrast across light and dark themes.

Community
Advanced
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced