Utilizarea culorilor în fundal și culoarea fundalului contrastante în designul web

Îmbunătățiți lizibilitatea și experiența utilizatorilor cu un contrast adecvat

Contrastul joacă un rol important în succesul designului oricăror site-uri web. De la tipografia site-ului , la imaginile folosite pe întreg site-ul, la contrastul dintre elementele primare și culorile de fundal - un site bine conceput trebuie să aibă un contrast adecvat în toate aceste domenii pentru a asigura o experiență de calitate a utilizatorului și succesul pe termen lung al site-ului.

Contrastul scăzut este egal cu o experiență slabă de citire

Site-urile web care au un contrast prea scăzut pot fi greu de citit și de utilizat, ceea ce va avea un impact negativ asupra succesului fiecărui site. Problemele de contrast slabe ale culorilor sunt adesea ușor de identificat. Puteți face acest lucru doar prin căutarea unei pagini care este redată într-un browser web și puteți vedea dacă textul este prea greu de citit din cauza unor opțiuni de culoare proaste. Cu toate acestea, în timp ce ar putea fi ușor să determinați ce culori nu funcționează bine împreună, poate fi foarte dificil să decideți ce culori funcționează bine în contrast cu altele. Nu puteți să nu lucrați, dar cum veți determina ce funcționează? Imaginea din acest articol ar trebui să vă arate o varietate de culori diferite și modul în care acestea contrastează ca culori în prim plan și fundal. Puteți vedea o pereche de "bune" și o pereche de "săraci", ceea ce vă va ajuta să faceți alegerile potrivite de culoare în proiectele dvs.

În ceea ce privește contrastul

Un lucru pe care trebuie să-l notezi este că contrastul este mai mult decât cât de luminos o culoare este comparată cu fundalul. Așa cum ar trebui să vedeți în imaginea menționată mai sus, unele dintre aceste culori sunt foarte strălucitoare și se arată vibrant pe culoarea de fundal - cum ar fi albastrul pe negru, dar eu încă am etichetat-o ​​ca având un contrast scăzut. Am facut acest lucru deoarece, desi este posibil sa fie luminos, combinatia de culori face ca textul sa fie dificil de citit. Dacă ați crea o pagină în tot textul albastru pe un fundal negru, cititorii dvs. ar avea ochelari foarte repede. Acesta este motivul pentru care contrastul nu este doar alb-negru (da, acel joc a fost destinat). Există reguli și cele mai bune practici pentru contrast, dar ca designer trebuie să evaluați întotdeauna aceste reguli pentru a vă asigura că lucrează în instanța dvs. particulară.

Alegerea culorilor

Contrastul este doar unul din factorii de luat în considerare atunci când alegeți culorile pentru designul site-ului dvs., dar este unul important. Atunci când alegeți culori, țineți cont de standardele de marcă pentru companie, dar, de asemenea, să fiți dispuși să abordați palete de culori care, deși sunt compatibile cu liniile directoare ale unei organizații, nu funcționează bine online. De exemplu, am găsit întotdeauna verde galben și luminos pentru a fi o provocare teribilă pentru a utiliza eficient pe site-uri web. Dacă aceste culori sunt în liniile directoare ale unei companii, acestea vor trebui probabil folosite doar ca culori de accent, deoarece este greu să găsiți culori care să contrasteze bine cu oricare dintre ele.

În mod similar, dacă culorile mărcii dvs. sunt negre și albe, înseamnă un contrast mare, dar dacă aveți un site cu cantități lungi de text, având un fundal negru cu text alb, va face citirea foarte greu. Chiar și contrastul dintre alb-negru și textul alb, pe fond negru, provoacă tulpina ochilor pentru pasaje lungi. În acest caz, aș inversa culorile pentru a folosi textul negru pe un fundal alb. Asta nu poate fi la fel de interesant vizual, dar nu veți găsi un contrast mai bun decât asta!

Instrumente online

În plus față de propriul dvs. simț al designului, există câteva instrumente online pe care le puteți utiliza pentru a testa alegerea culorii site-ului dvs.

CheckMyColors.com va testa toate culorile site-ului dvs. și va raporta raportul de contrast dintre elementele de pe pagină.

În plus, atunci când vă gândiți la opțiunile de culoare, trebuie să luați în considerare accesibilitatea site-ului și persoanele care au forme de orbire colorată. WebAIM.org vă poate ajuta cu acest lucru, la fel ca și ContrastChecker.com, care vă va testa opțiunile împotriva ghidurilor WCAG.