/* Exemplu simplu de adaptare a culorilor de brand */
:root {
--bg-primary: #ffffff;
--text-primary: #212121;
--brand-color: #6200ee; /* Violet saturat, excelent pe alb */
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212; /* Gri închis, evită #000000 */
--text-primary: #e0e0e0; /* Alb murdar, reduce efectul de halou */
--brand-color: #bb86fc; /* Violet desaturat, trece WCAG AA pe fundal închis */
}
}Am stricat primul meu dark mode acum vreo 5 ani, când am trecut totul pe #000000 ca fundal și #FFFFFF pentru text. Arăta groaznic și obosea ochii după doar două minute de citit. Recent, la un proiect SaaS cu vreo 15.000 de utilizatori activi, a trebuit să refacem tot sistemul de culori ca să respectăm standardul WCAG AA, fără să pierdem complet identitatea vizuală a brandului. Am tras câteva concluzii dure atunci.
Nu folosi negru pur (#000000)
Prima tentație e să pui negru absolut pe fundal pentru că „salvează baterie pe ecranele OLED”. Da, tehnic e adevărat, dar trade-off-ul e masiv pe partea de uzabilitate.
Albul pur pe negru pur produce un efect de „halou” (halation). Textul pare că vibrează sau că se împrăștie pe ecran, mai ales pentru utilizatorii cu astigmatism – adică vreo 30% din audiența ta, dacă ne luăm după statistici.
La proiectul menționat, am decis să mergem pe un gri foarte închis, #121212 pentru fundalul principal, și #1E1E1E pentru carduri și elemente de interfață care au nevoie de elevație. Acest contrast mai fin creează profunzime și este infinit mai blând cu ochii la o utilizare prelungită.
Regula de aur: Desaturează culorile de brand
Aici se încurcă majoritatea developerilor și chiar unii designeri. Iei albastrul sau violetul ăla vibrant de brand din light mode, îl trântești pe fundalul închis și te miri de ce îți lăcrimează ochii.
Culorile foarte saturate pe fundaluri întunecate par că „sar” în relief într-un mod neplăcut și ratează complet testul de contrast WCAG AA (care cere un raport de minimum 4.5:1 pentru text normal și 3:1 pentru UI/text mare).
Soluția e simplă: trebuie să desaturezi culorile pentru dark mode. Practic, folosești o nuanță mai deschisă și mai pastelată a aceleiași culori. De exemplu, în loc de violetul saturat de brand, folosești o variantă mai „ștearsă”, care în contextul întunecat va părea la fel de intensă, dar va fi mult mai lizibilă și va trece testul de contrast.
Cum testezi fără să-ți prinzi urechile
Nu trebuie să calculezi manual rapoartele matematice de contrast. Chrome și Firefox au deja unelte excelente integrate direct în DevTools:
- Inspectorul de elemente: Când dai click pe un element text, inspectorul îți arată în tooltip raportul de contrast și dacă trece sau nu de standardul AA sau AAA.
- CSS Overview: O opțiune excelentă din Chrome care îți scanează toată pagina și îți arată o listă cu toate elementele care au probleme de contrast.
- Testul din lumea reală: Pune aplicația pe un telefon, mergi într-o cameră întunecată și dă luminozitatea ecranului la 30%. Dacă te încrunți sau strângi din ochi ca să citești un placeholder sau un buton secundar, contrastul e prost. Nu te baza doar pe ce zice algoritmul Lighthouse.
La final de zi, accesibilitatea nu înseamnă doar să bifezi o căsuță pentru un audit. Înseamnă că utilizatorul tău nu va închide tab-ul după 10 minute pentru că îl dor ochii.