/* Configurare semantică accesibilă folosind variabile CSS */
:root {
--bg-base: #ffffff;
--bg-surface: #f4f4f5;
--text-main: #18181b;
--primary: #2563eb; /* Contrast > 4.5:1 pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-base: #121212; /* Evităm #000000 pur */
--bg-surface: #1e1e20; /* Elevare prin luminozitate */
--text-main: #e4e4e7; /* Alb dezaromat, contrast ~12:1 */
--primary: #60a5fa; /* Variantă desaturată/luminoasă pentru dark */
}
}
.card {
background-color: var(--bg-surface);
color: var(--text-main);
border: 1px solid rgba(255, 255, 255, 0.1);
}Acum doi ani am refăcut interfața pentru un SaaS B2B pe care îl foloseau vreo 12k operatori zi de zi. Am băgat dark mode repede, direct din variabile de Tailwind, și în prima săptămână am primit peste 30 de tichete de suport. Oamenii se plângeau că îi doare capul după două ore de muncă. Atunci am învățat că un dark mode bun nu înseamnă doar să pui fundal negru și text alb.
De ce fundalul #000000 pur este o greșeală
Alegerea clasică a multor developeri este background: #000000 cu color: #ffffff. Rezultatul? Un efect neplăcut numit halație (sau iradiere vizuală). Textul alb pur pare că vibrează pe un fundal pitch black, mai ales pentru utilizatorii cu astigmatism — adică peste 30% din populație.
În schimb, aplicațiile mari precum GitHub sau Linear folosesc un gri foarte închis, saturat subtil. Eu prefer un #121212 sau #18181b. Oferă un contrast mult mai moale, fără să obosească privirea. Pentru textul principal, folosesc un alb la 85-90% opacitate (#e4e4e7). Astfel obții un raport de contrast de aproximativ 12:1, mult peste minimul de 4.5:1 cerut de WCAG AA pentru text normal.
Ierarhia vizuală și culorile de accent
În light mode e simplu: folosești umbre (box-shadow) ca să creezi profunzime. În dark mode umbrele sunt aproape invizibile. Soluția constă în stratificarea prin luminozitate (elevation through surface lightness).
Cu cât un element este mai „aproape” de utilizator (un modal sau un card), cu atât suprafața lui trebuie să fie puțin mai deschisă. Fundalul paginii e cel mai închis, un card e cu 5% mai deschis, iar modalul e cel mai luminos.
La culorile de accent (butoane, badge-uri, linkuri), apare un trade-off sincer: o culoare de brand care arată impecabil pe alb va eșua lamentabil pe dark mode. Un albastru #0066cc are un contrast de doar 2.3:1 pe gri închis. Va trebui să desaturezi și să luminezi culorile primare pentru tema întunecată, chiar dacă asta înseamnă că abati puțin ghidul de brand.
Cum testezi rapid în fluxul de lucru
Nu te baza pe un monitor scump când testezi. Un panou OLED va arăta impecabil, dar pe un ecran ieftin de laptop utilizatorul nu va distinge două nuanțe de gri apropiate.
- DevTools inspect: În Chrome sau Firefox, când dai inspect pe un text, vezi direct raportul WCAG. Caută bifă verde la AA (minim 4.5:1 pentru text mic, 3:1 pentru text mare).
- Emulate Vision Deficiencies: Din tab-ul Rendering din Chrome, simulează protanopia sau achromatopsia. Vei observa rapid dacă stările de eroare sau succes depind doar de roșu/verde.
- Lighthouse / Axe: Un audit automatizat în CI/CD prinde scăpările mari înainte să ajungă în producție.
Voi cum abordați jetoanele de culoare (color tokens) când aveți de suportat ambele teme în proiecte mari?