Theme QA: Semantic Colors
Visual testing and WCAG AA contrast validation for all theme palettes
About This QA Tool
This page visualizes all Origins and Seasons themes using the universal semantic color role system. Each theme's 4-color palette is mapped to semantic roles (accent, highlight, surface, nav, etc.) that drive consistent appearance across Devotionals, Scripture, Study Plans, Journal, and all other pages. Contrast ratios are calculated for key text/background pairs against WCAG AA standards (4.5:1 for normal text).
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Devotional Preview
Hero Title Area
Subtitle text on accent
"For God so loved the world..." - John 3:16
This is body text on the primary surface. It should be easily readable with good contrast.
Secondary muted text for labels and metadata.
UI Components
WCAG AA Contrast
Semantic Roles
Pass (≥4.5:1)
Meets WCAG AA for normal text
Warn (3.0-4.5:1)
Acceptable for large text only
Fail (<3.0:1)
Does not meet standards