:root {
/* Light mode defaults */
--bg-color: hsl(0, 0%, 100%);
--text-main: hsl(210, 20%, 15%);
--primary-color: hsl(220, 90%, 56%); /* Saturated blue */
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark mode accessible adjustments */
--bg-color: hsl(210, 11%, 15%); /* Warm dark grey, not pure black */
--text-main: hsl(210, 15%, 85%); /* Soft off-white */
--primary-color: hsl(220, 90%, 75%); /* Desaturated & lighter for high contrast */
}
}Am văzut prea multe implementări de dark mode care îți ard retina sau, dimpotrivă, te fac să strângi din ochi ca să deslușești un text. Nu e suficient să pui background: #000 și color: #fff și să zici că ai rezolvat problema. De fapt, dacă faci asta, tocmai ai creat o problemă de accesibilitate pentru o grămadă de utilizatori.
La un proiect trecut, o aplicație SaaS cu vreo 12k utilizatori activi zilnic, am lansat dark mode-ul rapid, crezând că e doar o chestie de „inversat culorile”. În trei zile am fost asaltați de tichete de suport. Oamenii se plângeau de oboseală vizuală după doar 15 minute de utilizare. Atunci am săpat serios în standardele WCAG AA și am înțeles unde greșeam: contrastul prea mare e la fel de nociv ca cel prea mic.
De ce pure black (#000000) e o idee proastă
Când pui text alb pur pe fundal negru pur, apare un efect numit halation (halou). Pentru persoanele cu astigmatism (aproape 30% din populație), literele par că pulsează sau se blurează pe ecran din cauza contrastului extrem de agresiv.
Soluția? Folosește un gri foarte închis ca bază, cum ar fi #121212 sau #181818. Material Design recomandă chiar #121212. Pentru text, mergi pe un alb murdar sau gri deschis (#E0E0E0 sau #EEEEEE). Astfel scazi contrastul brut, dar rămâi lejer peste limita WCAG AA de 4.5:1 pentru text normal.
Culorile de accent: Desaturează sau mori
Brandul tău are probabil un albastru sau un violet electric superb în light mode. Dacă îl trântești direct pe fundalul de dark mode, o să pară că vibrează pe ecran și va pica testul de contrast instant.
Regula de aur pentru accesibilitate în dark mode este să folosești nuanțe desaturate (pastelate). De exemplu, dacă ai un violet #6200EE cu contrast excelent pe fundal alb, pe negru va trebui să folosești o nuanță mult mai deschisă, cum ar fi #BB86FC.
Trade-off-ul sincer? Identitatea vizuală a brandului va arăta diferit în dark mode. Culorile vor părea mai șterse pentru un designer purist, dar este singura cale de a menține lizibilitatea și de a nu obosi ochii utilizatorului.
Cum testezi rapid, fără să ghicești
Nu te baza pe ochii tăi când lucrezi în editor. Majoritatea dintre noi avem monitoare scumpe, bine calibrate. Clienții tăi însă vor citi textul pe un ecran ieftin de telefon, în plin soare sau într-o cameră complet întunecată.
Eu folosesc trei instrumente de bază:
- DevTools în Chrome/Firefox: Inspectezi elementul de text și îți zice direct raportul de contrast (ex. 4.5:1 sau mai mult).
- Contrast-Ratio.com: Un tool online simplu unde pui cele două culori hexazecimale.
- APCA (Advanced Perceptual Contrast Algorithm): Este noul algoritm care va înlocui vechiul WCAG 2 în viitorul WCAG 3. Ține cont de modul în care ochiul uman percepe contrastul în funcție de grosimea fontului și luminozitatea culorii de fundal.
Iată cum structurez eu de obicei variabilele CSS ca să pot ajusta contrastul ușor, fără să rescriu tot codul când designerul vrea o nuanță mai caldă în dark mode.