Cum să contrasteze culorile de fundal și prim-plan în web design

Ce să știi

  • Utilizați graficul din acest articol pentru a determina cele mai bune combinații de culori de fundal și prim-plan pentru proiectarea paginilor web.
  • Folosiți un instrument online cum ar fi CheckMyColors.com pentru a testa culorile site-ului dvs. și pentru a raporta raportul de contrast dintre elementele de pe pagină.
  • Folosiți un instrument de genul ContrastChecker.com pentru a vă testa alegerile împotriva Linii directoare privind accesibilitatea conținutului web.

Acest articol explică cum să creați în mod eficient un contrast între culorile de fundal și prim-plan în designul web.

Cum se creează un contrast puternic

Unele culori pot fi strălucitoare și pot apărea vibrant pe o anumită culoare de fundal, cum ar fi albastru pe negru, dar sunt opțiuni de contrast slabe. Dacă ar fi să creați o pagină în întregul text albastru pe un fundal negru, de exemplu, cititorii dvs. ar experimenta foarte repede obosirea ochilor.

Studiați graficul de mai jos pentru a obține o idee despre cele mai bune combinații de fundal / prim plan.

instagram viewer
Tabel cu contrast de culoare
Lifewire / Jeremy Girard

Există reguli și cele mai bune practici pentru contrast, dar, în calitate de proiectant, trebuie să evaluați întotdeauna aceste reguli pentru a vă asigura că acestea funcționează în cazul dvs. particular.

Utilizați instrumentele de verificare a contrastului online

Pe lângă propriul simț al designului, încercați câteva instrumente online 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, ar trebui să luați în considerare și accesibilitatea site-ului web și persoanele care au forme de daltonism. WebAIM.org poate ajuta cu acest lucru, la fel ContrastChecker.com, care vă va testa opțiunile Linii directoare privind accesibilitatea conținutului web.

De ce este important contrastul?

Contrastul puternic joacă un rol important în succesul designului oricărui site web. Contrastul adecvat asigură o experiență de utilizare de calitate și o lizibilitate mai ușoară, care va contribui la succesul pe termen lung al unui site. Cu toate acestea, site-urile web care au un contrast prea scăzut pot fi greu de citit și de utilizat, ceea ce va avea un efect negativ asupra eficacității oricărui site.

Deși poate fi ușor să determinați ce culori nu funcționează bine împreună, este o întrebare mai dificilă să decidă ce culori se împerechează efectiv, atât spre deosebire de altele, cât și în cadrul designului unui site-ul web.

Standarde de branding și opțiuni de culoare contrastante

Contrastul este doar unul dintre factorii de luat în considerare atunci când alegeți culorile pentru designul site-ului dvs. web. Atunci când selectați culorile, va trebui probabil să fiți atenți la standardele de marcă pentru client, indiferent dacă este o companie, o altă organizație sau chiar o persoană fizică. Deși paletele de culori pot fi în concordanță cu liniile directoare ale mărcii unei organizații, este posibil să nu se traducă bine pentru prezentarea online.

Ce înseamnă diferitele culori pentru artiștii grafici?

De exemplu, verdele galben și strălucitor este teribil de dificil de utilizat eficient pe site-uri web. Dacă aceste culori se încadrează în linii directoare ale mărcii unei companii, probabil că vor trebui folosite doar ca culori de accent, deoarece este greu să găsești culori care contrastează bine cu oricare dintre ele.

În mod similar, dacă culorile mărcii dvs. sunt alb-negru, acest lucru înseamnă un contrast deosebit, dar dacă aveți un site cu cantități lungi de text, un negru fundalul cu text alb va face ca citirea să fie o experiență plină de ochi, în ciuda puterii inerente a contrastului dintre negru și alb. În acest caz, este recomandabil să inversați culorile, folosind text negru pe un fundal alb. Poate că nu este la fel de interesant din punct de vedere vizual, dar este o opțiune de contrast și lizibilitate mult mai bună.

instagram story viewer