Responsive design is not just about layout. Color also needs to respond to different viewing conditions. A palette designed on a large, calibrated desktop monitor faces very different challenges on a 6-inch phone screen viewed in bright sunlight.
Sunlight and Ambient Light
Mobile devices are frequently used outdoors or in bright environments. Sunlight effectively reduces the perceived contrast of your design by 30 to 50%. A contrast ratio that barely passes AA at 4.5:1 on desktop may be functionally unreadable on a phone in the sun. Building margin into your contrast ratios (aiming for 6:1 or higher) provides a buffer for real-world conditions.
Touch Target Visibility
On mobile, interactive elements must be visually distinguishable enough to tap accurately. WCAG 2.2 requires a minimum target size of 24x24px, but visibility is equally important. A button that blends into its background forces users to hunt for the tap target. Your CTA colors need to create obvious visual boundaries around tappable areas.
Color on Different Screens
Mobile screens vary dramatically. An OLED Samsung displays oversaturated colors. An older LCD iPad shows muted tones. Your palette needs to be robust across this range, which again argues for strong contrast ratios rather than subtle color differences.
Dark Mode on Mobile
A large percentage of mobile users enable system-wide dark mode. If your site does not respect the prefers-color-scheme: dark media query, your light palette will feel glaring on a phone at night. Plan your dark mode palette alongside your light mode palette.