/* Exemplu simplu de custom properties cu contrast optimizat */
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--accent: #0056b3; /* Contrast bun pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212; /* Evităm #000 pentru a preveni haloul */
--text-primary: #e0e0e0; /* Gri deschis în loc de alb pur */
--accent: #8ab4f8; /* Albastru desaturat, contrast > 4.5:1 */
}
}Am terminat recent de implementat dark mode-ul pe o platformă de e-learning cu vreo 14.000 de utilizatori activi și mi-am prins urechile în accesibilitate. Credeam că-i simplu: pui un background negru, textul alb și gata, dar realitatea m-a lovit rapid în teste. Dacă vrei să faci un dark mode care nu obosește ochii și respectă standardele WCAG, ai de bibilit mai mult decât crezi.
Capcana negrului pur (#000000)
Mulți designeri juniori (și mulți devi lăsați singuri pe frontend, cum am pățit și eu în trecut) sar direct pe #000000 pentru fundal și #ffffff pentru text. E o greșeală destul de mare.
Contrastul ăsta extrem (21:1) provoacă un efect numit "halation" (halou) pentru persoanele cu astigmatism – adică pentru aproape 30% din utilizatorii tăi. Textul alb pare că sângerează în fundalul negru și devine extrem de obositor de citit pe termen lung. În plus, pe ecranele OLED, scroll-ul pe negru pur produce acel ghosting/smearing enervant.
Soluția pe care am aplicat-o? Am înlocuit negrul pur cu un gri foarte închis, un #121212 sau #18181b. Ochii îți vor mulțumi instantaneu, iar efectul de halou dispare.
Regula de aur WCAG AA și culorile desaturate
Standardul WCAG 2.1 AA cere un raport de contrast de minimum 4.5:1 pentru textul normal și 3:1 pentru textul mare. În dark mode, culorile foarte saturate (cum e un albastru de brand, #0000ff) devin imposibil de citit pe fundal închis. Pur și simplu vibrează vizual și provoacă dureri de cap.
Pentru a rezolva asta, trebuie să desaturezi culorile de accent:
- În loc de culori pure, folosești nuanțe pastelate (scazi saturația la 30-40% și crești luminozitatea).
- Elementele interactive (butoane, link-uri) au nevoie de stări clar definite. Un hover în dark mode nu se comportă la fel ca în light mode.
- Textul secundar nu trebuie să scadă sub raportul de 4.5:1, chiar dacă vrei să-l faci mai șters ca să pară în plan secund.
Cum testezi rapid, fără bătăi de cap
Nu te apuca să calculezi manual rapoartele de contrast. Eu folosesc trei metode simple în workflow-ul de zi cu zi:
- DevTools în Chrome/Firefox: Dai click pe selectorul de culoare din inspector și îți arată direct raportul de contrast și dacă trece testul AA sau AAA.
- Inspectorul de accesibilitate din Firefox: Are o opțiune excelentă care îți scanează toată pagina și îți listează toate elementele care pică testul de contrast.
- Testul de strâns din ochi (squint test): Sună stupid, dar funcționează. Strânge din ochi în fața monitorului. Dacă textul tău dispare complet în fundal, ai o problemă de contrast, indiferent ce zic tool-urile.
Trade-off-ul sincer între design și standarde
Să respecți WCAG AA la sânge în dark mode e uneori frustrant. Unele elemente de branding își pierd din personalitate când le desaturezi ca să treacă testul de contrast. Devine totul un pic mai șters și mai monoton.
Totuși, eu prefer un site un pic mai puțin "rebel", dar pe care îl poate citi oricine la ora 11 noaptea fără să-și mărească dioptriile.
Voi cum abordați tema asta în proiectele voastre? Mergeți pe WCAG strict sau faceți un dark mode mai mult "la ochi" și după cum dă bine pe ecranul vostru?