Izmantojot kontrastējošu priekšplānojumu un fona krāsas Web dizains

Uzlabojiet vietnes lasāmību un lietotāja pieredzi ar atbilstošu kontrastu

Kontrastam ir svarīga nozīme jebkura mājas lapas dizaina veiksmē. No šīs vietnes drukāšanas , uz attēliem, kas tiek izmantoti visā vietnē, pret kontrastu starp priekšplāna elementiem un fona krāsām - labi izveidotajai vietnei jābūt pietiekami kontrastam visās šajās jomās, lai nodrošinātu kvalitatīvu lietotāju pieredzi un ilgtermiņa panākumus vietnē.

Zems kontrasts ir vienāds ar sliktu lasīšanas pieredzi

Vietnes, kuru kontrasts ir pārāk mazs, var būt grūti nolasīt un lietot, un tas negatīvi ietekmēs jebkuras vietnes panākumus. Sliktas krāsas kontrasta problēmas bieži vien ir viegli identificēt. Parasti to var izdarīt, vienkārši pārlūkojot lapu, kas tiek padarīta tīmekļa pārlūkprogrammā, un jūs varat redzēt, vai teksts ir pārāk grūti lasīt, jo ir slikta krāsu izvēle. Tomēr, lai gan var būt viegli noteikt, kuras krāsas nedarbojas labi kopā, faktiski var būt ļoti grūti izlemt, kādas krāsas strādā labi pretēji citiem. Jūs nedrīkstat to, kas nedarbojas, bet kā jūs noteiksiet, kas strādā? Šajā raksta attēlā vajadzētu palīdzēt jums parādīt dažādas krāsas un kā tās kontrastē kā priekšplāna un fona krāsas. Jūs varat redzēt dažus "labus" pārus un dažus "vājus" savienojumus, kas palīdzēs jums izvēlēties pareizo krāsu izvēli savos projektos.

Attiecībā uz kontrastu

Viena lieta, kas jums vajadzētu ņemt vērā, ir tas, ka kontrasts ir vairāk nekā tikai, cik spilgti krāsa tiek salīdzināta ar fonu. Kā jums vajadzētu redzēt iepriekš minētajā attēlā, dažas no šīm krāsām ir ļoti spilgtas un parādās dinamiski uz fona krāsas - piemēram, zilā krāsā uz melnas, bet es joprojām to apzīmēja kā ar vāju kontrastu. Es to izdarīju, jo, lai gan tas var būt spilgts, krāsu kombinācija joprojām padara tekstu grūti lasāmu. Ja jūs izveidojat lapu visās zilajās teksta lapās uz melna fona, jūsu lasītāji ļoti ātri varētu saskarties ar acīm. Tāpēc kontrasts nav tikai melns un balts (jā, tas bija paredzēts). Kontrastam ir noteikumi un paraugprakse, taču kā dizainers jums vienmēr ir jāizvērtē šie noteikumi, lai pārliecinātos, ka tie darbojas jūsu konkrētajā gadījumā.

Krāsu izvēle

Kontrasts ir tikai viens no faktoriem, kas jāņem vērā, izvēloties krāsas jūsu vietnes dizainam, taču tas ir svarīgs. Izvēloties krāsas, ievērojiet firmas zīmola standartus, bet arī vēlies pievērsties krāsu paletēm, kuras, lai arī tās atbilstu organizācijas zīmola vadlīnijām, nedarbojas tiešsaistē. Piemēram, es vienmēr esmu atradis, ka dzelteni un spilgti zaļumi ir ļoti sarežģīti efektīvi izmantot vietnēs. Ja šīs krāsas ir uzņēmuma zīmola vadlīnijās, tās, visticamāk, būs jāizmanto tikai kā akcentu krāsas, jo ir grūti atrast krāsas, kas kontrastē ar tām.

Tāpat, ja jūsu zīmola krāsas ir melnā un baltā krāsā, tas nozīmē lielisku kontrastu, taču, ja jums ir vietne ar gariem teksta apjomiem, melna fons ar baltu tekstu ļoti grūti lasīt. Pat kontrasts starp melnu un baltu ir lielisks, balts teksts uz melna fona izraisa acs celmu garām ejām. Šajā gadījumā es apgriež krāsas, lai melnā tekstā izmantotu baltu fonu. Tas var nebūt tik vizuāli interesants, bet jūs neatradīsiet labāku kontrastu nekā tas!

Tiešsaistes rīki

Papildus sava dizaina izpratnei ir daži tiešsaistes rīki, kurus varat izmantot, lai pārbaudītu savas vietnes krāsu izvēli.

CheckMyColors.com pārbaudīs visas jūsu vietnes krāsas un ziņo par kontrastu attiecību starp lapas elementiem.

Turklāt, domājot par krāsu izvēli, jums vajadzētu apsvērt arī vietnes pieejamību un cilvēkiem, kuriem ir krāsu aklums. WebAIM.org var palīdzēt ar to, kā arī ContrastChecker.com, kas pārbaudīs jūsu izvēles, salīdzinot ar WCAG vadlīnijām.