Die gebruik van kontrasterende voorgrond- en agtergrondkleure in webontwerp

Verbeter jou webwerf se leesbaarheid en gebruikerservaring met voldoende kontras

Kontras speel 'n belangrike rol in die sukses van enige webwerf se ontwerp. Van die werf se tipografie , die beelde wat deur die hele werf gebruik word, die kontras tussen voorgrond-elemente en agtergrondkleure. 'N Goed ontwerpte webwerf moet voldoende kontras hê in al hierdie gebiede om 'n kwaliteit gebruikerservaring en langtermynsukses sukses te verseker.

Lae kontras is gelyk aan 'n swak leeservaring

Websites wat te laag in kontras is, kan moeilik wees om te lees en te gebruik, wat 'n negatiewe uitwerking op die sukses van enige webwerf sal hê. Swak kleur kontras probleme is dikwels maklik om te identifiseer. Jy kan dit gewoonlik doen net deur 'n bladsy wat in 'n webblaaier gelewer word, te kyk en jy kan sien of die teks te moeilik is om te lees as gevolg van swak kleurkeuses. Tog, terwyl dit maklik kan wees om te bepaal watter kleure nie goed saamwerk nie, kan dit eintlik baie uitdagend wees om te besluit watter kleure goed werk in kontras met ander. Jy mag nie wat nie werk nie, maar hoe sal jy bepaal wat werk? Die prent in hierdie artikel moet help om jou 'n verskeidenheid verskillende kleure te wys en hoe hulle kontrasteer as voorgrond en agtergrondkleure. Jy kan 'n paar goeie kombinasies sien en 'n paar swak pare wat jou help om die regte kleurkeuses in jou projekte te maak.

Met betrekking tot kontras

Een ding wat jy moet oplet, is dat kontras meer is as net hoe helder 'n kleur is in vergelyking met die agtergrond. Soos u in die voorgenoemde beeld moet sien, is sommige van hierdie kleure baie helder en vertoon dit lewendig op die agtergrondkleur - soos blou op swart, maar ek het dit nog steeds as 'n swak kontras gemerk. Ek het dit gedoen, want die kleur kombinasie maak dit moeilik om die teks te lees. As jy 'n bladsy in alle blou teks op 'n swart agtergrond wil skep, sal jou lesers baie vinnig oogopslag hê. Dit is hoekom kontras nie net swart en wit is nie (ja, daardie woord is bedoel). Daar is reëls en beste praktyke vir kontras, maar as ontwerper moet jy altyd die reëls evalueer om seker te maak dat hulle in jou spesifieke geval werk.

Kleure kies

Kontras is net een van die faktore wat jy moet oorweeg wanneer jy kleure kies vir jou webwerf se ontwerp, maar dit is 'n belangrike een. By die keuse van kleure, let op die handelsmerkstandaarde vir die maatskappy, maar wees ook bereid om kleurpalette aan te spreek wat, terwyl hulle moontlik met die handelsmerkriglyne van 'n organisasie ooreenstem, nie goed aanlyn kan werk nie. Byvoorbeeld, ek het altyd geel en helder groen gevind om vreeslik uitdagend te wees om doeltreffend op webwerwe te gebruik. As hierdie kleure in die handelsmerkriglyne van 'n maatskappy is, sal dit waarskynlik slegs as accentkleure gebruik word, aangesien dit moeilik is om kleure te vind wat ook goed met mekaar verskil.

Net so, as jou handelsmerkkleure swart en wit is, beteken dit groot kontras, maar as jy 'n webwerf met lang hoeveelhede teks het, sal 'n swart agtergrond met wit teks baie hard lees. Selfs die kontras tussen swart en wit is wonderlik, wit teks op 'n swart agtergrond veroorsaak oogstremming vir lang gedeeltes. In hierdie geval sou ek die kleure omdraai om swart teks op 'n wit agtergrond te gebruik. Dit mag nie so visueel belangstel nie, maar jy sal nie beter kontras as dit vind nie!

Aanlyn Gereedskap

Benewens jou eie ontwerp sin, is daar 'n paar aanlyn-gereedskap wat jy kan gebruik om jou webwerf se kleur keuse te toets.

CheckMyColors.com sal al jou werf se kleure toets en rapporteer oor die kontrasverhouding tussen elemente op die bladsy.

As jy oor kleurkeuses dink, moet jy ook die toeganklikheid van webwerwe en mense wat vorms van kleurblindheid het, oorweeg. WebAIM.org kan hiermee help, soos ContrastChecker.com, wat jou keuses sal toets teen WCAG riglyne.