On a typical web page, what do you notice first? Probably the title of the page if it has one. Next, your eyes might be drawn to any images on the page. Finally, if you are still interested in the page, you might begin to look at the text, perhaps even reading the first paragraph or two to see if it is meaningful to you. Actually, most news sites know this and put the most sensational statements either as part of the title or within the first paragraph. They typically only clarify those statements and put them in context, if they do at all, further down in the article.

But what if your page does not have sensational statements and you just need to emphasize a sentence or even a few words. What is the most effective way to do that? Unfortunately, for many beginner web content creators, their first thought might be to underline the text that they feel is important. That, however, can be visually misleading. Why? Most web site visitors immediately assume that any underlined text represents a link to somewhere else in the document, another page, or even another site. You cannot assume that if your underlined text is a different color that the font color used by links on the page that the user will know that you are just emphasizing the text and not making it a link. For people with low color vision, they may not even notice the difference so why tempt fate? Just keep underlined text for links, not to emphasize a point.

If the text on the page is broken into topics with a header at the beginning of each topic, it is equally wrong to underline the header text for the same reasons as stated above. I will talk about headers in a future post. They can be very useful on pages with a large amount of text that can easily be divided into topics.

One way some web content creators emphasize text is to use a different font color without the underline. While that may be tempting, there is an ADA (Americans with Disabilities Act) guideline that states that color alone should never be used to emphasize text or imply meaning. This echoes again the concern for people with low color vision. For example, the following line may seem okay to most.

If you experience pain in your upper arms or chest, call 911 immediately.

First, the contrast between the font color of the last three words and the rest of the sentence may not be obvious to all readers of your site. The color contrast between the black text and the maroon text is only 2.6:1.

Preferred recommendations in this case combines the color with a change in the font style such as making the text bold or italic. You can also use a different font family and change the font size. Changing the font color to a shade that better contrasts with the rest of the text works as well. Examples of better ways to display the above line might be one of the following.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

Note that if you change the font color to emphasize text as in the last example above, the font color of the emphasize text must contrast with the rest of the text. In this example the contrast between the new shade of red and the black text is a healthy 4.8:1 and the contrast to the background is 4.3:1 but by increasing the font size to 14 pt. bold, this still surpasses the 3:1 color contrast requirement of ADA.

One word of warning when using a color, do not use a color that is the same or close to the color used for links within the text to prevent confusion. In no case should you underline text to emphasize it even if you change the font style or font size.

Another alternative for emphasis that can sometimes work is to reverse the color to emphasized text such as:

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

These two examples simply turn the text to white while using a black or maroon background color. Both options help the important text stand out from the rest of the page content.

In summary, emphasized text should be reserved for the most important information only. You might use more than one emphasis style if you have different levels of emphasis. However, within the same site, be consistent with the methods you use to emphasize important text. Do not use different emphasis styles on different pages. That would be as bad as using different font families, font styles, or font sizes on different pages. At all times, all pages within your site should look like they belong together.