We hope that you are finding this resource guide useful. If you may wish to return, please bookmark this page or the .
Email if you need help on any topic in the Guide, have suggestions and comments, or can help by reporting a page bug.
Vital resources directly to your mailbox Like to try our twice-monthly email newsletter Web Evangelism Bulletin? It will give you a unique range of evangelism strategies and news (for Web, church, and beyond), plus webmaster and page promotion tips:
Color is so much part of our lives that we do not always think about the impact that it makes on others reading our webpages.
Usability and readability are the key to pages that communicate. Text should be of sufficient contrast to the background to be readable. This means, in practice, black or near-black fonts on white or very pale backgrounds. (Do not therefore use the 216 so-called browser-safe colors as page background – this is no longer necessary because almost all computer set-ups render many more colors well, even if not identically.) Below are the 'browser-safe' colors – click on any color to change the background of this page. You will note that only two or three are sufficiently pale to be reasonable backgrounds for a large page of text. (Older browsers, or those with Javascript disabled, may not operate all the color-change and other options on this page, but all work in recent versions of IE and NN.) Javascript is disabled on your browser – color-change options on this page will not work for you.
You can also change the page background to any color by:
Be aware too of the needs of color-blind users, who see a screen with little differenciation of color. Avoid especially green fonts on a red background or vice versa. Click here to convert this page to gray-scale and simulate their viewing experience. (Click here to restore colors.) For more on color-blind issues, check these links: Safe colors | Color tester | Color-blindness simulator.
Font faces are another readability issue. Studies have shown that 'sans serif' fonts are easier and 20% quicker to read on a computer monitor. IE users: click on these links to change the font style for this page to: helvetica | verdana | arial | default sans-serif | default serif | times new roman. A majority of browsers will display text in Times New Roman if you do not specify a font style in your page body or style sheet.
'Reversed-out' print (e.g. white on a dark blue background) is very hard to read for long blocks of text – though it is great for headlines, section captions and navigation bars. And since 8% of males are color-blind, avoid reddish fonts on greenish backgrounds (or vice versa). Other visually-impaired people will also find it hard to read print when there is only limited difference in color or density between text and background. It is also unhelpful to them to specify absolute font sizes which they cannot over-ride in their browser settings. See these research studies:
Color Test Results | Color/font/wordstyles | Understanding color
After all the fun, please don't be carried away and set your page background to magenta because that was the color of your first car and it is still your favorite. Remember, you already know what is on your pages and are not a first-time reader of the content. Others may have to struggle (or possibly give up) with your choice of font face and color. Keep bright colors for small elements of your page design rather than the main text background.
There is a strong case for considering a neutral off-white background which is just slightly less glaring than full white and reduces strain on the eyes, or one of the very palest pastel shades. Here are some very pale restful backgrounds for you to try - the hexadecimal coding is shown on the button. (If your browser is set to 256 colors or less, some of these very pale colors will not display – they will just show up as white. But if you are using 16-bit color or higher (as almost all Web users do), you will see the subtle changes of background color.) You can mix many more on these color mixers giving very fine adjustment of color and millions of options: use Simply the Best | Color Picker to give fine-tuning visual adjustment to hexadecimal color codes, then try the code on your page – or test it here using the 'any color' button. Any color If you are using a graphical page background, ensure that it is very pale and 'washed out'. Most graphics programs such as PaintShop Pro will modify a graphic in this way (technically to reduce opacity or increase transparency to produce a 'muted' image). If you have a graphical background, specify a bgcolor also – some people set their browsers to not load graphics. You can also alter the appearance of any page you are viewing (including your own) – font face, color background, color text, or remove background image, by the use of Bookmarklets. These are mini-javascripts which you can save in your bookmark/favorite file (Tip – save them in their own named directory). Then when you click on the appropriate bookmarklet, it will over-ride the appearance of the page your are visiting. This gives a further opportunity to see how changes in color can improve readability. E.g. Page bgcolor changer. To use it on this page, click and then write in the color (name or hexadecimal code including #). To use it on your own page, RIGHT-click on the link, choose 'add to favorites' to turn it into a bookmark, then click on the bookmark to obtain a little box in which you can easily try different colors on your own page. Color Set is a free program which enables you to try mockups of web-pages with different color backgrounds, borders, text colors, etc, so you can choose the best balance. Putting it togther: colors that match each other It is also important that colors should fit together with each other without clashing. These very valuable interactive tools will help you create a range of blending colors for a website: Pixy - this color scheme tool is very valuable - THE place to start ColorMatch Color Wheel Luke's color tool ColorMatch Remix - create a range of matching colors and codes Colors on the Web - detailed site about matching ILU Sessions Color Blender Color Tools for the Design Impaired Color, Contrast and Dimension in Design RGB to hex/hex to RGB converter - with the color displayed More RGB to hex/hex to RGB conversion options Freeware Download these freeware programs: Get Color Sf – use the tool to find the color of any displayed color – down to 1 pixel in size. Colors Attribute – your own color mixer – any possible color Screen calipers – measure the size of any onscreen element with these dragable calipers The Christian message that color sends Quite apart from readability, color can re-inforce or detract from the message of a page. Graphic designers know that the way they use color is a part of the message. We have all seen websites where the use of harsh or clashing colors and graphics sent us running away – and other sites where the gentle and sensitive use of color reinforced the message. Different cultures use color differently – Latin America, for example, prefers bright dramatic websites. In India, it has been found that if a preacher wears the saffron color Sites for Hindus should consider including the saffron color in elements of the page design. Similarly, green is often used in Islam – so we should consider its use for sites in that context. Colors often have deeper meanings in different cultures – signifying peace and other emotions. News for you Why subscribe? Main sections The unique Web Outreach sites Communicating Effective writing Church pages Webmaster helps Mission outreach This WebmasterBase article on the meanings of color is well worth printing out for reference. Check our webmaster page for more resources. More on cultural understanding Globalize your website – understand the needs of an international readership Culture and content – more on globalizing a site. Understanding Japanese culture – ways to communicate in Japan Indentifying with people – and try another color-change trick on the chameleon! Contextualization – sharing the Gospel with meaning The meaning of life – finding color in our existence Dictionaries Suggest this page to a friend Save page to disk Printer-friendly Email us ? Explore & discuss To think about… printable questions on THIS page Online forums… discuss web evangelism, site design, and webmaster problems E-vangelism blog… web evangelism comment by Andrew Careaga. Unmissable. More pages in this subject section: click on the yellow link on the left. Top Web Evangelism overview Free evangelistic screen saver - a low-key 'conversation starter' for workplace or home The X Spectrum - defining the target audience of any Christian website or other communication medium. Free page for your site - add an introductory page about Web Evangelism to your site. Also available as 1300-word article for print media. Christian blogging - how to use blogs for outreach Internet Evangelism Day – the exciting new focus day for YOUR church Bookmark: this page | Web Evangelism Guide Overview Link to this page? Free newsletter Free content/permissions Poster Page update alert
If you are using a graphical page background, ensure that it is very pale and 'washed out'. Most graphics programs such as PaintShop Pro will modify a graphic in this way (technically to reduce opacity or increase transparency to produce a 'muted' image). If you have a graphical background, specify a bgcolor also – some people set their browsers to not load graphics.
You can also alter the appearance of any page you are viewing (including your own) – font face, color background, color text, or remove background image, by the use of Bookmarklets. These are mini-javascripts which you can save in your bookmark/favorite file (Tip – save them in their own named directory). Then when you click on the appropriate bookmarklet, it will over-ride the appearance of the page your are visiting. This gives a further opportunity to see how changes in color can improve readability. E.g. Page bgcolor changer. To use it on this page, click and then write in the color (name or hexadecimal code including #). To use it on your own page, RIGHT-click on the link, choose 'add to favorites' to turn it into a bookmark, then click on the bookmark to obtain a little box in which you can easily try different colors on your own page.
Color Set is a free program which enables you to try mockups of web-pages with different color backgrounds, borders, text colors, etc, so you can choose the best balance.
Different cultures use color differently – Latin America, for example, prefers bright dramatic websites.
In India, it has been found that if a preacher wears the saffron color Sites for Hindus should consider including the saffron color in elements of the page design. Similarly, green is often used in Islam – so we should consider its use for sites in that context. Colors often have deeper meanings in different cultures – signifying peace and other emotions.
News for you Why subscribe? Main sections The unique Web Outreach sites Communicating Effective writing Church pages Webmaster helps Mission outreach This WebmasterBase article on the meanings of color is well worth printing out for reference.
Check our webmaster page for more resources.
Web Evangelism overview
© May 2008 Web Evangelism Guide Contact us Sitemap Privacy About us Meaning of life
"Always be prepared to give an answer to everyone who asks you to give the reason for the hope that you have. But do this with gentleness and respect..." I Peter 3:14-16
