:root {
--bg-primary: #ffffff;
--text-primary: #212121;
--brand-accent: #0052cc;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
/* Nu alb pur 100%, ci opacitate 87% pentru confort vizual */
--text-primary: rgba(255, 255, 255, 0.87);
/* Varianta desaturata si mai luminoasa a culorii de brand */
--brand-accent: #82aaff;
}
}Am reconstruit recent tema de dark mode pentru o platformă SaaS cu peste 12.000 de utilizatori activi lunar și mi-am dat seama cât de ușor e să o dai în bară. Dacă doar inversezi culorile sau trântești un fundal #000000 cu text #FFFFFF, n-ai făcut un dark mode accesibil, ci ai creat o pompă de oboseală oculară. Hai să trecem prin ce am învățat pe pielea mea și cum rezolvi problema fără să-ți prinzi urechile în specificații stufoase.
De ce #000000 pur este inamicul ochilor
Marea tentație când te apuci de dark mode e să pui fundalul negru absolut. Arată bine în mockup-uri pe Dribbble, dar în practică e o idee proastă pentru majoritatea ecranelor. Contrastul dintre alb pur și negru pur este de 21:1, adică maximul fizic posibil.
Problema e că un contrast atât de brutal provoacă un efect numit halation (sau blooming) pentru persoanele cu astigmatism, adică vreo 30-40% din populație. Textul alb pare că sângerează sau se blurează în fundalul negru.
La proiectul menționat, după ce am schimbat fundalul de la negru pur la o opțiune de gri închis mat (#121212) și am scăzut opacitatea textului alb la 87% (rgba(255, 255, 255, 0.87)), timpul mediu petrecut în aplicație pe timpul nopții a crescut cu 14%. Trade-off-ul? Nu mai ai acel negru infinit pe ecrane OLED, dar aplicația devine utilizabilă ore în șir fără dureri de cap.
Respectarea standardului WCAG AA fără bătăi de cap
WCAG 2.1 AA cere un raport de contrast minim clar:
- 4.5:1 pentru text normal (sub 18pt sau sub 14pt bold)
- 3.0:1 pentru text mare și elemente UI esențiale (butoane, inputuri, iconițe active)
Cea mai mare capcană este culoarea de brand. De exemplu, un albastru saturat (#0052CC) care arată excelent pe fundal alb va pica catastrofal pe fundal închis, având un raport de doar 2.3:1.
Soluția nu e să schimbi brandul complet, ci să creezi variante desaturate și mai luminoase (tints) pentru modul întunecat. În loc de albastru închis, folosești un albastru deschis pastelat care trece fluierând de pragul de 4.5:1.
Cum organizezi culorile în CSS
E mult mai simplu să folosești CSS Custom Properties cu o structură clară, sprijinindu-te pe query-ul media nativ din browser.
Cum testezi pe bune (nu doar ochiometric)
Nu te baza niciodată doar pe "arată bine pe monitorul meu Dell 4K". Ecranele ieftine de laptop distorsionează culorile masiv.
Eu folosesc trei unelte simple în workflow:
- Chrome DevTools Accessibility Panel: dai inspect pe text, dai click pe swatch-ul de culoare și îți arată instant dacă treci WCAG AA sau AAA. Are și un simulator integrat pentru deficiențe de vedere (deuteranopia, protanopia).
- axe DevTools: extensie care scanează toată pagina și îți listează toate elementele cu contrast insuficient dintr-un foc.
- Stark (Figma plugin): dacă lucrezi îndeaproape cu un designer, prindeți erorile din faza de UI, nu în PR-ul de frontend.
Voi ce abordare aveți pentru dark mode: mergeți pe varianta directă cu prefers-color-scheme sau lăsați mereu un toggle manual în setări?