Käyttämällä kontrastia etualalla ja taustavärejä Web-suunnittelussa

Paranna sivustosi luettavuutta ja käyttökokemusta riittävän kontrastin avulla

Kontrasti on tärkeä rooli minkä tahansa sivuston suunnittelun onnistumisessa. Tästä sivuston typografiasta , koko sivustossa käytetyistä kuvista etualan elementtien ja taustavärien välinen kontrasti - hyvin suunnitellulla sivustolla on oltava riittävä kontrasti kaikilla näillä alueilla, jotta varmistetaan laadukas käyttäjäkokemus ja pitkän aikavälin sivuston menestys.

Alhainen kontrasti on yhtä huono lukemiskokemus

Sivustoja, jotka ovat liian alhaisia, voi olla vaikea lukea ja käyttää, mikä vaikuttaa kielteisesti sivuston menestykseen. Huono värikontrastikysymys on usein helppo tunnistaa. Voit yleensä tehdä niin vain katsomalla sivua, joka on tehty verkkoselaimessa ja voit nähdä, onko teksti liian vaikea lukea huonojen värien valinnan takia. Silti, vaikka voi olla helppo määrittää, mitkä värit eivät toimi hyvin yhdessä, voi olla todella haastavaa päättää, mitkä värit toimivat hyvin toisin kuin toiset. Et voi, mitä ei toimi, mutta miten määrität, mikä toimii? Tässä artikkelissa näkyvän kuvan pitäisi auttaa sinua näyttämään erilaisia ​​värejä ja miten ne ovat kontrastina etualalla ja taustaväreinä. Näet joitain "hyviä" pareja ja joitain "huonoja" parituksia, jotka auttavat sinua tekemään oikeat värivalinnat projekteissasi.

Kontrasti

Yksi asia, jonka pitäisi huomata, on, että kontrasti ei ole pelkästään sitä, kuinka kirkasta väriä verrataan taustalle. Kuten sinun pitäisi nähdä, että edellä mainittu kuva, jotkut näistä väreistä ovat hyvin kirkkaita ja näkyvät elävästi taustavärillä - kuten mustalla mustalla, mutta merkitsin edelleen sen olevan huono kontrasti. Tein tämän, koska vaikka se voi olla kirkas, väriyhdistelmä tekee tekstistä edelleen vaikeata lukea. Jos haluat luoda sivun kaikkiin sinisen tekstiin mustalla taustalla, lukijasi saisivat silmät erittäin nopeasti. Siksi kontrasti ei ole vain mustavalkoinen (kyllä, että pun on tarkoitettu). On olemassa sääntöjä ja parhaita käytäntöjä kontrastin suhteen, mutta suunnittelijana sinun on aina arvioitava nämä säännöt varmistaakseen, että he työskentelevät tietyssä tapauksessa.

Värien valinta

Kontrasti on vain yksi tekijöistä, kun harkitset sivustosi suunnittelun värejä, mutta se on tärkeä tekijä. Värivaihtoehdoissa kannattaa huomioida yrityksen brändi-standardit, mutta myös olla valmiita käsittelemään väripaletteja, jotka voivat olla yhteensopivia organisaation tuotemerkin ohjeiden kanssa, eivät toimi hyvin verkossa. Esimerkiksi olen aina löytänyt keltaisia ​​ja kirkkaita vihreitä haasteellisena käyttää tehokkaasti verkkosivustoja. Jos nämä värit ovat yrityksen brändin ohjeissa, niitä on todennäköisesti käytettävä vain aksenttiväreinä, koska on vaikea löytää värejä, jotka eroavat toisistaan ​​hyvin.

Samoin, jos brändin värit ovat mustavalkoiset, tämä merkitsee hyvää kontrastia, mutta jos sinulla on pitkä määrä tekstiä, jonka musta tausta on valkoisella tekstillä, tulee lukemaan hyvin. Jopa mustan ja valkoisen kontrasti on hieno, musta teksti valkoisella tekstillä aiheuttaa silmäkokoa pitkille kappaleille. Tässä tapauksessa kääntäisin värit mustan tekstin päälle valkoisella taustalla. Tämä ei ehkä ole niin visuaalisesti kiinnostunut, mutta et löydä parempaa kontrastia kuin!

Online-työkalut

Oman suunnittelun merkityksen lisäksi on olemassa joitain verkkovälineitä, joiden avulla voit testata sivustosi värivalikoimaa.

CheckMyColors.com testaa kaikki sivustosi värit ja raportoi sivun elementtien välisestä kontrastisuhteesta.

Lisäksi, kun ajatellaan värivalintoja, kannattaa myös harkita sivuston esteettömyyttä ja ihmisiä, joilla on värin sokeutumista. WebAIM.org voi auttaa tätä, samoin kuin ContrastChecker.com, joka testaa valintasi WCAG: n ohjeiden mukaan.