/* Structura de bază pentru culori flexibile */
:root {
--bg-primary: #ffffff;
--text-primary: #212121;
--accent: #1a73e8; /* Albastru saturat pentru light mode */
}
[data-theme="dark"] {
--bg-primary: #121212; /* Gri închis prietenos cu ochii */
--text-primary: #e0e0e0; /* Alb murdar, reduce oboseala */
--accent: #8ab4f8; /* Variantă desaturată a culorii de brand */
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s, color 0.3s;
}Să faci un dark mode care doar "arată cool" pe monitorul tău calibrat de 1000 de euro e simplu. Să-l faci accesibil pentru toată lumea e însă o artă destul de ignorată. Am pățit-o acum vreo doi ani la un SaaS cu 18.000 de useri activi, când am lansat varianta întunecată și am fost bombardați cu tichete de la oameni care ne spuneau că îi dor ochii după cinci minute de citit pe mobil.
Atunci m-am lovit direct de standardele WCAG și de problemele reale de contrast. În rândurile de mai jos îți las exact ce am învățat din greșeli și cum poți implementa un dark mode care chiar funcționează.
Greșeala numărul unu: Negrul pur (#000000)
Când ne gândim la dark mode, instinctul ne spune să punem fundalul negru complet și textul alb pur (#FFFFFF). Este cea mai mare greșeală de uzabilitate.
Contrastul rezultat este de 21:1. Pe hârtie pare ideal, dar pe un ecran emițător de lumină, textul alb pe fundal negru pur produce un fenomen numit "halation" (halou). Literele par că pulsează sau că se încețoșează, mai ales pentru utilizatorii cu astigmatism (adică aproape 30% din populație).
Trade-off-ul sincer: Negrul pur salvează ceva baterie pe ecranele OLED, dar distruge lizibilitatea la sesiuni lungi de citit.
Soluția? Folosește un gri foarte închis ca bază, cum ar fi #121212 sau #1e1e1e. Îți oferă un contrast mult mai blând, undeva la un raport de 15:1 sau 16:1, care respectă normele și nu obosește ochii.
Regula de aur pentru WCAG AA
Standardul WCAG 2.1 AA îți cere un raport de contrast de minimum 4.5:1 pentru text normal și 3:1 pentru text mare (peste 18px bold sau 24px regular) sau pentru elemente de interfață active (cum ar fi marginile unui input).
Problema apare la culorile de brand. Dacă ai un albastru corporate vibrant pe light mode, nu-l poți trânti direct pe dark mode. Va deveni incredibil de greu de citit și va "vibra" vizual pe fundalul închis.
Soluția este să desaturezi culorile. La proiectul nostru, am luat paleta primară de culori și am redus saturația cu aproximativ 30-40% pentru tema dark. Un albastru intens devine un albastru pastelat, cald, care păstrează identitatea de brand, dar trece testul de contrast cu brio.
Cum testezi fără să pierzi ore întregi
Nu trebuie să calculezi manual ecuații de contrast. Procesul meu de testare e destul de simplu și eficient:
- Chrome DevTools (sau Firefox): Dai click dreapta pe orice text, mergi în tab-ul de Inspect, deschizi picker-ul de culoare și îți va arăta instant raportul de contrast și dacă trece de pragul AA sau AAA.
- Axe DevTools / Lighthouse: Rulez un audit rapid pe paginile principale ca să prind elementele uitate (cum ar fi textul de placeholder din input-uri, pe care toată lumea îl uită pe un gri prea șters).
- Testul de cameră întunecată: Ia-ți telefonul, mergi într-o cameră complet întunecată și folosește-ți aplicația timp de 5 minute. Dacă simți nevoia să mijești ochii sau să reduci luminozitatea ecranului la minimum ca să nu te doară capul, înseamnă că ai dat greș la contrast.
La final, design-ul accesibil nu înseamnă limitare, ci doar atenție la detalii. Voi cum gestionați temele? Mergeți pe varianta simplă cu media query-ul din sistem sau oferiți utilizatorului un switch dedicat salvat în localStorage?