wcag-audit-perceivable-text-size

When to Use

Use this tool when converting font sizes between units, checking accessibility compliance, or ensuring consistent typography scaling across different contexts.

Usage

Command Line

node scripts/convert.js --from 16px --to rem
node scripts/convert.js --value 1.25rem --base-font 16px --to px
node scripts/convert.js --from 14pt --to px --accessibility-check

JSON Input

node scripts/convert.js --json '{"from": "16px", "to": "rem", "baseFontSize": "16px"}'

Parameters

• --from: Source font size with unit (e.g., "16px", "12pt", "1.5em")
• --to: Target unit (px, pt, em, rem)
• --value: Alternative to --from for specifying the value
• --base-font: Base font size for em/rem calculations (default: 16px)
• --accessibility-check: Include WCAG compliance assessment
• --json: JSON input with conversion parameters

Output

Returns JSON with conversion results and accessibility assessment:

{
  "input": "16px",
  "output": "1rem",
  "baseFontSize": "16px",
  "accessibility": {
    "meetsMinimum": true,
    "recommendations": []
  }
}

Examples

Basic conversion

$ node scripts/convert.js --from 16px --to rem
16px = 1rem (base font: 16px)
✅ Accessibility: PASS (16px meets 14px minimum)

Point to pixel conversion

$ node scripts/convert.js --from 12pt --to px
12pt = 16px (1pt ≈ 1.333px)
✅ Accessibility: PASS (16px meets 14px minimum)

EM calculation with custom base

$ node scripts/convert.js --value 1.5em --base-font 18px --to px
1.5em = 27px (base font: 18px)
✅ Accessibility: PASS (27px exceeds 14px minimum)

Accessibility check

$ node scripts/convert.js --from 12px --to pt --accessibility-check
12px = 9pt
❌ Accessibility: FAIL (12px below 14px minimum for body text)
Recommendation: Increase to at least 14px (≈10.5pt) for readable text

Unit Conversions

Absolute Units

• px (pixels): Screen pixels, most common for web
• pt (points): Print units, 1pt = 1/72 inch

Relative Units

• em: Relative to parent element's font size
• rem: Relative to root element's font size (usually 16px)

Conversion Formulas

• 1pt ≈ 1.333px (at 96 DPI)
• 1em = 1 × parent font size
• 1rem = 1 × root font size (default: 16px)

WCAG Standards

• Minimum Size: 14px for body text, 18px for headings
• Zoom Support: Text must resize up to 200% without loss of functionality
• Relative Units: Prefer rem/em for better accessibility and responsiveness
• Print Compatibility: Consider pt units for print stylesheets

Best Practices

1. Use relative units: rem/em scale better with user preferences
2. Set root font size: Use 16px as base for consistent calculations
3. Test zoom: Ensure text remains readable when zoomed to 200%
4. Consider context: Different minimum sizes for different content types
5. Avoid fixed sizes: Allow user font size preferences to take effect

Learn More

For more information about Agent Skills and how they extend AI capabilities.