/* Exemplu simplu de implementare semantică cu contrast optim */
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--accent: #0056b3; /* Albastru închis pentru contrast pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
/* Evităm #000, folosim un gri închis confortabil */
--bg-primary: #121212;
/* Evităm #fff, reducem strălucirea obositoare */
--text-primary: #e4e4e7;
/* Accent mai deschis pentru a păstra contrastul peste 4.5:1 */
--accent: #3992ff;
}
}Am văzut prea multe implementări de dark mode făcute complet după ureche. Trântești un fundal negru smoală, pui textul alb pur și gata, ai „modul nocturn”. Este o abordare greșită care obosește ochii și distruge lizibilitatea.
La un proiect de acum doi ani, o platformă SaaS cu vreo 12k utilizatori activi zilnic, am lăsat designerul să facă de capul lui. A ieșit un contrast uriaș, cu text #FFFFFF pe fundal #000000. După doar o săptămână de la release, suportul era plin de tichete de la oameni care se plângeau de oboseală vizuală. Atunci am înțeles că WCAG AA nu e opțional și că negrul pur e inamicul ecranelor în camere întunecate.
De ce negrul pur și albul pur nu fac casă bună
Standardul WCAG 2.1 AA cere un raport de contrast de minimum 4.5:1 pentru textul normal și 3:1 pentru textul mare. Însă în dark mode, mai mult contrast nu înseamnă neapărat mai bine. Un contrast maxim de 21:1 (alb pur pe negru pur) produce un efect vizual neplăcut numit halation.
Pentru persoanele cu astigmatism (adică aproape 30% din utilizatori), textul alb pe fundal complet negru pare că pulsează, se încețoșează sau are un halou în jur. Marginile literelor devin difuze și cititul devine un chin.
Soluția este simplă: atenuează extremele. Folosește griuri închise cu tentă caldă sau rece pentru fundal și un alb stins sau gri foarte deschis pentru text.
Cum alegi culorile care funcționează
În loc de #000000, folosește ca bază un #121212 sau #1e1e24. Pentru text, în loc de #FFFFFF, mergi pe un #e3e3e3 sau chiar un albastru-gri foarte deschis precum #e0e6ed.
Iată un trade-off sincer: designul nu va mai părea acel „deep black” infinit pe care îl adoră fanii ecranelor OLED, iar unii designeri s-ar putea să strâmbe din nas. Dar din punct de vedere al utilizabilității, griul închis câștigă detașat. În plus, pe ecranele moderne, diferența de consum de baterie între negru pur și gri închis este neglijabilă.
Când vine vorba de culorile de accent (link-uri, butoane), nu poți folosi aceleași nuanțe din light mode. Un albastru regal care arată superb pe fundal alb devine complet ilizibil pe fundal închis. Trebuie să deschizi nuanțele de accent (să le crești luminozitatea) pentru a păstra contrastul optim.
Cum testezi rapid în workflow
Nu te baza doar pe ochii tăi obosiți la ora 2 noaptea. Procesul meu de testare implică trei pași simpli:
- DevTools în browser: În Chrome sau Firefox, dai click dreapta pe text, Inspect, și deschizi color picker-ul din CSS. Îți va arăta direct raportul de contrast și dacă trece testul AA sau AAA.
- Squint test: Îndepărtează-te de monitor și privește ecranul cu ochii aproape închiși. Dacă textul sau elementele importante dispar complet în fundal, contrastul e prea mic.
- Testarea pe dispozitive reale: Nimic nu bate testul făcut pe un telefon ieftin, cu luminozitatea la 20%, într-o cameră întunecată.
Voi cum abordați paleta de culori pentru dark mode în proiectele voastre? Mergeți pe griuri sau rămâneți la negrul pur de dragul marketing-ului OLED?