Color Contrast

There is a particular shade of blue that we recognize as the default hyperlink text color.  The hex code is #388AC3 and looks like this:

Sample Link Text hex color #388AC3

While this color is identifiable to the majority of users, some users who cannot see color or who have low vision are unable to discern it.  In other words, the color contrast is not high enough.

The standard for adequate contrast levels is 4.5:1, a ratio of foreground to background colors.  Link text color #388AC3 only has a ratio of 3.76:1 on a pure white background (#FFFFFF).  The ratio is even lower on darker backgrounds, making it impossible to see.

An easy fix is to change link styling to make the color contrast higher.  But how can we identify a color with a high enough contrast to our background?

There is a wide variety of color contrast checkers.  We recommend using Color Contrast Pal, Color Contrast Checker, or WebAIM’s Color Contrast Checker.  Color Contrast Pal offers to auto-adjust the foreground or background color to meet the 4.5:1 standard.  Color Contrast Checker provides a color wheel to help you identify complementary colors.  WebAIM’s Color Contrast Checker shares an explanation of why adequate contrast is important and clearly shows how the foreground and background appear when juxtaposed.

A good alternative for link text color is #174FAB, which, while a similar shade of blue, has a contrast ratio of 7.58:1 on a white background (#FFFFFF).  It appears like this:

Sample Link Text hex color #174FAB

Link text styling can be updated through CSS.