:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--primary-color: #1a73e8; /* Albastru saturat, excelent pe fundal alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212; /* Gri închis, evită negrul pur pentru a reduce haloul */
--text-color: #e0e0e0; /* Alb stins, contrast de ~11:1, foarte lizibil */
--primary-color: #8ab4f8; /* Varianta desaturată, trece testul de contrast 4.5:1 */
}
}Am crezut mult timp că dark mode e doar o preferință estetică simplu de implementat, până când am picat un audit WCAG pe bune la o aplicație cu 15.000 de utilizatori activi. Atunci am înțeles că un ecran negru cu text alb nu înseamnă accesibilitate, ci adesea o rețetă excelentă pentru oboseală oculară. În postarea asta îți arăt cum să faci un dark mode care chiar respectă standardul WCAG AA fără să distrugi design-ul.
Capcana negrului pur (#000000)
Prima greșeală pe care am făcut-o (și o văd în continuare pe multe site-uri mari) a fost să folosesc negru pur pentru fundal și alb pur (#FFFFFF) pentru text. Sună logic, nu? Contrast maxim, deci accesibilitate maximă.
Ei bine, contrastul ăla este mult prea mare și obositor. Se numește efect de halou (halation) și îi afectează destul de grav pe utilizatorii cu astigmatism — adică pe aproximativ 30% din oamenii care îți vizitează site-ul. Textul alb pe fundal negru pur pare că "sângerează" în exterior și devine neclar.
Am rezolvat problema asta trecând la un gri foarte închis ca bază (un #121212 sau #181818). Pentru text, în loc de alb pur, am folosit un alb stins, cum ar fi #E0E0E0, sau o opacitate redusă la 87% pe textul alb. Ochii utilizatorilor îți vor mulțumi, mai ales dacă citesc pe timp de noapte.
Regula de aur WCAG AA și culorile saturate
Pentru a trece un audit WCAG 2.1 AA, ai nevoie de un raport de contrast de minimum 4.5:1 pentru text normal și 3:1 pentru text mare (peste 18px bold sau 24px normal).
Aici intervine un trade-off sincer de design: culorile tale de brand, cele care arată super strident pe fundal alb, vor arăta groaznic pe dark mode. Un albastru electric sau un roșu aprins pe fundal închis vor "vibra" vizual și vor pica testul de contrast instant.
Soluția este să desaturezi culorile pentru tema întunecată. În loc să folosești brand-primary-ul tău saturat, va trebui să folosești o nuanță mai deschisă, mai pastelată (tonuri de 200 sau 300 în paletele stil Tailwind). Da, brandul va arăta puțin diferit în dark mode, dar este singura cale prin care poți păstra lizibilitatea.
Cum testezi rapid fără să înnebunești?
Nu trebuie să calculezi manual formule matematice de contrast la fiecare pas. Eu folosesc un workflow destul de simplu în trei pași:
- Chrome DevTools: Inspectezi elementul de text, dai click pe culoarea din CSS panel și DevTools îți arată direct raportul de contrast curent și dacă trece sau nu standardul AA/AAA.
- Axe DevTools: O extensie excelentă de browser pe care o rulez periodic pentru a prinde automat problemele evidente de contrast pe toată pagina.
- Stark (Figma): Dacă lucrezi strâns cu designerii, roagă-i să folosească plugin-ul ăsta în Figma înainte să îți predea ecranele. E mult mai ieftin să repari contrastul în design decât după ce ai scris codul.
Tu cum abordezi dark mode-ul în proiectele tale? Mergi pe un toggle clasic light/dark sau te bazezi doar pe preferințele sistemului de operare?