wcag-audit-perceivable-text-size

Files (2)

• SKILL.md
• convert.js · scripts/

SKILL.md (first lines)

## 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
```bash
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
```bash
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:

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

## Examples

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

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

### EM calculation with custom base
```bash
$ 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
```bash
$ 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](https://agentskills.io/what-are-skills) and how they extend AI capabilities.

From Jkense/agent-skills-wcag, MIT.

More from Jkense/agent-skills-wcag