/* Definirea temelor folosind variabile CSS */
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--primary-color: #0055ff; /* Albastru saturat, ok pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212; /* Gri închis, nu negru pur */
--text-color: #e0e0e0; /* Gri deschis, nu alb pur */
--primary-color: #8ab4f8; /* Albastru desaturat, contrast bun (WCAG AA) */
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.btn-primary {
background-color: var(--primary-color);
color: var(--bg-color); /* Contrast excelent */
}Să fim sinceri: majoritatea implementărilor de dark mode sunt doar un #000000 trântit pe fundal și un text alb pur deasupra. Am făcut și eu prostia asta la un proiect cu vreo 12.000 de useri activi zi de zi. Rezultatul? Am umplut inbox-ul de suport cu plângeri de la oameni pe care îi usturau ochii după 10 minute de citit.
Capcana negrului pur (#000000)
Negrul pur pe ecrane OLED arată spectaculos în reclame, dar e groaznic pentru citit. Creează un efect de halou (sau halation) pentru persoanele cu astigmatism – adică vreo 30% din populație. Când pui text alb pur (#FFFFFF) pe fundal negru pur, contrastul e prea mare, iar lumina se împrăștie vizual peste marginile literelor, făcându-le neclare.
Am învățat asta pe propria piele. Pentru a trece auditul WCAG AA (care cere un contrast de minimum 4.5:1 pentru text normal și 3:1 pentru text mare), trebuie să îmblânzești nuanțele. Eu folosesc acum un gri foarte închis, de exemplu #121212 sau un bleumarin extrem de saturat ca bază. Textul nu trebuie să fie niciodată alb pur, ci un gri deschis sau o nuanță pastelată derivată din culoarea de brand. De exemplu, un #E0E0E0 pe #121212 oferă un raport de contrast excelent, în jur de 11.5:1, fiind în același timp extrem de odihnitor.
Culorile de accent și capcana saturării
Aici e buba unde pică majoritatea designerilor și devilor. Iei paleta de culori de pe light mode (să zicem un albastru de brand #0055FF) și o trântești direct pe dark mode. Pe fundal închis, acele culori saturate par că vibrează și devin imposibil de citit.
Soluția pe care am aplicat-o a fost crearea unei palete alternative de accent pentru dark mode. Am desaturat culorile primare cu vreo 20-30% și le-am crescut luminozitatea. Da, nu mai e exact aceeași culoare din manualul de brand, dar e singura cale de a păstra contrastul de 4.5:1 fără să provoci migrene.
Trade-off-ul e evident: brandul își pierde un pic din identitatea vizuală strictă în favoarea uzabilității. Unele departamente de marketing vor strâmba din nas, dar accesibilitatea câștigă mereu în fața orgoliilor de design.
Cum testezi rapid (și automat)
Nu te baza pe ochii tăi după 8 ore de codat. Ochii se adaptează și te mint.
În Chrome DevTools, ai un tool genial ascuns în tab-ul Elements. Dai click pe o culoare din CSS și îți arată direct linia de contrast WCAG AA și AAA. Pentru testare automată în pipeline, noi am integrat @axe-core/playwright. Ne rulează teste pe fiecare pull request și ne dă fail instant dacă un buton are contrast sub 4.5:1. O altă variantă simplă e extensia Lighthouse, dar ruleaz-o mereu cu emulare de ecran mobil și pe ambele teme.
Voi cum gestionați paletele de culori pentru dark mode? Mergeți pe abordarea cu variabile CSS mapate manual sau folosiți vreun tool de generare automată care respectă standardele WCAG?