Closed captions (CC) are a critical accessibility feature that benefit not only users with hearing impairments but also those watching content in noisy environments or learning new languages. Implementing CC correctly and consistently across apps is crucial for maintaining a high-quality user experience on Fire TV devices.
These guidelines focus on styling recommendations and user experience flow to help developers create caption implementations that are both functional and aesthetically pleasing. While current API limitations may present some challenges (such as the lack of querying for system value defaults), we provide workarounds and best practices to achieve the desired results.
Why consistent closed caption styling matters
Consistent closed caption rendering, placement, and font usage across apps creates a unified, accessible experience for Fire TV users. Platform-level differences in CC styling between Vega and Fire OS implementations can lead to unexpected behaviors, and without clear guidelines, apps may render captions inconsistently.
These recommendations provide a standard for CC styling across the Fire TV ecosystem. They give you direction on implementing accessible and user-friendly CC features, improving overall user satisfaction, and pave the way for future enhancements in CC-related APIs and platform capabilities.
User experience flow
We recommend implementing the following user experience flow for closed captions.
Note: System CC can be accessed on Fire TV via Accessibility > Closed Captions. If it is turned ON, the user has access to a menu where they can set Text, Text Background, and Window Background settings. The values for these can be found in the sections below.
When system CC is ON:
- Honor system preferences for caption styling (font, size, colors, etc.)
- Default to these system settings in your app
- Optionally offer additional in-app customization, but always start with system preferences
When system CC is OFF:
- If the user doesn’t enable CC in your app, don’t display captions
- If the user enables CC in your app:
- With in-app styling options: start with system default values, then preserve user customizations made within the app
- Without in-app styling options: consistently use system default values
This approach ensures a seamless experience for users across different apps and respects their system-wide preferences when set.
Audio descriptions
When implementing closed captions, we recommend respecting the system’s audio description preferences. Users can set these via Accessibility > Audio Descriptions.
If your app supports audio descriptions:
- Check system preferences for audio descriptions when:
- Starting playback
- User changes system accessibility settings
- User changes audio tracks
- If system audio descriptions are enabled:
- Default to the Audio Description track when available
- Maintain the user’s ability to manually switch audio tracks
- Preserve this preference across app sessions
Styling guidelines and recommendations
We recommend abiding by the following system defaults. We also provide the default CC settings that apps should ideally start with, in case they are enabling in-app CC styling.
Text size
Fire OS and Vega handle caption scaling differently. Fire OS uses scalable pixels (sp), inheriting Android’s defaults with a base size of 48sp. Vega uses absolute pixels with a base size of 24px at 1080p. While both need to scale for different resolutions, they use different base sizes and progression. We recommend using Vega’s values, with 24px as the default text size.
| Size Name | Fire OS (scale factor x 48sp base) | Vega (scale factor x 24px base) |
|---|---|---|
| Very Small | 12px (0.25x) | 12px (0.5x) |
| Small | 24px (0.5x) | 18px (0.75x) |
| Normal (default) | 48px (1x) | 24px (1x) |
| Large | 72px (1.5x) | 36px (1.5x) |
| Very Large | 96px (2x) | 48px (2x) |
Text colors and opacity
Provide a range of color options, including at least: White, Black, Red, Green, Blue, Yellow, Magenta, Cyan. Allow full opacity control with steps: 25%, 50%, 75%, 100% (default). The default color should be white (#FFFFFFFF).
Background color
Offer the same color range as text color, although the same background color and text color should not be selected at the same time (e.g., black background with black text). Allow opacity control: 25%, 50%, 75%, 100% (default). The default background color should be black (#FF000000).
Window color
The default should be transparent. Offer the same color range as text color, although the same window color and text color should not be selected at the same time (e.g., black window with black text).
Fonts
Implement the following font options:
| Font Style | Font Family | Use Case |
|---|---|---|
| SERIF | Bookerly | Default serif font, good for readability |
| SANS_SERIF (Default) | Amazon Ember | Clean, modern look |
| MONOSPACE_SANS | Droid Sans Mono | Fixed-width sans serif |
| MONOSPACE_SERIF | Source Code Pro | Fixed-width serif |
| CASUAL | MotoyaLMaru | Informal style |
| CURSIVE | Dancing Script | Decorative style |
| SMALL_CAPITALS | Bookerly (transformed) | Emphasis style |
Edge styles
Implement the following edge styles. By default there should be no special edge styling. Allow users to choose the edge color, with white (#FFFFFFFF) as the default.
| Style Name | Fire OS Value | Color | Offset {x, y} | Blur Radius | Description |
|---|---|---|---|---|---|
| None (Default) | 0 | N/A | {0, 0} | 0 | No special edge styling |
| Outline (Uniform) | 1 | Black | {0, 0} | 0 | Uniform outline around text |
| Drop Shadow | 2 | Black | {1.6, 2} | 1.2 | Shadow effect behind text |
| Raised | 3 | White | {-1.1, -1.3} | 1 | Text appears raised (bevel effect) |
| Depressed | 4 | White | {1.1, 1.3} | 1 | Text appears depressed (bevel effect) |
Positioning and layout
- Horizontal alignment: Use centered alignment by default, with options for left and right alignment.
- Vertical position: Position the caption view at 10% from the bottom of the video content area by default.
- Safe area: Keep captions within 5% inset from the left and right edges of the screen (e.g., for a 1920px wide screen, maintain at least 96px margin on each side).
- Padding: Apply a default inner padding to the text equal to 12.5% of the text size. This padding should be applied to both the left and right sides of the text.
Closed captions ducking
When implementing closed captions, handle dynamic positioning to prevent captions from being obscured by player controls or other UI elements. The default behavior should be:
- Normal position: 10% from the bottom of the video content area
- Ducked position: Move captions up above player controls when they appear
- Transition: Animate the position change smoothly (recommended duration: 250–300ms)
Scenarios that require CC ducking:
- Player controls become visible
- Progress bar appears
- Bottom-aligned info cards or overlays are displayed
- Any other UI elements that might obscure captions
Default values recap
When system CC is ON, or when system CC is OFF and users enable CC in your app, or when initializing your app’s CC settings, use these defaults:
| CC Styling Type | Default Value |
|---|---|
| Text Size | Normal (24px) |
| Text Color | White (#FFFFFFFF) |
| Text Opacity | 100% |
| Background Color | Black (#FF000000) |
| Window Color | Transparent |
| Window Opacity | 100% |
| Font | Sans-serif (Amazon Ember or equivalent) |
| Edge Style | None |
| Edge Color | White (#FFFFFFFF) |
| Horizontal Alignment | Centered |
| Vertical Position | 10% from bottom of video content area |
| Safe Area | 5% inset from the left and right edges of the screen |
| Inner Padding | 12.5% of text size (left and right) |
| CC Ducking | Enabled |
| CC Ducking – Normal Position | 10% from bottom of video content area |
| CC Ducking – Ducked Position | Above player controls (calculated based on control height) |
| CC Ducking – Trigger | When player controls or other bottom UI elements become visible |
| CC Ducking – Transition Animation | Smooth animation (recommended duration: 250–300ms) |
| CC Ducking – Return Animation | Smooth animation back to normal position when controls are hidden (recommended duration: 250–300ms) |
Visual representation of how the default settings above translate to a 1080p screen
Implementation notes
- Additional customization: While offering in-app customization is optional, it can enhance user experience. If implementing custom controls, ensure they’re intuitive and align with system settings where possible.
- Testing recommendations: Test your CC implementation thoroughly with system CC both ON and OFF. Verify that all styling options render correctly across different content types. Ensure your app gracefully handles transitions between system and in-app CC settings.
- Performance considerations: Implement efficient rendering techniques to avoid performance issues, especially with complex edge styles or large text sizes.
- Accessibility: Ensure that CC controls within your app are themselves accessible, with clear labels and easy navigation.
- Ducking: Monitor the visibility of player controls and other UI elements. When those appear, calculate sufficient clearance to ensure captions remain fully visible. We advise a maximum of 5% inset from the top of the UI element that appeared on the screen. Maintain caption position within the safe area, even when ducked. When implementing CC ducking, maintain all other caption styling properties (size, color, font, etc.). Only the vertical position should change.
Note: The Vega SDK does not currently provide an API for querying system CC preference defaults. This is a known limitation. For now, use the default values listed in this guide as your starting point.
If you follow these guidelines for your Vega app, you’ll create a captioning experience that is consistent with the Fire TV ecosystem, user-friendly, and accessible. Remember, while these are currently recommendations, implementing them will provide the best experience for your users across all Fire TV devices. We appreciate your efforts in making Fire TV a more inclusive platform.
Related:
- Implement Reading and Subscribing to AD/CC (Fire TV)
- Accessibility Guide for Vega Web Apps
- Assistive Technologies for Vega
- React Native for Vega Accessibility API
Last updated: Mar 12, 2026