Tabellen en nog
veel meer weetjes!
Mist U een tabel?
Laat het ons weten!
www.tabellenboekje.be

Handige tips en
wetenswaardigheden
voor de startende
website ontwerper?
www.webhandig.be

Kleuren Presentatie

Leesbaarheid

Contrast in kleuren

Zorg altijd dat er voldoende contrast is tussen de gebruikte tekst en de achtergrond. Om te controleren of de juiste kleuren gebruikt zijn, kun je bekijken door een screen dump te maken en deze dan met één of ander teken- of foto edit programma te veranderen in een plaatje met alleen grijstinten.

Hieronder staan twee plaatjes van de home page van Design4W3. Eerst met de originele kleuren en daarna weergegeven in grijstinten.

gif image in kleur
gif image in grijstinten

Je ziet dat de leesbaarheid van de pagina in grijstinten net zo goed is dan de pagina in kleur. Als dit het geval is dan kun je zeggen dat de kleurstelling niet slecht gekozen is.

Dezelfde tip geldt ook voor een logo die op uw website staat maar natuurlijk ook op uw briefpapier. Als hiervan een kopie wordt gemaakt dan moet hij nog steeds leesbaar zijn. Je ziet wat er gebeurt met onderstaande kleurencombinatie indien het logo in grijstinten wordt weergegeven.

Design4W3 zal u altijd van het juiste advies voorzien en een controle uitvoeren.

Contrast in tekst

Het beste contrast wordt natuurlijk bereikt door een zwarte tekst op een witte achtergrond te plaatsen. Hieronder staat een stukje zwart-op-wit

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 est laborum.

Het maakt een tekst vlak wel een beetje saai door deze combinatie te gebruiken. Tegenwoordig zie je steeds vaker dat de tekst grijs gemaakt wordt. Dat komt de leesbaarheid niet altijd ten goede. Op een LCD scherm worden dit soort tekst presentaties slecht leesbaar.

Tekst kleur=#333333 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 est laborum.

Tekst kleur=#666666 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 est laborum.

Tekst kleur=#999999 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 est laborum.

Je kunt de tekst natuurlijk ook een kleurtje geven!

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 est laborum.

Dit kun je natuurlijk ook omdraaien (deze combinatie wordt op de start pagina van Hotmail gebruikt en geeft ook een goed leesbaar resultaat.

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 est laborum.




 
 

Design4W3 Webdesign - Degelijk en Betrouwbaar!