Menu

Individual skill

legibility-contrast-and-spacing

Apply contrast and spacing for legibility — calibrating color contrast between text and background, character tracking, and line leading so a chosen typeface and size actually render legibly. Use when picking text colors, choosing background colors that will carry text, evaluating accessibility against WCAG, fine-tuning typography for production rendering, or auditing why text "looks designed" but is hard to read. Even a perfect typeface at the right size will fail if contrast is too low, tracking too tight, or leading too cramped.

plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/legibility-contrast-and-spacing/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,537
Repository last updated
Nov 7, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Legibility — contrast and spacing

A typeface and size are necessary but not sufficient for legibility. The conditions under which type is rendered — contrast against background, spacing between characters, spacing between lines — determine whether the chosen typography actually communicates. Most legibility failures in production are spacing or contrast failures, not typeface failures.

## Color contrast

Color contrast is the difference in luminance between text and its background. WCAG codifies minimum thresholds:

- **4.5:1** for normal text (under 18pt regular or 14pt bold).
- **3:1** for large text (18pt+ regular or 14pt+ bold).
- **3:1** for graphical objects and UI components (icons, button outlines).
- **7:1** for AAA conformance — recommended for users with low vision or in poor viewing conditions.

These are floors, not targets. Best practice is to substantially exceed them where possible.