Recently, a large e-commerce service approached us: their new light theme drew complaints from users about eye fatigue. Analysis showed that the color contrast of the main text (#333 on #fff) was too high, and there was no difference between the background and cards — the interface appeared "flat." We reworked the color architecture, added surface levels, and adjusted the typography. After the improvements, LCP metrics improved by 12%, and user satisfaction metrics grew by 30%. Our experience in design systems spans over 8 years, and we have implemented 45+ projects involving dual-theme integration. Such architecture not only enhances UX but also reduces maintenance costs — thanks to a unified token system, modifications are applied 3 times faster.
How to Ensure Contrast in a Light Theme?
Contrast is a key parameter of a light theme. We always follow WCAG 2.2: for body text, the ratio must be at least 7:1, for secondary text — 4.5:1. But it's not just about numbers. It's important to properly select a color palette with multiple surface levels: background, surface, raised, and overlay. A difference of 4–8 shades of gray creates depth without unnecessary shadows. Also consider responsive design: the light theme should look equally good on different resolutions — we test contrast on mobile, tablet, and desktop.
Why Is It Important to Use Color Tokens?
Tokens are CSS Custom Properties that define colors in a single place. They allow changing the theme with a single class on <html>, without rewriting components. If a project plans dual-theme (light + dark), tokens are mandatory. We use Style Dictionary to generate tokens from Figma, eliminating discrepancies between designs and code. Comparison: a light theme with tokens scales 3 times faster than with hardcoded values, and post-launch rework costs are reduced by up to 40%.
Typographic Scale and Accent Colors
For text, we use the scale: H1 40–56px, H2 32–40px, H3 24–28px, Body 16px, Small 14px, Caption 12px. Colors: primary #111827, secondary #6B7280, disabled #9CA3AF. Never use pure #000 — it is too contrasty. Proper choice of fonts and sizes improves readability and reduces eye strain.
Accent colors are designed by states:
| State | Background | Text |
|---|---|---|
| Default | #2563EB | #FFFFFF |
| Hover | #1D4ED8 | #FFFFFF |
| Active | #1E40AF | #FFFFFF |
| Disabled | #BFDBFE | #93C5FD |
| Focus | default + ring 2px #93C5FD | — |
Semantic colors: Success green-600, Warning amber-600, Error red-600, Info blue-600.
Shadows in the Light Theme
Shadows are the main tool for elevation. We use two-layer shadows (near + far), following the physics of light scattering:
- Shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
- Shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)
- Shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
- Shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
Comparison: Tokens vs Hardcoded
| Parameter | With Tokens | Without Tokens |
|---|---|---|
| Theme switching speed | Instant, one class | Rewriting CSS |
| Rework time | 1–2 hours | 1–2 days |
| Error risk | Low (single point of change) | High (many places) |
| Scalability | High (adding themes) | Low (only one theme) |
What's Included in the Work
We provide turnkey light theme development:
- Audit of current color palette and contrast
- Creation of color token system (Figma variables + Style Dictionary)
- Typographic scale and state configuration
- Contrast ratio verification for all pairs (text/background) and WCAG violation fixes
- Component updates (buttons, cards, modals)
- Token usage documentation
- Post-launch support (1 month)
How We Work on a Light Theme
- Analytics: audit existing colors, measure contrast of each pair, identify issues.
- Design: create token system in Figma, align with the designer.
- Implementation: generate CSS variables, rewrite components, add theme switching.
- Testing: automated contrast testing (Playwright + axe) and visual regression.
- Deployment: staging rollout, final check, handover of documentation.
Example of Color Tokens for a Light Theme
:root {
--color-bg: #ffffff;
--color-surface: #f9fafb;
--color-raised: #ffffff;
--color-text-primary: #111827;
--color-text-secondary: #6b7280;
--color-accent: #2563eb;
}
[data-theme="dark"] {
--color-bg: #111827;
--color-surface: #1f2937;
--color-raised: #374151;
--color-text-primary: #f9fafb;
--color-text-secondary: #9ca3af;
--color-accent: #60a5fa;
}
Timelines and Cost
Timelines: from 3 to 14 days depending on scope (small site vs enterprise product). Cost is calculated individually after scope assessment — contact us, we will evaluate your project free of charge. Quality guarantee: all colors meet WCAG AA/AAA, ensuring readability for 99% of users. Token adoption pays off after the first theme change — time and budget savings are clear. Contact us — we will help improve UX and retain users. Order your project, and we will make your light theme comfortable and accessible.
Evaluate your light theme: find out how well it meets accessibility standards. Get a consultation — we will answer all your questions.