:root {
--bg-base: #121212;
--bg-surface-1: #1e1e24; /* carduri de bază */
--bg-surface-2: #2b2b36; /* dropdowns, modale */
/* Contrast ~13.5:1 față de --bg-base (WCAG AA pass) */
--text-primary: #ededed;
/* Contrast ~5.2:1 față de --bg-surface-1 (WCAG AA pass) */
--text-secondary: #a1a1aa;
/* Borduri vizibile: minim 3:1 pentru elemente interactive */
--border-interactive: #4b4b58;
}
.card {
background-color: var(--bg-surface-1);
color: var(--text-primary);
border: 1px solid var(--border-interactive);
}Am refăcut tema întunecată la o platformă B2B cu vreo 14k utilizatori activi zilnic, crezând optimist că termin într-o după-amiază. Mi-am luat un reality check rapid când suportul a fost asaltat de tichete în care oamenii se plângeau că le lăcrimează ochii după douăzeci de minute. Dacă vrei un dark mode accesibil, nu e suficient să trântești #000000 pe fundal și #ffffff pe text.
Negrul pur e cel mai mare inamic
Prima greșeală clasică e contrastul maxim. Alb pur (#FFFFFF) pe negru absolut (#000000) dă un contrast ratio de 21:1. În teorie sună perfect pentru accesibilitate, dar în practică produce efectul de halou (halation), extrem de deranjant pentru cei cu astigmatism. Literele par că vibrează sau se estompează pe margini.
Am rezolvat problema trecând fundalul de bază la un gri închis neutru, un #121212 sau #18181b. Textul principal l-am calmat la un #e4e4e7 (off-white). Astfel păstrezi un contrast confortabil de aproximativ 13:1 sau 14:1, mult peste cerința minimă WCAG AA, fără să obosești utilizatorul care lucrează 8 ore în aplicație.
Un alt detaliu: în light mode folosești umbre (box-shadow) pentru a arăta elevația unui card sau modal. În dark mode, umbrele negre sunt invizibile. Aici elevația se face invers: cu cât un element e mai aproape de utilizator (strat superior), cu atât suprafața lui trebuie să fie o nuanță de gri ceva mai deschisă.
WCAG AA și capcana textului secundar
Pentru certificarea WCAG AA ai nevoie de un raport de contrast de minim 4.5:1 pentru text normal și 3:1 pentru text mare sau elemente de interfață (butoane, borduri de input).
Aici pică 90% din temele întunecate: textul secundar. Când designerul vrea un label mai discret și pune un gri precum #71717a peste un card cu fundal #27272a, contrastul scade sub 3.5:1. E picat din start. Dacă scazi și font-size-ul la 12px, e aproape ilizibil pentru cineva care nu are o vedere perfectă.
Trade-off-ul sincer este că dark mode-ul sacrifică adesea subtilitatea vizuală. Nu poți avea zece nuanțe de gri finuțe ca în light mode. Trebuie să lucrezi cu trepte de contrast mult mai strânse și să accepți că unele texte vor fi mai vizibile decât și-ar dori un designer axat doar pe minimalism.
Cum testezi fără să pierzi ore întregi
Nu te baza pe ecranul tău calibrat la 500 de niți. Ce arată superb pe un monitor IPS de 4k s-ar putea să fie complet șters pe un laptop ieftin de corporație.
- DevTools la îndemână: În Chrome sau Firefox, deschizi inspectorul pe un element de text, apeși pe color picker și vezi instant dacă bifează WCAG AA sau AAA. Dacă are semnul exclamării, ridici luminozitatea.
- Axe DevTools sau Lighthouse: Faci un audit automat pe paginile principale. Îți găsește instant bordurile de input care s-au pierdut în fundal.
- Testul de lumină ambientală: Ia laptopul și testează aplicația lângă o fereastră luminoasă. Dacă pe dark mode nu mai distingi câmpurile dintr-un formular, contrastul tău e prea timid.
Voi cum gestionați paletele întunecate: lăsați designerii să aleagă la ochi din Figma sau aveți constrângeri automate de contrast în design tokens?