/* Exemplu tokens CSS accesibile pentru Light / Dark mode */
:root {
--bg-app: #ffffff;
--bg-surface: #f4f4f5;
--text-main: #09090b; /* Contrast ~19:1 */
--text-muted: #71717a; /* Contrast ~4.6:1 (Pasă WCAG AA) */
--primary: #2563eb;
}
[data-theme="dark"] {
--bg-app: #121212; /* Nu #000000! Evită efectul de halou */
--bg-surface: #1e1e1e; /* Strat superior mai luminos */
--text-main: #f4f4f5; /* Contrast ~15.8:1 (Foarte lizibil) */
--text-muted: #a1a1aa; /* Contrast ~6.2:1 pe #121212 */
--primary: #93c5fd; /* Variantă desaturată/luminoasă de albastru */
}Anul trecut am lucrat la redesign-ul unui dashboard SaaS folosit zilnic de vreo 14.000 de utilizatori. Fiindcă dark mode e aproape o cerință obligatorie în ziua de azi, am aruncat rapid un fundal #000000, niște text alb curat #FFFFFF și un albastru electric pe butoane. Arăta super geeky și modern pe monitorul meu OLED. În 48 de ore de la lansare, suportul a fost invadat de mesaje: "mă doare capul când citesc tichetele", "textul pare că vibrează".
M-am lovit direct de problema numită halation effect (sau halou vizual), o chestie pe care mulți designeri și developeri o ignoră când implementează tema întunecată.
De ce negru pur (#000000) e o capcană
Standardul WCAG AA cere un raport minim de contrast de 4.5:1 pentru text normal și 3:1 pentru text mare sau elemente de interfață (butoane, input-uri). Când pui #FFFFFF pe #000000, obții un raport extrem de masiv, de 21:1.
Pentru ochiul uman, o diferență atât de brutală de luminozitate provoacă oboseală rapidă, mai ales pentru utilizatorii cu astigmatism (adică vreo 30% din populație). Ochelarii sau lentila ochiului împrăștie lumina albă pe fundalul complet întunecat, creând acea senzație de text încețoșat sau care vibrează.
Soluția pe care am aplicat-o și pe care o folosesc acum pe toate proiectele este un fundal gri foarte închis, cum ar fi #121212 sau #18181b (Zinc 900 din Tailwind). Raportul scade la un mult mai prietenos 15:1 - 16:1, păstrând în continuare o lizibilitate excelentă și respectând WCAG AA.
Stratificarea și culorile de accent
În light mode, delimităm cardurile și secțiunile prin umbre (box-shadow). În dark mode, umbrele sunt aproape invizibile. Soluția este să folosești nuanțe treptate de gri mai deschis pentru a crea adâncime:
- Fundal pagină:
#121212(nivel 0) - Carduri / Surface:
#1E1E1E(nivel 1 — opacitate mică de alb peste fundal) - Modale / Meniuri:
#2C2C2C(nivel 2)
Un alt trade-off sincer: culorile tale de brand din light mode vor arăta prost în dark mode. Dacă albastrul tău de brand e un #1D4ED8 saturat pe fundal alb, pe un fundal închis va fi greu de citit. Regula mea e simplă: desaturează culorile de accent cu 20-30% pentru dark mode. Folosește variante mai deschise la culoare (de exemplu, treci de la o nuanță de 600 în light mode la un 200/300 în dark mode) pentru a menține contrastul minim de 4.5:1.
Cum testezi rapid fără să ghicești
Nu trebuie să calculezi matematic rapoartele de contrast manual. Workflow-ul meu actual de testare durează sub 2 minute per pagină:
- Chrome DevTools Inspect: Când dai inspect pe un element de text și apeși pe color picker, Chrome îți arată direct raportul WCAG și dacă trece nivelul AA sau AAA cu o bifă verde.
- Emulate Vision Deficiencies: În DevTools (Ctrl+Shift+P -> Emulate vision deficiency), testez interfața pentru protanopie și deuteranopie. În dark mode, dacă te bazezi doar pe roșu/verde pentru erori fără icons sau text clar, utilizatorii cu daltonism sunt pierduți.
- Axe DevTools Extension: Rulez un scan automat pe pagină direct în browser. Prinde instant textul cu contrast sub 4.5:1 pe care l-am ratat.
E adevărat că un ecran OLED economisește puțin mai multă baterie pe negru absolut, dar trade-off-ul la capitolul uzabilitate și ergonomie vizuală pur și simplu nu merită.
Voi ce fundaluri folosiți de obicei pentru dark mode în proiectele voastre? Mergeți pe griuri calde/reci sau încă aveți clienți care insistă pe negru absolut?