:root {
/* Light theme default */
--bg-primary: #ffffff;
--text-primary: #212121;
--color-accent: #0056b3; /* Contrast excelent pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212; /* Evităm pure black */
--text-primary: #e0e0e0; /* Evităm pure white */
--color-accent: #66b2ff; /* Accent mai deschis pentru contrast optim */
}
}Am implementat dark mode pe un proiect cu vreo 12.000 de useri activi și am crezut că e simplu: pui niște variabile de CSS, schimbi fundalul în negru, textul în alb și gata. Mare greșeală. Ne-am trezit cu zeci de tichete de la oameni care se plângeau că îi dor ochii sau că nu pot citi textul pe ecrane mai slabe sau în bătaia soarelui.
Atunci am înțeles că un dark mode reușit nu înseamnă doar să dai „invert” la culori. Înseamnă accesibilitate reală, contrast calculat și atenție la detalii care țin de biologia ochiului uman.
Greșeala cu „Pure Black” (#000000)
Nu folosiți negru pur pentru fundal și alb pur (#FFFFFF) pentru text. Contrastul ăsta este extrem de dur (21:1). El creează un efect de „halou” (halation) pentru persoanele cu astigmatism, adică pentru aproximativ 30% din utilizatorii tăi. Textul pare că tremură sau că are o aură ciudată pe fundalul complet negru.
La proiectul menționat, am rezolvat problema trecând de la #000 la un gri foarte închis, un #121212 plăcut. Pentru text, în loc de #fff, am folosit un alb stins, gen #e0e0e0. Ochii utilizatorilor îți vor mulțumi după două ore de scroll la miezul nopții.
Regula WCAG AA și culorile semantice
Pentru a respecta standardul WCAG AA, textul normal trebuie să aibă un raport de contrast de cel puțin 4.5:1 față de fundal. Pentru text mare (peste 18px bold sau 24px normal), pragul coboară la 3:1.
Aici apare cel mai mare trade-off: trebuie să dublezi paleta de culori de branding. Nu poți folosi același albastru pe ambele teme. Un albastru de brand care arată superb pe fundal alb devine complet ilizibil și obositor pe fundal închis. Va trebui să definești nuanțe mai deschise (pastels) pentru tema dark și nuanțe mai saturate pentru tema light.
Cum structurăm CSS-ul fără să o luăm razna
Nu defini culorile în CSS după numele lor fizic (gen --blue-500). Folosește variabile semantice. Astfel, codul tău devine ușor de întreținut și nu te vei trezi că o variabilă numită --white are valoarea #121212 pe tema dark.
Cum testezi rapid și eficient?
Sfatul meu: nu testa „la ochi”. Ochii noștri se adaptează rapid și te pot păcăli.
- DevTools din Chrome/Firefox: Dai click dreapta pe un element de text, te uiți în tab-ul de inspect (la color picker) și browserul îți va arăta direct dacă respecți contrastul WCAG AA sau AAA.
- Lighthouse: Un audit rapid îți va lista toate elementele care pică testul de contrast.
- APCA (Advanced Perceptual Contrast Algorithm): Este noul mod de calcul care va fi introdus în WCAG 3. Ține cont de context, de mărimea fontului și de modul real în care ochiul uman percepe lumina. Merită să începi să arunci o privire pe el.
Voi cum gestionați temele de culori în proiectele mari? Mergeți pe librării de componente care rezolvă asta out-of-the-box sau preferați să vă scrieți propriile token-uri de design?