A kontrasztos előtér és háttérszínek használata a webes tervezésben

Javítsa webhelyének olvashatóságát és felhasználói élményét megfelelő kontraszttal

A kontraszt fontos szerepet játszik a weboldal tervezésében. Az adott helyszín tipográfiájából , a webhelyen használt képekhez az előtérelemek és a háttérszínek közötti kontraszttól függően - egy jól megtervezett helyszínnek megfelelő kontrasztnak kell lennie mindezen területeken, hogy biztosítsa a minőségi felhasználói élményt és a hosszú távú helyszíni sikert.

Az alacsony kontraszt egyaránt egy rossz olvasási tapasztalat

A túl alacsony kontrasztú weboldalak nehezen olvashatók és használhatók, ami negatív hatást gyakorolhat bármely webhely sikerére. A gyenge színes kontrasztokat gyakran könnyű azonosítani. Általában ezt úgy teheti meg, ha egy weblap böngészőjében megjelenő oldalt látja, és a rossz színválasztás miatt túl nehéz elolvasni a szöveget. Mégis, bár könnyű meghatározni, hogy mely színek nem működnek együtt jól, nagyon nehéz lehet eldönteni, hogy milyen színek jól működnek másokkal ellentétben. Lehet, hogy nem az, ami nem működik, de hogyan fogja meghatározni, mi működik? A jelen cikkben szereplő kép segítséget nyújt a különböző színű színek megmutatásában és az előtér és a háttér színeinek kontrasztjához. Láthatsz néhány "jó" párosítást és néhány "szegény" párosítást, amely segít a megfelelő színválasztásban a projektekben.

Kontraszt tekintetében

Egy dolog, amit meg kell jegyezned, hogy a kontraszt több, mint hogy mennyire fényes a szín a háttérhez képest. Ahogyan látnod kell, hogy a fent említett kép, ezek közül a színek közül néhány nagyon világos, és vibrálóan jelenik meg a háttérszínen - például a fekete kéken, de továbbra is rossz kontrasztnak nevezték. Ezt azért tettem, mert bár világos lehet, a színkombináció még mindig nehezen olvashatóvá teszi a szöveget. Ha fekete háttéren minden kék szöveget tartalmazó oldalt szeretne létrehozni, az olvasók nagyon gyors ütemezést kapnak. Ezért a kontraszt nem csak fekete-fehér (igen, ez a puszik volt). Szabályok és legjobb gyakorlatok vannak a kontraszt tekintetében, de mint tervező mindig értékelnie kell ezeket a szabályokat, hogy megbizonyosodjon arról, hogy az adott példányban dolgoznak.

A színek kiválasztása

A kontraszt csak egy olyan tényező, amelyet fontolóra kell venni a weboldal tervezésének színeiben, de ez fontos. A színek kiválasztásakor vegye figyelembe a vállalat márkastandardjait, de készen áll a színpaletták kezelésére is, amelyek - jóllehet megegyezhetnek a szervezet márkajelzéseivel - nem működnek jól online módon. Például mindig találtam sárga és világos zöldeket, hogy szörnyen kihívást jelentenek a weboldalakon való hatékony felhasználáshoz. Ha ezek a színek a cég márkajelzéseiben szerepelnek, valószínűleg csak akcentussal kell használni, mivel nehéz megtalálni azokat a színeket, amelyek jól illeszkednek egymáshoz.

Hasonlóképpen, ha a márkajel színei fekete-fehérek, akkor ez nagy kontrasztot jelent, de ha hosszantartó szöveggel rendelkező oldal van, fekete háttérrel és fehér szöveggel olvasható. Még a kontraszt a fekete-fehér is nagy, fehér szöveg fekete háttéren okoz szemre törzs hosszabb átjárók. Ebben az esetben a színeket fehér színű fekete szöveg használatával fordítanám. Ez nem feltétlenül érdekelheti a vizuális érdeklődést, de nem fog jobb kontrasztot találni.

Online eszközök

A saját tervezési értelemben kívül néhány online eszköz is használható a webhely színválasztásának tesztelésére.

A CheckMyColors.com teszteli az összes webhely színét és jelentést tesz az oldalelemek közötti kontrasztarányról.

Továbbá, amikor a színválasztékra gondolsz, akkor fontolóra kell venni a weboldal hozzáférhetőségét és az embereket, akik színvaksággal rendelkeznek. A WebAIM.org ezzel segíthet, akárcsak a ContrastChecker.com, amely megvizsgálja a WCAG irányelveivel szembeni választásait.