:root {
--bg-primary: #ffffff;
--text-primary: #1e293b;
--brand-color: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
/* Evită #000000 curat; #0f172a sau #121212 reduce halația visuală */
--bg-primary: #0f172a;
--text-primary: #e2e8f0;
/* Culoarea de accent trebuie să fie mai luminoasă/desaturată */
--brand-color: #60a5fa;
}
}Acum vreun an am adăugat dark mode pe o platformă B2B cu aproximativ 14.000 de utilizatori activi zilnic. Eram entuziasmat, așa că am trântit un #000000 pe fundal, #ffffff pe text, câteva nuanțe de albastru neon pentru butoane și i-am dat deploy vineri la prânz. Luni dimineață aveam deja tichete în Jira: „Mă doare capul când citesc documentația” sau „Nu văd deloc starea filtrelor”.
Atunci am realizat că dark mode nu înseamnă doar să inversezi culorile din Figma. Dacă vrei o aplicație lizibilă care trece de standardul WCAG 2.1 AA, trebuie să înțelegi cum funcționează percepția vizuală pe ecrane.
De ce #000000 pur cu text #FFFFFF e o capcană
Contrastul dintre alb pur și negru pur este de 21:1. Sună bine teoretic pentru că depășește pragul minim WCAG AA de 4.5:1 pentru text normal, dar în practică produce un efect neplăcut de halva (halation). Utilizatorii cu astigmatism — adică aproape 30% din populație — vor vedea textul alb cum „sângerează” pe fundalul negru, creând o senzație de ceață vizuală.
Soluția mea a fost să trec la un fundal închis la culoare, dar nu negru absolut. O nuanță de slate închis, cum ar fi #0f172a sau clasicul #121212 propus de Material Design, funcționează infinit mai bine. Textul principal l-am schimbat din alb pur într-un gri deschis, cum e #e2e8f0. Raportul de contrast a scăzut la aproximativ 12:1 — perfect vizibil și mult mai odihnitor la sesiuni de lucru de 8 ore.
Desaturarea culorilor de accent
Altă greșeală gravă pe care am făcut-o a fost păstrarea aceleiași culori de branding. Albastrul nostru principal (#1d4ed8) avea un contrast excelent pe fundal alb (peste 7:1). Când l-am pus pe fundal închis, raportul de contrast a scăzut sub 2.8:1. A devenind complet neconform WCAG AA și greu de citit.
Ca regulă generală, culorile primare din dark mode trebuie să fie desaturate și mai luminoase decât cele din light mode:
- În light mode folosești variante mai închise (de exemplu, din gama 600-800 în Tailwind).
- În dark mode folosești variante mai deschise (gama 300-400).
Trade-off-ul e evident: brandul tău nu va arăta 100% identic în ambele teme. Dacă echipa de marketing insistă pe o culoare fixă care e prea închisă pe dark mode, soluția este să o folosești doar pe suprafețe mici decorative și să aplici o variantă desaturată pentru text și acțiuni interactive.
Cum testezi rapid fără scule complicate
Nu ai nevoie de audituri scumpe de accesibilitate ca să prinzi 90% din probleme. Iată workflow-ul pe care îl folosesc zilnic:
- Chrome DevTools Inspector: Faci click pe un text, dai inspect și te uiți la caseta de color picker. Îți arată direct raportul de contrast și un bifat verde dacă trece WCAG AA (minim 4.5:1) sau AAA (7:1).
- Emulate Vision Deficiencies: În panelul de Rendering din Chrome DevTools, emulează protanopia sau achromatopsia. Dacă interfața ta devine greu de navigat în tonuri de gri, înseamnă că te bazezi prea mult pe culoare și prea puțin pe contrast sau formă.
- Testul luminii ambientale: Oprește lumina în cameră și redu luminozitatea monitorului la 50%. Dacă simți nevoia să schimbi tema înapoi pe light pentru că te dor ochii, culorile tale sunt prea agresive.
Voi cum abordați sistemul de design pentru dark mode? Folosiți CSS custom properties dinamice sau aveți câte un stylesheet separat?