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:

// 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>