10 KiB
Vendored
10 KiB
Vendored
Mobile Color System Reference
OLED optimization, dark mode, battery-aware colors, and outdoor visibility. Color on mobile isn't just aesthetics—it's battery life and usability.
1. Mobile Color Fundamentals
Why Mobile Color is Different
DESKTOP: MOBILE:
├── LCD screens (backlit) ├── OLED common (self-emissive)
├── Controlled lighting ├── Outdoor, bright sun
├── Stable power ├── Battery matters
├── Personal preference ├── System-wide dark mode
└── Static viewing └── Variable angles, motion
Mobile Color Priorities
| Priority | Why |
|---|---|
| 1. Readability | Outdoor, variable lighting |
| 2. Battery efficiency | OLED = dark mode saves power |
| 3. System integration | Dark/light mode support |
| 4. Semantics | Error, success, warning colors |
| 5. Brand | After functional requirements |
2. OLED Considerations
How OLED Differs
LCD (Liquid Crystal Display):
├── Backlight always on
├── Black = backlight through dark filter
├── Energy use = constant
└── Dark mode = no battery savings
OLED (Organic LED):
├── Each pixel emits own light
├── Black = pixel OFF (zero power)
├── Energy use = brighter pixels use more
└── Dark mode = significant battery savings
Battery Savings with OLED
Color energy consumption (relative):
#000000 (True Black) ████░░░░░░ 0%
#1A1A1A (Near Black) █████░░░░░ ~15%
#333333 (Dark Gray) ██████░░░░ ~30%
#666666 (Medium Gray) ███████░░░ ~50%
#FFFFFF (White) ██████████ 100%
Saturated colors also use significant power:
├── Blue pixels: Most efficient
├── Green pixels: Medium
├── Red pixels: Least efficient
└── Desaturated colors save more
True Black vs Near Black
#000000 (True Black):
├── Maximum battery savings
├── Can cause "black smear" on scroll
├── Sharp contrast (may be harsh)
└── Used by Apple in pure dark mode
#121212 or #1A1A1A (Near Black):
├── Still good battery savings
├── Smoother scrolling (no smear)
├── Slightly softer on eyes
└── Material Design recommendation
RECOMMENDATION: #000000 for backgrounds, #0D0D0D-#1A1A1A for surfaces
3. Dark Mode Design
Dark Mode Benefits
Users enable dark mode for:
├── Battery savings (OLED)
├── Reduced eye strain (low light)
├── Personal preference
├── AMOLED aesthetic
└── Accessibility (light sensitivity)
Dark Mode Color Strategy
LIGHT MODE DARK MODE
────────── ─────────
Background: #FFFFFF → #000000 or #121212
Surface: #F5F5F5 → #1E1E1E
Surface 2: #EEEEEE → #2C2C2C
Primary: #1976D2 → #90CAF9 (lighter)
Text: #212121 → #E0E0E0 (not pure white)
Secondary: #757575 → #9E9E9E
Elevation in dark mode:
├── Higher = slightly lighter surface
├── 0dp → 0% overlay
├── 4dp → 9% overlay
├── 8dp → 12% overlay
└── Creates depth without shadows
Text Colors in Dark Mode
| Role | Light Mode | Dark Mode |
|---|---|---|
| Primary | #000000 (Black) | #E8E8E8 (Not pure white) |
| Secondary | #666666 | #B0B0B0 |
| Disabled | #9E9E9E | #6E6E6E |
| Links | #1976D2 | #8AB4F8 |
Color Inversion Rules
DON'T just invert colors:
├── Saturated colors become eye-burning
├── Semantic colors lose meaning
├── Brand colors may break
└── Contrast ratios change unpredictably
DO create intentional dark palette:
├── Desaturate primary colors
├── Use lighter tints for emphasis
├── Maintain semantic color meanings
├── Check contrast ratios independently
4. Outdoor Visibility
The Sunlight Problem
Screen visibility outdoors:
├── Bright sun washes out low contrast
├── Glare reduces readability
├── Polarized sunglasses affect
└── Users shield screen with hand
Affected elements:
├── Light gray text on white
├── Subtle color differences
├── Low opacity overlays
└── Pastel colors
High Contrast Strategies
For outdoor visibility:
MINIMUM CONTRAST RATIOS:
├── Normal text: 4.5:1 (WCAG AA)
├── Large text: 3:1 (WCAG AA)
├── Recommended: 7:1+ (AAA)
AVOID:
├── #999 on #FFF (fails AA)
├── #BBB on #FFF (fails)
├── Pale colors on light backgrounds
└── Subtle gradients for critical info
DO:
├── Use system semantic colors
├── Test in bright environment
├── Provide high contrast mode
└── Use solid colors for critical UI
5. Semantic Colors
Consistent Meaning
| Semantic | Meaning | iOS Default | Android Default |
|---|---|---|---|
| Error | Problems, destruction | #FF3B30 | #B3261E |
| Success | Completion, positive | #34C759 | #4CAF50 |
| Warning | Attention, caution | #FF9500 | #FFC107 |
| Info | Information | #007AFF | #2196F3 |
Semantic Color Rules
NEVER use semantic colors for:
├── Branding (confuses meaning)
├── Decoration (reduces impact)
├── Arbitrary styling
└── Status indicators (use icons too)
ALWAYS:
├── Pair with icons (colorblind users)
├── Maintain across light/dark modes
├── Keep consistent throughout app
└── Follow platform conventions
Error State Colors
Error states need:
├── Red-ish color (semantic)
├── High contrast against background
├── Icon reinforcement
├── Clear text explanation
iOS:
├── Light: #FF3B30
├── Dark: #FF453A
Android:
├── Light: #B3261E
├── Dark: #F2B8B5 (on error container)
6. Dynamic Color (Android)
Material You
Android 12+ Dynamic Color:
User's wallpaper → Color extraction → App theme
Your app automatically gets:
├── Primary (from wallpaper dominant)
├── Secondary (complementary)
├── Tertiary (accent)
├── Surface colors (neutral, derived)
├── On-colors (text on each)
Supporting Dynamic Color
// Jetpack Compose
MaterialTheme(
colorScheme = dynamicColorScheme()
?: staticColorScheme() // Fallback for older Android
)
// React Native
// Limited support - consider react-native-material-you
Fallback Colors
When dynamic color unavailable:
├── Android < 12
├── User disabled
├── Non-supporting launchers
Provide static color scheme:
├── Define your brand colors
├── Test in both modes
├── Match dynamic color roles
└── Support light + dark
7. Color Accessibility
Colorblind Considerations
~8% of men, ~0.5% of women are colorblind
Types:
├── Protanopia (red weakness)
├── Deuteranopia (green weakness)
├── Tritanopia (blue weakness)
├── Monochromacy (rare, no color)
Design rules:
├── Never rely on color alone
├── Use patterns, icons, text
├── Test with simulation tools
├── Avoid red/green distinctions only
Contrast Testing Tools
Use these to verify:
├── Built-in accessibility inspector (Xcode)
├── Accessibility Scanner (Android)
├── Contrast ratio calculators
├── Colorblind simulation
└── Test on actual devices in sunlight
Sufficient Contrast
WCAG Guidelines:
AA (Minimum)
├── Normal text: 4.5:1
├── Large text (18pt+): 3:1
├── UI components: 3:1
AAA (Enhanced)
├── Normal text: 7:1
├── Large text: 4.5:1
Mobile recommendation: Meet AA, aim for AAA
8. Color Anti-Patterns
❌ Common Mistakes
| Mistake | Problem | Fix |
|---|---|---|
| Light gray on white | Invisible outdoors | Min 4.5:1 contrast |
| Pure white in dark mode | Eye strain | Use #E0E0E0-#F0F0F0 |
| Same saturation dark mode | Garish, glowing | Desaturate colors |
| Red/green only indicator | Colorblind users can't see | Add icons |
| Semantic colors for brand | Confusing meaning | Use neutral for brand |
| Ignoring system dark mode | Jarring experience | Support both modes |
❌ AI Color Mistakes
AI tends to:
├── Use same colors for light/dark
├── Ignore OLED battery implications
├── Skip contrast calculations
├── Default to purple/violet (BANNED)
├── Use low contrast "aesthetic" grays
├── Not test in outdoor conditions
└── Forget colorblind users
RULE: Design for the worst case.
Test in bright sunlight, with colorblindness simulation.
9. Color System Checklist
Before Choosing Colors
- Light and dark mode variants defined?
- Contrast ratios checked (4.5:1+)?
- OLED battery considered (dark mode)?
- Semantic colors follow conventions?
- Colorblind-safe (not color-only indicators)?
Before Release
- Tested in bright sunlight?
- Tested dark mode on OLED device?
- System dark mode respected?
- Dynamic color supported (Android)?
- Error/success/warning consistent?
- All text meets contrast requirements?
10. Quick Reference
Dark Mode Backgrounds
True black (OLED max savings): #000000
Near black (Material): #121212
Surface 1: #1E1E1E
Surface 2: #2C2C2C
Surface 3: #3C3C3C
Text on Dark
Primary: #E0E0E0 to #ECECEC
Secondary: #A0A0A0 to #B0B0B0
Disabled: #606060 to #707070
Contrast Ratios
Small text: 4.5:1 (minimum)
Large text: 3:1 (minimum)
UI elements: 3:1 (minimum)
Ideal: 7:1 (AAA)
Remember: Color on mobile must work in the worst conditions—bright sun, tired eyes, colorblindness, low battery. Pretty colors that fail these tests are useless colors.