# Video Content Accessibility

> Accessibility guidelines for video content including contrast, timing, and readable typography. Use this when designing video layouts, choosing colors/fonts, setting animation durations, or ensuring emoji and visual elements are accompanied by text alternatives. Use when this capability is needed.

- Skill: `tomevault-io/video-content-accessibility` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/video-content-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/video-content-accessibility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/video-content-accessibility

---


# Video Content Accessibility

This Skill provides Claude Code with specific guidance on how it should handle accessibility in Remotion video compositions.

## When to use this skill:

- Designing video composition layouts and color schemes
- Choosing text sizes and font weights for readability
- Setting animation timing and transition durations
- Using emojis or visual indicators in video content
- Ensuring information hierarchy through visual design
- Testing color contrast in theme.ts color choices

## Instructions

- **Color Contrast**: Maintain high contrast ratios (4.5:1 minimum) for text on backgrounds; test with various backgrounds
- **Readable Typography**: Use large, clear fonts; minimum 48px for body text in 1080x1920 format
- **Text Alternatives**: Ensure all information conveyed visually has text equivalents (e.g., star ratings + numeric score)
- **Animation Timing**: Provide sufficient time for text to be read; minimum 3 seconds for short text
- **Emoji Accessibility**: Use Noto Color Emoji font for consistent emoji rendering; always pair with text labels
- **Motion Sensitivity**: Avoid jarring transitions; use smooth easing functions from `src/lib/animations.ts`
- **Information Hierarchy**: Use size, color, and position to create clear visual hierarchy

**Examples:**
```typescript
// Good: High contrast, large text, sufficient timing, text + visual
import { theme } from '@/lib/theme';

export const BookRating: React.FC<{ rating: number }> = ({ rating }) => (
  <div style={{
    backgroundColor: theme.colors.background, // Dark
    color: theme.colors.text, // Light - high contrast
    fontSize: 64, // Large and readable
    padding: 40,
  }}>
    <div>⭐ {rating.toFixed(1)}</div> {/* Emoji + numeric */}
  </div>
);

// Bad: Low contrast, small text, emoji only
<div style={{ color: '#666', fontSize: 24 }}>
  ⭐⭐⭐⭐
</div>
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/chad3814) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->