/* Soluția robustă cu CSS Custom Properties */
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--accent: #0066cc; /* Albastru puternic pentru light mode */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212; /* Gri închis, nu negru pur */
--text-primary: #e0e0e0; /* Off-white, previne halation */
--accent: #66b2ff; /* Variantă desaturată și luminoasă pentru contrast optim (AA guaranteed) */
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}Am implementat acum un an dark mode pe o aplicație de monitorizare cu vreo 15.000 de utilizatori zilnici. Am crezut că scap ieftin cu un simplu media query și câteva culori inversate la ochi. M-am înșelat amarnic. În prima săptămână am primit zeci de tichete de la oameni care se plângeau de oboseală vizuală sau care pur și simplu nu mai puteau citi tabelele noastre de date.
Atunci am înțeles că un dark mode accesibil nu înseamnă doar să dai stingerea pe ecran. Dacă vrei să respecți standardele WCAG AA și să nu-ți chinui utilizatorii, trebuie să gândești totul de la zero.
Capcana negrului pur (#000000)
Cea mai mare greșeală pe care am făcut-o a fost să folosesc negru pur pentru fundal și alb pur (#FFFFFF) pentru text. Pe ecranele OLED sau pe monitoarele cu luminozitate mare, chestia asta produce un efect destul de urât numit halation. Pentru persoanele cu astigmatism (adică aproape jumătate din utilizatorii tăi), textul alb pare că pulsează sau se revarsă peste fundal. E extrem de obositor pentru ochi.
Am rezolvat problema trecând la un gri foarte închis, ușor cald, cum e #121212, combinat cu un text off-white, ca #E0E0E0. Contrastul rămâne excelent, dar contrastul perceput e mult mai moale. Ochii nu mai obosesc după zece minute de citit documentație.
Cum măsori contrastul fără să înnebunești
Standardul WCAG 2.1 AA cere un raport de contrast de cel puțin 4.5:1 pentru textul normal și 3:1 pentru textul mare sau elementele grafice active.
La început, testam doar pe monitorul meu de development de 27 de inch, calibrat perfect. Când am testat interfața pe un ecran ieftin de laptop vechi de 5 ani, jumătate din butoanele secundare și marginile de input dispăruseră complet. Nu se mai distingeau de fundal.
Acum folosesc direct uneltele din Chrome DevTools. Dai click dreapta pe un element, te uiți la secțiunea de culori și browserul îți arată exact dacă treci sau nu testul WCAG AA. Pentru chestii mai complexe, folosesc Polypane sau extensia Axe DevTools care scanează toată pagina instant.
Compromisul dureros cu culorile de brand
Aici apare adevăratul trade-off. Designerii vor dori mereu să folosească aceleași culori de brand și pe light mode, și pe dark mode. Dacă ai un galben aprins sau un verde crud, pe fundal închis fie vor arăta oribil, fie vor pica testul de contrast cu brio.
Soluția mea a fost să creez o paletă secundară, desaturată, special pentru modul întunecat. Am luat culorile de brand și le-am redus saturația cu vreo 25-30% și am crescut puțin luminozitatea. Da, nu mai este identic cu logo-ul companiei, dar interfața rămâne lizibilă și elementele interactive ies în evidență fără să pară murdare.
Cum structurăm CSS-ul pentru mentenanță ușoară
Pentru a nu o lua razna cu duplicarea codului, am trecut totul pe CSS custom properties. E mult mai simplu să schimbi doar valorile variabilelor în funcție de preferința utilizatorului sau de setările sistemului de operare.
Voi cum abordați dark mode-ul în proiecte? Mergeți pe varianta simplă cu inversare de culori sau stați să potriviți fiecare nuanță la pixel pentru WCAG?