Troubleshooting UI Shadows and Contrast in Android and iOS

TL;DR

• Identified and explored contrast issues in modal windows vs. other components.
• Discovered shadow implementation differences between iOS and Android.
• Adjusted the design to align shadows and colors according to desired specs.
• Resolved Android vs. iOS shadow behavior through elevation control.

Today, I delved into the seemingly simple, yet deceptively complex world of UI design peculiarities—specifically with shadows and background contrast in modals. Here’s how it went down:

Problem Statement

I observed that the AccomplishedResultsModal lacked proper contrast compared to the DailyAssess screen, possibly due to variations in background colors. When contrasting elements on the assess screen, the difference was noticeable but disappeared in the modal context due to a lighter backdrop.

Exploration and Hypotheses

First, I theorized that the background color difference between the assess screen and the modal was affecting the perceived contrast. Hypothesis: The assess screen background is darker, making contrasts inherently sharper than the modal’s lighter background.

Render Investigation

To verify, I forced the modal to render directly within the DailyAssess tab — yes, a straightforward process involving straightforward code alterations. However, things got slightly experimental when I mistakenly nested it incorrectly, but I quickly corrected that and proceeded to render it accurately.

Shadow Drama

Trying to pixel-perfect the contrast resulted in uncovering shadow discrepancies between platforms. Attempting to apply shadows on Android revealed the platform’s limitations in explicit offset controls. Unlike iOS, Android uses elevation to manage shadows, presenting a unique challenge.

Steps to Resolution

1. Background Color Check: Verified background colors in Figma. Correcting shades to match design specs solved the contrast issue partly.
2. Shadow Testing: Implemented shadows using a combination of existing shadows and newly created loose shadows for higher elevation on Android.
3. Design Adjustments: Altered shadow properties directly in the design system. Custom shadows were developed to bridge visual disparity between platforms.
4. Cross-Platform Consistency: Addressed the color code explicitly in shadows to achieve a uniform look across devices.

Conclusion

While simple UI changes can devolve into a rabbit hole of small issues, methodical investigation and platform-specific adjustments often lead to elegant solutions. Leverage Figma or similar tools for ensuring consistency and test your design across devices.

I’ll proceed with these insights, applying shadow fixes cross-platform to refine this UI feature further. Not every piece is finished here, but progress is being made one shadow at a time.