Navigating Theme Contrast Issues: A Deep Dive into ILiv's Design System

TL;DR

• Discovered a contrast issue in the teal theme while working on ILiv’s app.
• Used Figma design direction but realized white with opacity wasn’t suitable.
• Adjusted opacity to enhance contrast without altering underlying design.
• Proposed automating theme checks to detect similar issues in future updates.

This morning, I ran into an interesting contrast issue while working on ILiv. Our product owner pointed out that using a teal theme on a scores modal made the text barely visible. It wasn’t immediately obvious why this was happening, as the instructions in Figma weren’t specific to the teal theme.

Upon closer inspection, I found that Figma suggested a color scheme of white plus a 40% opacity, which I’d initially beaten to 75% to improve visibility during blue theme testing. The oversight occurred because manual testing in every theme seemed redundant, given we use a design system predicated on reusable color principles—like neutral 500 across all themes. Consequently, I didn’t recheck against red or green themes, presuming they were consistent by default.

The fix: instead of relying on white + opacity, I propose explicitly controlling color using our standardized design system shades. This should preempt similar oversights by leveraging predefined color mappings rather than opacity tricks.

Additionally, considering potential automation or tooling enhancements could save us from such subtle bugs in the future. Perhaps integrating an end-to-end system or leveraging our JEST setup to include contrast checks akin to what browsers handle would streamline this aspect.