Skip Navigation
  • Text Size: A A A
  • Print
  • Email
  • Facebook
  • Tweet
  • Share

Designate Visited and Unvisited Links

Document Type: Standard


Content:

Link behavior:

Whether visited or unvisited, all links must be underlined at all times. Link text should be underlined lightly and increased in emphasis (bold) upon hover and/or keyboard focus.

To designate unvisited links:

  • When typical black text on white background is used, HHS must use the web-safe color of blue for text link color (#3333FF). Web-safe colors are those colors created to ensure that all computers/mobile devices can display the colors correctly. For more information see: http://websafecolors.info/. (exit disclaimer).
     
  • If the default blue does not fit within the overall design palette, or links are contained within a non-black/white color scheme, HHS may use a suitable alternative web-safe color (see above) that meets accessibility contrast requirements.
     
  • If using an alternative web-safe color, the text color must be at or above the intensity and contrast level of 3:1 compared to surrounding text and at or above 4.5:1 compared to the background when colors are tested by a color contrast checker such as the Paciello Group Color Contrast Analyser (exit disclaimer) or WebAIM Color Checker (exit disclaimer).

To designate visited links:

  • When typical black text on white background is used, HHS must use the default purple link color (#6600FF).
     
  • For links that point to the same target, all links on the page or set of related pages must change color to the default purple once the target site has been visited. 
     
  • If using an alternative web-safe color, the text color must be at or above the intensity and contrast level of 3:1 compared to surrounding text and at or above 4.5:1 compared to the background when colors are tested by a color contrast checker such as the Paciello Group Color Contrast Analyser or WebAIM Color Checker.
Note: HHS requires all text (whether linked or not and regardless of size) to have at least a 4.5:1 contrast ratio in compliance with WCAG 1.4.6 (AAA).

Reason:

Reasoning: 

WCAG 2.0 requires links be distinguished by a method other than color. Having link text with a 3:1 contrast difference from surrounding text is sufficient when a visual indicator, such as an underline, appears on focus. However, having the indicator always available maximizes link accessibility.
 
Link colors help users understand which parts of a website they have visited.  According to several studies, providing this feedback helps improve users’ speed in finding information. In addition, the blue/purple color convention and underline behavior is considered a common experience for users on the Web.  By following long understood conventions, we reduce users’ confusion and improve their overall success rates.

Exemptions:

Navigational elements of the site are exempt from the visited-link color modifications. These areas include: main/primary navigation elements, their respective dropdown menus, left/local navigations, global navigations, and footer links. As navigational elements of the site, color modifications in these areas may become distracting, as well as unnecessary for users wishing to revisit these areas. 



Sources: