:root {
/* Theme Light Tokens */
--bg-base: #ffffff;
--bg-surface: #f1f5f9;
--text-main: #0f172a;
--text-muted: #475569;
--primary: #2563eb; /* 4.56:1 pe bg-base */
}
@media (prefers-color-scheme: dark) {
:root {
/* Theme Dark Tokens - WCAG AA Compliant */
--bg-base: #0f172a; /* Slate 900 în loc de pure #000 */
--bg-surface: #1e293b; /* Slate 800 pentru elevation */
--text-main: #f8fafc; /* Slate 50 - contrast 15.8:1 */
--text-muted: #94a3b8; /* Slate 400 - contrast 5.1:1 */
--primary: #60a5fa; /* Blue 400 desaturat - contrast 7.2:1 */
}
}
body {
background-color: var(--bg-base);
color: var(--text-main);
color-scheme: dark light; /* Spune browserului să schimbe și scrollbar-ul */
}Acum un an am lansat în grabă un dark mode pe un SaaS de analiză financiară cu 14k utilizatori activi lunar. Am schimbat repede câteva variabile de CSS, am inversat alb cu negru și am zis că e gata. În mai puțin de 48 de ore am primit peste 30 de tichete în suport: unora le lăcrimau ochii, alții nu mai puteau citi textele secundare, iar pe monitoarele mai ieftine input-urile pur și simplu dispăruseră.
Atunci m-am lovit de o realitate simplă: dark mode-ul nu înseamnă doar să pui fundalul negru. Înseamnă lizibilitate, ierarhie vizuală și respectat standarde de accesibilitate.
De ce #000000 și #FFFFFF sunt o combinație proastă
Prima greșeală pe care o face aproape toată lumea la început este folosirea negrului pur (#000000) pentru fundal și a albului curat (#FFFFFF) pentru text. Contrastul rezultat este extrem (21:1), iar pe ecranele OLED creează un efect urât de "bleeding" sau halație, mai ales pentru utilizatorii cu astigmatism.
O bază mult mai prietenoasă cu ochii este un gri foarte închis sau un albastru-închis saturat minimal (de exemplu #121212, #18181b sau #0f172a). Pentru textul principal, un alb stins precum #f8fafc sau #e2e8f0 reduce oboseala vizuală fără să sacrifice claritatea.
Regula de aur WCAG AA și culorile de brand
Standardul WCAG 2.1 AA cere un raport minim de contrast de 4.5:1 pentru textul normal și 3:1 pentru textul mare (peste 18pt sau 14pt bold) și elementele grafice de UI (cum ar fi bordurile de input-uri sau iconițele).
Problemă clasică: ai un albastru de brand pe light mode care arată excelent. Dacă îl trântești exact așa pe dark mode, ai două șanse: fie este prea întunecat și nu trece de contrastul de 4.5:1, fie e atât de saturat încât pare că vibrează pe ecran. Soluția este să desaturezi culorile primare cu 20-30% pe tema întunecată și să le crești ușor luminozitatea (lightness).
Adâncimea se construiește prin luminozitate, nu prin umbre
Pe o interfață deschisă folosești box-shadow ca să ridici o modală sau un card peste fundal. Pe un fundal întunecat, umbrele devin aproape invizibile.
Regula celor de la Material Design funcționează de minune: cu cât un element este mai sus în ierarhie (este mai aproape de utilizator), cu atât fundalul lui devine mai deschis. Suprafața de bază are #0f172a, un card de pe pagină are #1e293b, iar o modală care apare peste el primește #334155.
Cum testezi corect în workflow-ul de zi cu zi
Nu te baza pe monitorul tău pro calibrat la 500 nits. Iată ce folosesc eu în mod curent:
- DevTools Accessibility Tab în Chrome sau Firefox: Dai inspect pe orice text și îți arată direct raportul de contrast și dacă trece WCAG AA sau AAA.
- Colour Contrast Analyser (CCA): Un tool excelent de desktop când vrei să testezi rapid stări de hover sau culori din Figma.
- Testul de stres pe monitoare slabe: Treci aplicația pe un ecran ieftin cu panou TN și luminozitate redusă. Dacă acolo nu deosebești un input de fundal, nici utilizatorul tău nu o va face.
Trade-off-ul este evident: un sistem dublu de variabile duce la o complexitate crescută în CSS și la discuții lungi cu designerii care vor ca brandul să arate identic peste tot. Dar o interfață lizibilă bate întotdeauna un brand book rigid.
Voi cum gestionați token-urile de culoare pe proiecte? Scrieți totul manual în CSS Variables sau aveți un pipeline cu Style Dictionary?