Skip to content

Theme System Samples

Testing different theme approaches: Light theme yellow integration and High Contrast themes for low vision accessibility

Approach 1: Amber Yellow Accents (#d97706)

High contrast amber yellow that works well on white backgrounds

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Approach 2: Blue Background + Yellow Accents

Using blue backgrounds to allow bright yellow accents while maintaining brand colors

Community Events

Access to all OCD community events, socials, and gatherings throughout the year.

Voting Rights

Have your say in club decisions and vote in board elections.

Support Network

Connect with a supportive network of deaf and hard-of-hearing individuals.

Approach 3: Subtle Yellow Background Tints

Very light yellow backgrounds with stronger yellow borders and accents

Community Events

Access to all OCD community events, socials, and gatherings throughout the year.

Voting Rights

Have your say in club decisions and vote in board elections.

Support Network

Connect with a supportive network of deaf and hard-of-hearing individuals.

Approach 4: Mustard Yellow Accents (#ca8a04)

Warmer, more approachable mustard yellow tone

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Approach 5: Honey Gold Accents (#b7791f)

Sophisticated, premium honey gold tone

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

High Contrast Themes for Low Vision Users

Maximum contrast ratios (7:1 WCAG AAA) with enhanced visual elements for users with low vision

Option 1: High Contrast Light (Black on White)

Pure black text on pure white background with bright yellow accents and enhanced borders

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Option 2: High Contrast Dark (White on Black)

Pure white text on pure black background with bright yellow accents and enhanced visibility

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Option 3: High Contrast Blue (OCD Brand Focused)

Light blue backgrounds with high contrast blue elements maintaining OCD brand identity

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Option 4: High Contrast Amber (Alternative Accent)

High contrast design with warm amber accents instead of yellow for users who prefer warmer tones

Sample Image

Monthly Social

Join us for our monthly social gathering with games, refreshments, and great conversation.

Apr 15, 2025Learn more
Sample Image

ASL Workshop

Learn new signs and practice your ASL skills with our certified instructors.

Apr 22, 2025Learn more
Sample Image

Board Meeting

Monthly board meeting open to all members. Come share your ideas and feedback.

May 5, 2025Learn more

Theme Options Summary

Light Theme Accents

Amber, mustard, honey gold variations for standard users

High Contrast Light

Pure black on white, maximum contrast (7:1 ratio)

High Contrast Dark

Pure white on black, enhanced visibility

High Contrast Blue

OCD brand focused with maximum contrast

Accessibility Features of High Contrast Themes:

  • WCAG AAA Compliance: 7:1 contrast ratios exceed accessibility standards
  • Enhanced Focus Indicators: 4px yellow outlines for keyboard navigation
  • Stronger Typography: Increased font weights and sizes for better readability
  • Clear Visual Hierarchy: 3px borders and enhanced shadows for element separation
  • Low Vision Optimized: Designed specifically for users with visual impairments

Light theme options enhance standard accessibility while high contrast themes provide maximum visibility for low vision users.

Choose Your Preferred High Contrast Theme!