Az olvasás az ember tanult képessége.
A vizuális ingerek és mintázatok között
különleges helyet foglalnak el a betűk: a szöveg
olvasása, a többi képi inger feldolgozásától
bizonyos mértékig eltérő feladat számunkra,
a betűk és szavak közvetlen (nyelvi) információt
hordoznak.
A betűk és hátterük színesek
is lehetnek, a szín pedig befolyásolja az olvashatóságot,
az üzenet befogadását, értelmezését
és érzelmeket kelt. A színnek nemcsak figyelemfelhívó
és esztétikai szerepe, hanem ergonómiai jelentősége is van, mert az olvashatóság minden szöveges környezetben kiemelt követelmény.
Az írott szöveg megértése általában
hosszabb időt vesz igénybe, mint a képé,
ezért az olvashatóság fontosságát
nem lehet eléggé hangsúlyozni. (Feisner
2006:87; Carter 2002; Using Color in...)
Passzív és aktív felület
Szöveggel két különböző
fizikai környezetben találkozunk, melyek ergonómiai
szempontból is lényegesen eltérnek egymástól:
(Majoros 2004:21)
Passzív felület:
•
papír és más hagyományos anyagok
•
visszaveri a ráeső fényt
•
statikus
•
a szín intenzitása korlátozott, mert festék,
tinta hordozza
Aktív felület:
•
elektronikus (monitor, kijelző, világítótestek,
LED)
•
fényt sugároz
•
dinamikus (programozottan vagy interaktívan mozoghat)
•
világít, és ezért a szín
nagyon intenzív lehet
Mindezekből következően aktív felületről
olvasni (rendszerint) fárasztóbb.
Az aktív felület előnye a passzívval
szemben:
•
nem igényel megvilágítást
•
a betűméret (általában) változtatható
Már létrejött a passzív és
aktív felület fúziója az elektronikus
papír, mely egyesíti az előnyöket,
ez az e-könyvolvasó (e-book) kijelzője.
Folynak a kísérletek színes felület
létrehozására is, de ez a kereskedelemben
jelenleg (2012) még nem kapható.
(E-papír;
E-ink)
Az olvashatóság szín-kritériumai
Az olvashatóságnak és szövegek megjelenítésének
számos szempontja van, amire itt nem térhetünk
ki. A tipográfia már több száz
éve kiforrott, de az elmúlt évtizedekben
forradalmi változásokon ment keresztül. Az
utóbbi 1-2 évtizedben az internetes megjelenés
teljesen új lehetőségeket és követelményeket
állított erre a területre is. Az új
lehetőségek sajnos új hibalehetőségeket
is magukkal hoznak, ráadásul az internetes környezet
messze van a kiforrottságtól, szinte évente
változik. A számítógépes
szövegszerkesztés nemcsak a képzett tipográfusok,
hanem nagyon sok ember napi feladata, talán ezért
hemzsegnek az alig vagy nehezen olvasható szövegek
a világhálón. Mindenkinek, aki szöveget
tesz közzé, illik legalább elemi szinten
ismernie az olvashatóság „törvényeit”.
(Virágvölgyi 1996; Leiszter
2011)
Az alábbi példák, megállapítások
és színjavaslatok csak a hosszú, összefüggő,
ún. főszövegre érvényesek. Címek,
rövid szlogenek, kézzel írott és más
szövegfajták esetén egyéb szempontok
is felmerülnek, de ezekre itt nem térünk ki.
(Ezen a weboldalon olvasható főszöveg
betűinek színe kékesfekete: #040030)
Kontraszt
Az olvashatóság szín-kritériumai
között legfontosabb a világosságkontraszt.
A legnagyobb kontraszt a fehér és fekete között
van, a szövegek túlnyomórészt ilyen
környezetben jelennek meg, de más világos
és sötét színek is megfelelnek a célnak.
(de Grandis 1984:118; Color contrast)
Egyes kutatások szerint
a leginkább olvasható színkombináció
a sárga alapon fekete karakter, de ez csak a rövid
szövegekre (pl. felhívás, figyelmeztetés)
érvényes. Folyamatos szövegnél az
élénk színű háttér rendkívül
fárasztó a szemnek.
» Kontrasztok
A színek világában csak kevés szigorú
szabály van, ezek egyike a vibráló
színek (az élénk vörös és
zöldeskék) elkerülése betűnek és
hátterének. Ezek a színek csak akkor lehetnek
egymás mellett, ha világossági és
telítettségi paramétereik között
jelentős különbség van, pl. a sötéttürkiz
és rózsaszín már megfelelő.
| Színes
háttér és betű |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id ... |
Tilos!
Színadatok: piros háttér: #FF0000;
türkiz betű: #009CBF |
|
| Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
Megfelelő:
rózsaszín és sötéttürkiz
Az előbbi színek világosabb ill. sötétebb
árnyalatai ! |
|
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Megfelelő:
egy szín sötét és világos
árnyalatai |
(Lorem ipsum)
Kellemes a sötétzöld
háttéren a nagyon világos zöld, vagy
a sötét- és világoskék, és
számtalan megfelelő párosítás
létezik.
Kerülendő a főszöveg
alatt a színes vagy kontrasztos kép (alnyomat),
mert ez is nehezíti az olvasást.
| Alnyomat |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Nehezen
olvasható |
Inverz színek
Az inverz színek (fekete/sötét
alapon fehér/világos betűk) bár a
kontraszt ideális, mégis rosszabbul olvashatóak
akár nyomtatásban, akár monitoron látjuk,
ezt csak a megnövelt betűméret tudja ellensúlyozni.
| Inverz
színek |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Lassabban
olvasható mint a fehér alapon fekete szöveg |
Háttér színe
Ma egy tipográfus rengeteg színhez férhet
hozzá a számítógépes szerkesztőprogramokon,
–és ha nem elég biztos a tudása és
ízlése– könnyen elcsábulhat,
és képes élénk színű
háttérre írni szöveget. Egy-egy cím,
felirat, szlogen esetében ez jó lehet, de hosszú,
összefüggő szöveget élénk
színre írni még akkor sem szerencsés,
ha különben a kontraszt megfelelő. Az erős
színű háttér fárasztja a szemet,
utóképet okoz, és –az olvasási
gyakorlottság, az életkor, a látási
körülmények függvényében–
lassabban olvasható. A világos és tört
színekre nem érvényes a tiltás,
a halvány színek bármelyike jó,
sőt nagyon kellemes háttérszín a sötétbetűs
szöveg alatt.
| Színes
háttér |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
A
nagyon élénk színű háttér
fárasztja a szemet,
habár a kontraszt megfelelő |
A színes, de kis telítettségű
háttéren az élénk színű
betűk jól olvashatóak, feltéve, hogy
megfelelő közöttük a világossági
kontraszt. A színes szöveg
képe felkelti színasszociációinkat,
jelentést tulajdonítunk a szöveg színének
és (gondos tervezés esetén) kellemes benyomást
kelthet. Az élénk
színű betű nem okoz számottevő
utókép-hatást, nem fixálódik,
hiszen a szem olvasás közben mozog, és a
betűk csak vékony vonalak.
| Színes
háttér és betű |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| világossárga:
#FFF8CC; sötétkék: #001155 |
|
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| világoskék:
#E0FFEE; lila: #440088 |
| Jól
olvasható, nem fárasztó, kellemes |
Alapszínek a monitoron
Számítógépes környezetben gyakori
hiba, hogy fekete (#000000) háttérre tiszta kék
(#0000FF) betűvel írnak, gondolván, hogy
a kék szín maximális fényerőre
állítva elegendő kontrasztot ad. Sajnos ez nem így van, mert az RGB monitor legintenzívebb
kékje meglehetősen sötét szín,
alig emelkedik ki a fekete háttérből (11%-kal
világosabb a feketénél), ráadásul
a vékony kék vonalakat nehezen fókuszálja
a szem. A piros (#FF0000) már jobb, és a zöld
(#00FF00), ami a legvilágosabb a három alapszín
közül, már megfelelő.
»
RGB alapszínek világossága , »
Fényszínek intenzitása és világossága
A jelenség oka, hogy szemünk elsődlegesen a
világosság-különbséget érzékeli,
és nem a fizikailag mérhető fényerőt!
| Fekete
háttéren R,G,B alapszínek |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Megfelelően
olvasható (zöld: #00FF00) |
|
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Nehezebben,
de még olvasható (piros: #FF0000) |
|
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... . |
| Tilos! (kék: #0000FF) |
Ha mindenképpen kék betűvel szeretnénk
a fekete háttérre írni, akkor a kissé
zöldes (cyan, türkiz-) kék vagy a világoskék
megfelelő lehet.
| Fekete
háttár – kék betű |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id ... |
| Olvasható
világoskék (#88AAFF)
betű |
Különböző színek
egy szövegben
Mind a nyomtatott, mind az elektronikus anyagok tartalmazhatnak
címet, szlogent, kiemelt szavakat. A hirdetésekben,
címekben elfogadhatóak a kontrasztos, élénk
színek, itt kevésbé szigorúak a
színválasztás elvei. E szövegrészek
a kép tartalmára hívják fel a figyelmet,
kevés szóból állnak, ezért
olvasásukat nem nehezíti a színesség.
A főszövegben egy-egy szó kiemelése
színnel általában helyes, feltéve,
hogy megfelelő a kontraszt:
| Kiemelés
színnel |
| Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id ... |
Fehér
alapon, fekete betűk között a vörössel
írt szó feltűnő,
a világoszöld nem, ez alig olvasható |
Nem szerencsés egy szó betűinek különböző
színeket adni, ahogy ezt laikusok szívesen teszik,
pl. a „színes”
szó írásánál. A különböző
színek széttörik a szóképet,
ezáltal sokkal nehezebben olvasható, és
(enyhén szólva) esztétikai többletértéke
sincs. Ez egyedül címek és nagy betűméret
esetén elfogadható. Legalább ilyen helytelen
egy összefüggő szövegben minden szónak
különböző színt adni: ez a szövegképet töri szét, megnehezíti a mondat értelmezését,
mert pl. a pirossal írt szót hangsúlyosabbnak
vélhetjük, mint a barnát, a világosszürke
betűk beleolvadnak a fehér háttérbe.
| Színes
szavak |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id ... |
| Kellemetlen,
értelmetlen, nehezen olvasható, csúnya... |
A különböző színű betűkkel
írt szavak módosíthatják a szöveg
tagolását és jelentését. János esztergomi érsek
híres mondatának* kétféle értelmezését
színekkel is elérhetjük.
*A Gertrudis ellen tervezett merénylet
kapcsán, 1213-ban.
(Reginam occidere)
| A szín
tagolja a mondatot és módosítja jelentését |
A
királynét megölni nem kell félnetek jó lesz
ha mindenki beleegyezik én nem ellenzem |
A
királynét megölni nem kell félnetek
jó lesz
ha mindenki beleegyezik én
nem ellenzem |
|
Felhasznált és ajánlott
irodalom:
Carter:
Digital Color and Type
Color contrast
Designing Accessible Text
Do not harm
E-ink - Wikipedia
E-papír - Wikipedia
Feisner:
Colour
de Grandis:
Teoria e uso del colore
Leeuwen:
The Language of Colour, 92.p.
Leiszter (szerk.)
Webergonómia – Jakob Nielsen nyomán
Lorem ipsum – Wikipedia
Majoros:
Belsőtéri vizuális komfort
Reginam occidere – Wikipedia
The Legibility of a Font
Using Color in Information Display Graphics
Virágvölgyi:
A tipográfia mestersége – számítógéppel
***
Irodalom, nyomtatott (P)
Irodalom,
elektronikus (E)
|
