You are in: homeblog > blog post

Highlighting Search Terms on Results Page

Posted on September 21, 2015 by Theresa Wilkinson in Accessibility.

I recently conducted several focus groups on a short-term contract. The intent of the focus group was to get feedback on a new application design. During the sessions, most participants complained that there was no highlighting used to distinguish the search term. The search term was highlighted, but in red text that the participants clearly could not recognize.

Example 1

Use of Color Research

Usability.gov

  • Avoid the situation where important information is conveyed only in the form of color.
  • Caution when using red.

For non-color blind people, red is the bright and vivid color. But for color blinds, it is as dull as blue or dark green. Especially for protanopes, who cannot detect long wavelength of red light, dark red appears almost as black. Color blind people, however, still feel certain ranges of reds as bright and vivid colors. Instead of pure dark red (RGB=100%, 0%, 0% or #FF.), please use vermilion (yellowish red with shorted wavelength: RGB=100%, 32%, 0% or #FF2000), or light red (mixed with white: RGB=100%, 8%, 8% or #FF1414). (SEE Accessibility on Usability.gov)

First Principles of Interaction Design by Bruce Tognazzini

“Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who won't be experiencing any color coding today.

Most people have color displays nowadays, but they are not universal. In addition, approximately 10% of human males, along with a rare sprinkling of females, have some form of color blindness”. (SEE First Principles of Interaction Design)

Solution

Here is a good example of highlighting with color. I would recommend coming up with several options of contrast and testing this with users.

Example 2