OLED displays — used in most premium mobile devices — render pure black as truly off-pixel, producing absolute black backgrounds with no backlight bleed. This creates a qualitative difference from LCD screens: dark mode on OLED genuinely turns off pixels, making true black (#000000) both power-efficient and visually distinct. Designers working on apps for OLED-dominant platforms (recent iPhone Pro, premium Android flagships) can use true black as a design element rather than a technical fallback. The design implication: a near-black surface (hsl 0, 0%, 8%) and a true black surface (#000) look identical on LCD but distinctly different on OLED. For dark-mode mobile UI, using true black for the page background and near-black for cards creates a surface hierarchy that only works on OLED — and looks flat on LCD. Decide whether to target OLED-specific design or to design for the minimum common denominator.
Ambient lighting changes how mobile colors appear in ways that desktop designers rarely account for. A screen viewed in bright outdoor sunlight requires higher color contrast to remain legible — colors that look appropriately differentiated at 200 nits in a dim office can collapse into each other at 800+ nits outdoors. Most mobile operating systems include automatic brightness adjustment, but designers cannot rely on this to solve contrast problems. The practical guideline: test all color contrast at the brightness levels and lighting conditions that your users encounter. For outdoor-use apps (sports, navigation, fitness), design for bright-ambient legibility as the baseline rather than the exception. High-contrast color pairs (near-black on white, dark-colored text on pale surfaces) are more robust across lighting conditions than lower-contrast choices that look fine in controlled conditions.
Touch target size creates a spatial constraint that affects color application differently than desktop hover states. WCAG requires a minimum 44×44pt touch target for interactive elements; Apple HIG recommends 44×44pt; Material Design recommends 48×48dp. At these sizes, a solid-fill button with a 2px border reads very differently from a hover-only desktop indicator. Mobile interactive states — pressed, selected, active — must communicate through color changes that are visible within the bounds of a small touch target, without requiring precise cursor placement. This means pressed state color changes should be substantial (not the subtle 5% lightness shift that works for desktop hover) and should affect the entire touch target area rather than just a small portion of it.
