Dark mode pe site: cum îl faci corect, nu doar pentru că e la modă

Modul dark a trecut de la a fi un moft la a fi o așteptare. Mulți utilizatori își țin telefonul și laptopul pe temă întunecată tot timpul și se așteaptă ca site-urile să respecte alegerea asta. Problema e că un mod dark făcut în grabă, prin simpla inversare a culorilor, arată și se citește prost. În articolul ăsta îți arătăm cum construim un mod întunecat care chiar odihnește ochiul, nu doar bifează o modă.

De ce nu inversezi pur și simplu culorile

Greșeala numărul unu e să iei un site alb cu text negru și să faci fundalul negru cu text alb. Rezultatul e un contrast atât de dur încât textul pare că vibrează. Ochiul obosește repede, mai ales seara, exact momentul în care oamenii folosesc modul dark cel mai des.

Un mod dark bun nu folosește negru pur pentru fundal și nici alb pur pentru text. Folosim un gri foarte închis pentru fundal, ceva apropiat de un albastru-gri adânc, și un gri deschis pentru text, nu alb strident. Diferența pare mică, dar se simte imediat la citit.

Negru pur pe alb pur obosește. Un mod dark corect lucrează cu nuanțe, nu cu extreme.

Contrastul rămâne rege

Chiar dacă evităm extremele, textul trebuie să rămână ușor de citit. Aici ne uităm la raportul de contrast dintre text și fundal, așa cum îl definește standardul WCAG. Pentru text normal, țintim un raport de cel puțin 4.5 la 1. Verificăm asta cu instrumente simple, cum e panoul de accesibilitate din Figma sau raportul de contrast din Lighthouse, direct în browser.

Ce verificăm concret

• Textul principal, să fie clar citibil pe fundalul închis
• Textul secundar, cel gri, să nu coboare sub pragul de contrast
• Butoanele și linkurile, să iasă în evidență fără să orbească
• Culorile de accent, care în dark mode trebuie adesea făcute puțin mai deschise

Un detaliu ușor de ratat: culorile brand-ului care merg perfect pe fundal alb pot deveni greu de citit pe fundal închis. Un albastru închis frumos pe alb dispare pe negru. De aceea în dark mode ajustăm nuanțele de accent, nu le păstrăm identice.

Cum lași utilizatorul să aleagă

Cel mai bun mod dark e cel pe care utilizatorul îl controlează. Facem asta în două straturi. Primul: respectăm setarea sistemului prin regula CSS numită prefers-color-scheme, așa că site-ul apare din start pe tema pe care omul o folosește deja pe dispozitiv. Al doilea: adăugăm un buton clar de comutare, ca vizitatorul să poată trece manual pe luminos sau întunecat dacă vrea altfel.

Alegerea făcută manual o ținem minte, ca la următoarea vizită site-ul să apară așa cum a lăsat-o. Nimic nu enervează mai tare decât un site care revine mereu pe tema greșită.

Detaliile care fac diferența

Un mod dark reușit e plin de detalii mici pe care ochiul le simte, chiar dacă nu le observă conștient.

Umbre și adâncime

Pe fundal alb, adâncimea se face cu umbre. Pe fundal închis, umbrele aproape că dispar, așa că folosim în schimb straturi de gri: un element mai apropiat de utilizator primește un gri puțin mai deschis. Așa se creează senzația de relief fără umbre vizibile.

Imaginile și pozele

O fotografie luminoasă pe un fundal întunecat poate țipa. Uneori le mai temperăm strălucirea în modul dark, iar logo-urile și pictogramele le pregătim în două variante, ca să arate bine pe ambele teme. Un logo negru dispare pe fundal negru, deci pentru dark mode îi facem o variantă deschisă.

Greșeli frecvente pe care le evităm

• Un singur gri peste tot: fără variații de nuanță, pagina devine plată și fără adâncime
• Accente prea saturate: culorile aprinse pe negru vibrează și obosesc
• Text gri prea șters: în dorința de a fi blând, unii fac textul secundar ilizibil
• Comutare fără memorie: butonul care nu ține minte alegerea utilizatorului

Merită efortul dublu?

Da, dar cu o condiție: să îl construiești din start, nu să îl adaugi la final. Un site gândit din prima pe două teme cere puțin efort în plus, pentru că lucrăm cu variabile de culoare de la început. Un site care primește dark mode după ce a fost deja construit pe o singură temă cere adesea rescris mult. De aceea, când știm că un client vrea mod întunecat, îl planificăm încă din faza de design.

Nu doar estetică: baterie și confort

Modul dark are și beneficii practice, dincolo de aspect. Pe telefoanele cu ecran de tip OLED, pixelii negri sunt de fapt stinși, ceea ce înseamnă un consum mai mic de baterie când site-ul folosește un fundal întunecat. Nu e o diferență uriașă, dar pentru cineva care petrece mult timp pe telefon, contează.

Mai important e confortul ochilor. Seara, într-o cameră slab luminată, un ecran alb strălucitor obosește și chiar poate deranja somnul. Un site care respectă tema întunecată aleasă de utilizator îi dă o experiență mai blândă exact în momentele în care are cea mai mare nevoie de ea. De aceea nu tratăm modul dark ca pe un moft vizual, ci ca pe un gest de respect față de felul în care oamenii își folosesc dispozitivele. Cineva care citește seara în pat merită un site care nu îl orbește.

Concluzie

Un mod dark bun nu e o inversare de culori, e o temă gândită separat, cu nuanțe blânde, contrast respectat și control lăsat utilizatorului. Făcut corect, arată profesionist și odihnește ochiul. Făcut în grabă, obosește mai tare decât un site luminos. La safdesign.ro construim site-uri pe ambele teme, din start, ca fiecare vizitator să vadă exact ce îi convine. Hai să vorbim despre cum ar arăta al tău.