:root {
/* Culori pentru Light Mode */
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--text-secondary: #606060;
}
@media (prefers-color-scheme: dark) {
:root {
/* Culori accesibile pentru Dark Mode (WCAG AA compliant) */
--bg-primary: #121212;
--text-primary: #f0f0f0;
--text-secondary: #a0a0a0; /* Contrast ~ 4.8:1 pe fundalul de mai sus */
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s, color 0.3s;
}Am văzut prea multe implementări de dark mode care pur și simplu dor la ochi. Ba e contrastul prea mare și simți că-ți ard retinele, ba e prea mic și trebuie să strângi din ochi ca să citești un text. Hai să vorbim direct despre cum facem un dark mode care chiar respectă standardul WCAG AA, fără să ne batem joc de design.
Greșeala clasică cu negru pur și alb pur
Am pățit-o acum doi ani la un proiect cu peste 50k de utilizatori activi pe lună. Designerul, super entuziasmat de noul trend, a trântit un fundal negru pur (#000000) și text alb pur (#ffffff). Rezultatul? În prima săptămână am primit zeci de tichete de suport de la oameni care se plângeau de oboseală vizuală rapidă.
De ce se întâmplă asta? Din cauza unui fenomen fizic numit halation (irizație). Pentru persoanele cu astigmatism (adică aproape 30% din utilizatorii tăi), textul alb pe fundal negru pur pare că se dilată și devine extrem de greu de urmărit.
Regula de aur e simplă: folosește un gri foarte închis pentru fundal (un #121212 sau #1a1a1a) și un alb murdar sau gri deschis pentru text (de exemplu, #e0e0e0). Astfel, reduci contrastul extrem, dar păstrezi lizibilitatea.
Matematica din spate (WCAG AA și un trade-off sincer)
Ca să fii compliant cu normele WCAG 2.1 AA, ai nevoie de un raport de contrast de minimum 4.5:1 pentru text normal și 3:1 for text mare (peste 18px bold sau 24px normal).
Aici apare un trade-off destul de enervant: dacă respecți matematic standardul WCAG actual, unele elemente de UI secundare (cum ar fi placeholder-ele sau textul de ajutor) trebuie să aibă un contrast atât de mare încât strică ierarhia vizuală. Designerii vor strânge din nas pentru că totul va părea la fel de important.
Totuși, sănătatea ochilor și accesibilitatea bat designul de revistă de fiecare dată. În plus, viitorul algoritm APCA (care va veni în WCAG 3) va rezolva această problemă, evaluând contrastul în funcție de context și mărimea fontului, nu doar printr-o formulă matematică rigidă.
Cum testezi rapid, direct în browser
Nu te apuca să calculezi manual rapoartele de contrast. Ai deja tot ce-ți trebuie în DevTools:
- Inspect element: În Chrome sau Edge, deschide tab-ul de Elements, selectează un text și dă click pe culoarea lui în panoul Styles. Browser-ul îți va arăta direct raportul de contrast și dacă trece de pragurile AA sau AAA.
- CSS Overview: O uneltă genială ascunsă în DevTools care îți face un audit instant al tuturor culorilor din pagină și îți listează elementele care pică testul de contrast.
- Lighthouse: Rulează un test rapid pe categoria "Accessibility". Îți va arăta exact ce noduri din DOM au probleme de contrast în tema curentă.
Pentru un workflow curat, folosește custom properties în CSS. Trecerea la dark mode ar trebui să însemne doar schimbarea unor variabile de culoare, nu rescrierea stilurilor.