How to optimize color selections for accessibility and readability
How to optimize color selections for accessibility and readability
How to Optimize Color Selections for Accessibility and Readability
The Color Theme settings in Cadence allow you to customize your event's visual appearance across web and mobile platforms. When selecting colors, it's important to ensure they meet accessibility standards for all users, including those with visual impairments or color blindness. This guide will help you choose colors that maintain readability while still reflecting your brand identity.
When to use
When configuring color themes for any event
When your audience includes users with visual impairments
When you need to comply with accessibility standards
When you want to ensure optimal readability across all devices
How to do it
Navigate to Event Setup in your Cadence admin dashboard.
Select Color Theme from the left sidebar menu.
Choose your preferred color theme option (Default Color, Custom Color, or Advanced Colors).
Consider contrast ratios when selecting colors.
For text elements, aim for a contrast ratio of at least 4.5:1 between text and background colors to meet WCAG AA standards.
Avoid problematic color combinations that are difficult for colorblind users.
Red/green, blue/purple, and green/brown combinations can be particularly challenging for people with color blindness.
Use the WebAIM Contrast Checker to verify your color selections.
Test with grayscale to ensure your interface is still usable without color.
Take a screenshot of your event and convert it to grayscale to see if important elements remain distinguishable.
Select darker shades when using Custom Color or Advanced Colors options.
Very light colors (like #FFFF00 yellow) may be difficult to read against white backgrounds in the Cadence interface.
For Advanced Colors, prioritize contrast for text-heavy features.
Features like Schedule, Materials, and Live Feed should have higher contrast colors as they contain more text content.
Click "Apply Color to All" to save your accessibility-optimized color theme.
Test your color theme across multiple devices and browsers.
Check both desktop and mobile views to ensure readability at different screen sizes.
Troubleshooting
If users report difficulty reading content after applying your color theme, consider increasing the contrast by selecting darker shades or reverting to the Default Color option temporarily while you refine your selections.