Links with a 3:1 contrast ratio with surrounding text

Link color #3333FF (3.1:1 vs. black)

The following paragraph shows essentially what this blue color would look like to most people, including most people with limited color vision. When color is used, a blue color is recommended because it is affected very little by red and green color blindness (Protanopia and Deuteranopia).

In the early evening of 16 December 1997, episode 38 of the hugely popular children’s animation series Pocket Monsters was broadcast over much of Japan on a commercial TV network. The program had around 10 million viewers, and was viewed by no less than 80% of the 7-10 age group in the Tokyo area according to a government survey. During and after the broadcast, some viewers experienced distressing symptoms ranging from nausea and dizziness to epileptic seizures. A wave of emergency calls and hospital admissions suggested a single environmental cause which was soon identified as the animation, and in particular one sequence in which red and cyan colors flashed in an alternation at around 12Hz covering much of the screen area. Before the cause had been pinpointed this sequence was shown on a news bulletin about the incident, resulting in further casualties. Altogether 685 people, most of them children, were hospitalized although most were discharged quickly.

Link color #5E5E00 (3.1:1 vs. black)

The following paragraph gives an idea of what red or green links with a 3:1 contrast ratio might look like to people with protanopia and deuteranopia.

In the early evening of 16 December 1997, episode 38 of the hugely popular children’s animation series Pocket Monsters was broadcast over much of Japan on a commercial TV network. The program had around 10 million viewers, and was viewed by no less than 80% of the 7-10 age group in the Tokyo area according to a government survey. During and after the broadcast, some viewers experienced distressing symptoms ranging from nausea and dizziness to epileptic seizures. A wave of emergency calls and hospital admissions suggested a single environmental cause which was soon identified as the animation, and in particular one sequence in which red and cyan colors flashed in an alternation at around 12Hz covering much of the screen area. Before the cause had been pinpointed this sequence was shown on a news bulletin about the incident, resulting in further casualties. Altogether 685 people, most of them children, were hospitalized although most were discharged quickly.

Link color #5A5A5A (3:1 vs. black)

A very small portion of the population has total color blindness. For these users, a 3:1 contrast ratio would be less usable (no color difference) but can still be seen. For example, try to count the links in the paragraph below. You can see that it is possible to differentiate them from the rest of the text.

In the early evening of 16 December 1997, episode 38 of the hugely popular children's animation series Pocket Monsters was broadcast over much of Japan on a commercial TV network. The program had around 10 million viewers, and was viewed by no less than 80% of the 7-10 age group in the Tokyo area according to a government survey. During and after the broadcast, some viewers experienced distressing symptoms ranging from nausea and dizziness to epileptic seizures. A wave of emergency calls and hospital admissions suggested a single environmental cause which was soon identified as the animation, and in particular one sequence in which red and cyan colors flashed in an alternation at around 12Hz covering much of the screen area. Before the cause had been pinpointed this sequence was shown on a news bulletin about the incident, resulting in further casualties. Altogether 685 people, most of them children, were hospitalized although most were discharged quickly.

Note: The use of color plus luminosity is used in this technique while luminsity alone is used for contrast. This is because this technique is about telling the difference (a noticable difference) between pieces of text whereas the contrast measure is about the readability of the text with its background for different color and vision disabilities.

The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white