legibility

Audit UI text legibility and propose typeface, size, weight, contrast, and spacing fixes.

6|3|Updated May 3, 2026
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill legibility
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: legibility
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/legibility
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill legibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill fixes UX failures where users can’t quickly tell characters apart in UI text, leading to mistakes, extra effort, and accessibility issues.

Core Features & Use Cases

  • Diagnose legibility problems: identifies symptoms like squinting, mistyped codes/IDs, and low contrast that prevents fast character recognition.
  • Improve the five inputs to legibility: guides decisions for typeface design, size, weight, contrast, and spacing (tracking/leading).
  • Differentiate legibility vs. readability: applies character clarity guidance to labels, buttons, navigation, IDs, and short phrases rather than long-form reading.

Quick Start

Ask the agent to audit a specific screen’s text and propose concrete fixes for typeface, size, weight, contrast, and spacing to meet WCAG contrast targets.

Frequently Asked Questions about legibility

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

FAQPage Schema
How do I improve UI text legibility for short phrases and confirmation codes?

Improve UI text legibility by selecting appropriate typefaces and tuning size, weight, contrast, and spacing. This ensures short phrases, navigation, buttons, and confirmation codes are visually distinguishable at a glance, preventing user errors and accessibility failures.

What is the difference between legibility and readability in UI design?

Legibility focuses on character clarity for short UI text like labels, buttons, and IDs, ensuring users can tell characters apart instantly. Readability applies to long-form reading. This distinction guides targeted adjustments for constrained viewing conditions rather than paragraph formatting.

How do I fix low contrast text to meet WCAG accessibility thresholds?

Fix low contrast text by auditing your UI screen and proposing concrete adjustments to typeface weight and color. Verifying these changes against WCAG contrast thresholds ensures characters remain visually distinguishable under constrained viewing conditions.

What's the best way to prevent character disambiguation errors in user interfaces?

Prevent character disambiguation errors by tuning the five inputs to legibility: typeface design, size, weight, contrast, and spacing. Applying these adjustments to UI text helps users quickly tell characters apart in IDs and short phrases.

Does this approach work for accessibility audits on error messages and navigation?

Yes, this approach works for accessibility audits on error messages, navigation, and buttons. It diagnoses legibility problems like squinting and mistyped codes, then applies targeted typeface and spacing fixes to ensure character clarity.