A Discussion of Inline Links (Theory and Practice)

[Myndex]

This post is a response and extension to some Twitter comments on the subject of in-line text links, and differentiating between visited and unvisited links, and also considerations to avoid negatively impacting readability of body text.

Inline Color Link Discussion

A brief discussion of color inline links, the longer supporting material is below.

As the needs of readability and distinguishability are separate visual and cognitive processes, they each require separate considerations. Readability requires ample luminance contrast, disregarding color (hue/saturation).

• Luminance however, is not terribly useful for "information coding". Some FAA standards limit luminance for coding to three levels (i.e. white grey black).
• Color as in hue, and to a lesser extent saturation, is much more useful for information coding, but presents several challenges for accessibility.

In Practice

Assuming a light background (such as #e4e4e4 or lighter) and dark text (nominally black), then indicating an inline text link with blue, and a little green (#003aaa), provides a link that is both clear to those with CVD with minimal impact on overall readability. This does not differentiate to visited and unvisited though.

With that same color scheme, setting visited links to #770080 maintains readability for the link words, and provides distinction from the black text and also the blue text. Deutan and protan will see the visited links as more of a dark grey.

Here's an example (slightly different color scheme) with standard vision upper left, and then simulations of various color insensitive vision types.

But 3:1 tho

Set aside thoughts of "contrast ratios" here. The oft cited contrast ratios such as 2:1, 3:1, 4.5:1, or 7:1 typically relate to readability of text or non-lexical decoding (icon recognition).

Discrimination and differentiation/comparison use different areas of vision and cognitive processing, and literally follow different rules, irrespective of if they have yet been codified in some given standard.

The remainder of this document summarizes these differences:

---

This post is part of a work in progress toward a more complete whitepaper on the subject.

---

When Readability is King

Focus of the opinions and discussions in this post place the importance of readability as one step higher than that related to simply distinguishing inline links. That is, keeping in-line links indicated at a level so that they don't impair reading to any great degree. For instance, using underlines for links when they are not being hovered over can in some cases introduce crowding and negatively impact the ease of reading of a particular block of text.

SIDE BAR: Readability Contrast versus Distinguishability Contrast.

First, contrast needed for readability is distinctly different than that needed for mere differentiation. See my white paper draft on this.

Second, WGAC 2 contrast math and methods are not fit for purpose, as I pointed out three years ago in WCAG issue #695. I encapsulate why in "Why APCA" and also in the article "A Contrast of Errors".

For our discussion here, in terms of distinguishing, the WCAG "3:1" is not instructive or relevant. 1.4.1 does not specify a ratio, and while mentioned in one of the understanding documents, it is without scientific support. SC 1.4.11 mentions 3:1, but again, the evidentiary support is not there (the cites are a couple informal emails that fail to encompass the nature of human visual contrast perception).

SIDE BAR: Human Vision Contrast Needs

• Weight, Size, or Color: human contrast perception is most strongly driven by spatial frequency (weight/size) this relates directly to size and weight of text.
  • The amount of luminance (lightness/darkness) contrast needed for text is a result of the size/weight of the font, and related metrics.
  • For smaller thinner (higher spatial frequency) elements, we require substantially greater luminance contrast.
  • From large to small, in the visual range, we need lightness/darkness contrast increased over 20 times.
• Legibility contrast: the threshold of just noticeable difference where we can accurately make out a large letter (think eye chart).
• Readability contrast: for effortless, fluent, reading, we need substantial lightness/darkness contrast, particularly for columns of body text.
  • See APCA use cases for the current working outline of different contrast needs.
  • Per the research of Bailey/Lovie-Kitchin, the critical contrast for fluent reading is at least ten times the legibility threshold, and preferred is twenty times.
  • They found the needs for "spot" readability to be about three times the threshold.
  • Per G.Legge, these critical factors are somewhat correlated to impairment.
    • Standard vision threshold is about 1% to 2% contrast (for LARGE fonts) implying 10% to 20% as being fluent for large fonts.
    • Impaired vision threshold could be 3% to 5% (impaired) with 5% to 10% being low vision to severe impairment.
    • Smaller/thinner fonts increase the JND threshold, and therefore increase the critical levels.

Distinguishing versus reading.

• Differentiation contrast: the differentiation threshold is a more complicated matter, as it involves not only the color difference, but also the spatial difference and relative context of the color/element/text etc.

This image demonstrates the issue. Both yellow dots are emitting the EXACT SAME "colors" from the monitor #d18600, and the grey squares each is on are also identical #717171 . But because of the context, they look distinctly different.

What we learn here is that we need very little contrast for two adjacent colors to distinguish shape, such as the edge and side of the square platform. But we also learn that contrast alone can not define perception of differences without knowing the specific context.

This last point is important. While good readability requires high luminance contrast because text is small and thin, this same consideration does NOT apply to other stimuli, especially non-text.

The myth that "everything has to be 3:1 or more" is false.

And 1.4.11 is reciting "facts not in evidence" and is not supported by science, and substantially misunderstands the nature of visual perception with and without impairments.

TRUE: For small thin text to be readable, it needs high luminance contrast against the adjacent color (background).

HOWEVER: What instructs the neurological processing leading to best fluent readability of small thin text does not necessarily apply to other stimuli.

In the case of inline text links, they are not adjacent colors (just nearby colors, though visited/unvisited links may be distantly separated), and so long as the colors maintain readability against the background (the primary goal) then the secondary goal of distinguishability is not terribly challenging, as will be discussed later in the color section.

For colored link text, while maintaining readability contrast, the first key is to make the unvisited links "distinguished" from the non-link text—this is fairly trivial. The second is to add the optional "visited" distinction, and then for that to be distinguishable by various color insensitive types, and also to still maintain the same readability contrast.

An important realization is that the "3:1 contrast ratio" does not apply to differentiation in any real way. If the text is black (or white for dark mode) adding color as in hue will also affect luminance, and for differentiation in close comparison. The notion that there must be 3:1 between each kind of link color and the BG and the non link text is not actually possible without destroying readability (if using correct math) . If using the "wrong math" of WCAG_2, it might be "possible" with dark colors (because the math is wrong) but not helpful.

There is not enough "available total contrast" in an sRGB display for "everything" to be 3:1 and 4.5:1 apart. Fortunately it does not need to be.

The in-line link dilemma

The most central, most unique, content aspect of the web is that of inline links in text—expanding the scope of mere reading into that of information-on-demand. But it also presents a problem: how best to indicate relevant links, inline with the text, and not harm readability.

Underlines

Underlined text is one of several common design solutions—so much so that underlining text simply for emphasis is now discouraged. But a problem with underlines for links in columns of body text is that they introduce crowding and distractions to the smooth movement of the eye over the text, and can negatively impact the readability.

In this case, if the links are sparse and short (three words or less), the problem may not be significant. On the other hand, with link-heavy content such as Wikipedia, underlined links are a significant interference with readability. Wikipedia recognizes this with several user selectable styles, some of which avoid underlines, using color or other methods to indicate links.

Other indicators (bold, sup ref, etc)

Outside of underlining, it is conceivable to use indicators such as a^link superscript link,
a footnote style reference link^[1,2], or widget^↗️. Wikipedia uses a small superscript icon for offsite links for instance.

Bold text with nothing else (no change in color) is problematic as it then interferes with using bold for emphasis, and is less intuitive than underlining, and still impacts readability. The same can be said of using italics, or perhaps worse, changing the font family or using all upper case, etc.

Hybrid and Hover States

The reality is even underlining, by itself, is not always sufficient to define a link—some combination of link indicators are often used. But again, "throwing more junk on the pile" is likely to impact best fluent readability.

Hover states can be helpful to define links, especially in the cases of dense links where several different links are all in the same sentence. Unfortunately, hover states are of little utility on most mobile or touch screen devices. This is not to diminish the importance of hover states though to indicate keyboard focus visible. But hover states can't be relied upon as the sole link indicator.

Color Section

Color (Hue and Saturation)

The other most common design solution is to apply a differentiating hue to the link text. A common practice for dark text on a light background is blue for unvisited links and purple for visited links. This approach is not without its own concerns.

• To what degree do colors, like blue or purple on text, impact readability?
  • If the blue or purple is too bright, it can be distracting, and cause glare.
• To what degree can those with color insensitive vision distinguish between visited and unvisited links?
  • Deutan or Protan types will see purple more as a grey, but usually no problem seeing a blue.
  • Tritan might need a small amount of green added to the blue, to make it distinct from black.
• What about "dark mode" ? We can't use pure blue in dark mode for text, nor pure red for that matter. What then?
  • Pure blue (and pure red) can not be used against black or very dark colors. Pure blue needs to always be the darkest color.
  • In dark mode, with white or very light text, a useful unvisited color could be #aaddff with a visited color of #ffbbcc.

SIDE BAR: Hue/Sat (color) vs Luminance

Luminance, as in lightness/darkness/brightness, is processed at the beginning of the visual cortex (V1). This is where luminance contrast, edge detection, and fine details are filtered before further processing. Text (within a range of contrast and sizes) ends up on the left of the brain in the VFWA (visual word form area) where letter pairs and whole words are fed to lexical processing.

Color as in hue/chroma (i.e.saturation) is processed later, V4, V8, and ultimately end up as part of a different final processing than text, such as in object recognition, or other differentiation.

Spatial issues: Luminance contrast can detect small thin items, but color contrast operates at a much lower spatial frequency, and is most discernible with larger elements. That is, it is easier to detect small hue or saturation changes on large ares of color, than small thin colored text for instance.

AS SUCH:

• When we are concerned about readability, we are concerned about luminance contrast, and this is true for all vision types.
  • It is important to note that for most color deficient vision types, especially the more common ones, their luminance contrast sensitivity is essentially "normal", like standard vision.
  • The one important exception is pure red and protan types, as discussed below, nevertheless, pure red against black is bad for readability even for standard vision.
• When we are concerned about distinguishing objects (non-lexical) or information coding, color as in hue and saturation plays a much bigger role.
  • This presents the main accessibility issue for those with CVD.

SIDE BAR: Color insensitive vision

Color vision deficiency (CVD, often inaccurately called "colorblind") means the individual sees less than the standard gamut of human color perception.

It is convenient (though not accurate) to think of color vision in terms of the color primaries on an sRGB computer monitor: Red, Green, and Blue. Color insensitive translates to difficulties "seeing" or distinguishing one (and in rare cases more) of these primaries, and also the colors that are mixed using that "missing" primary.

In the image below, standard vision is upper left, then clockwise from most to least common CVD types, deutan (green/red insensitive), protan(red insensitive), tritan(blue insensitive):

What To See:

First, you'll notice that both deutan and protan wheels look very similar. This is because the "green" and "red" sensitive cells (called cones) in the eye overlap almost completely in terms of spectral response. So if the "green" (M or mid-wavelength) cones are missing, the "red" (L or long wave) cones easily pick up the slack. In fact, both the green and red cones have a peak response in colors we call green. But the "red" cones respond farther down into much longer wavelength light.

Notice then on the protanopia wheel, that the red area at the top is much darker than with the deutan. This is because the deutan has plenty of red cones which are still sensitive to green, while the protan has plenty of green cones, which are much less sensitive to red. The red area of the wheel does not go black for the protan on an sRGB display as the "red" primary of the display is actually a red-orange, and overlaps into the green cone response. (Note: some new technologies such as UHD separate the red cone farther, which the protan would see as black).

Then see the tritan, missing the blue (S or short wave) cones. Notice though a bit darker, the blue area is not black, because the red and green cones overlap into the blue range, and the sRGB blue primary overlaps to lower wavelengths as well.

Red and Green and Luminance all over

It is often said that deutan and protan are "red/green insensitive" and have trouble distinguishing red and green. The reality is more complex. See also the article What’s Red & Black & Also Not Read?

Take a look at the following image. The test pattern is full red #ff0000 next to full green #00ff00 and below that is full yellow #ffff00 (the plus and equals symbols are full blue #0000ff)

Take a look the protan, the lower right. Notice that it is not red and green that are indistinguishable, but green and yellow.

While it is technically true that protan and deutan have difficulty distinguishing red from green, that is mainly true when the red and green are of the same luminance.

But that is rarely the case. Regardless of the vision type, including "normal" or standard vision, our sensitivities to light wavelengths are decidedly centered around green. The luminous efficiency function that defines the spectral response of human vision is a curve that peaks in green with much less luminance in red, and even less in blue (in some color models, blue can have a negative effect on luminance).

For sRGB monitor primaries, the calculated percentages are roughly 71% green, 22% red, 7% blue, these figures are based on our central 2° of foveal vision (CIE 1931 standard observer). Our peripheral vision is weighted more towards blue as that is where most "blue" cones are located, so for a wider field of view the percentages are different.

SIDE BAR: Color interference

Section to be written on chromatic aberration, glare, and related issues. (This applies more to dataviz)

• Different wavelengths of light "bend" at different angles through a prism or lens.
  • Blue (very short wave) and red (very long wave) have the greatest difference in terms of the "bend" angle.
  • Nature compensated by keeping the blue cones in the periphery, and not in central vision.
  • Red and Blue as adjacent colors can have a "shimmering" effect.
• Purple is made up of red and blue light, however, against a white background which is red, green, and blue, the shimmer effect may be less noticable.
  • Some individuals may find very bright magenta like #ff00ff difficult to look at.
  • Desaturating by adding green and lowering the red and blue reduces the problem #bb66bb
• Blue figures prominently in glare effects.
• Aging ocular media also contributes to glare and scatter.

SIDE BAR: Minimum discrimination value (Experimental)

If you want a basic idea of a minimum delta for differentiation/comparison, APCA Lc 10 to Lc 15 may be a useful minimum, this statement is experimental at this time.

---

[Myndex]

Achromatopsia

Achromatopsia frequency,... is around 1 in 30000.

• Rod only achromatopsia is about 1 in 33,000 to 40,000 (rough estimate).
• Blue cone monochromacy is about 1 in 100,000. Much like rod only, but they have S cones as well.

In both cases they:

• Have severe photophobia
  • Must wear sunglasses or dark tinted contacts
  • (70% tint for one of our study subjects)
• Have low visual acuity
  • 20/100 (aka 6/30 or 2/10, or LogMAR 0.7 for one of our study subjects)
• See monochrome (true color blind)
  • Mostly capable of seeing the GREEN primary of a display, and
  • very limited perception of the red or blue primaries.
• Mode: dark was preferred.
  • Subject preferred black bg #000000, and
  • letters that were visible all had substantial green #00bb00
    • This makes sense as rods are mainly sensitive in the range we'd call teal.
  • Worse red perception than protanopia.

Due to the co-morbid conditions, they need assistive technologies, at a minimum very dark sunglasses, text must be large, and good luminance contrast (good luminance contrast requires much green, as green is the primary component of luminance.)

We have not tested with underlines, but I'd venture that if he prefered underlines it not due to color issues but due to the low vision issues.

On the color issues: in Dark mode, the pure blue that GitHub is using for links is utterly inaccessible. In his case, so dark it would not matter if there were an underline because it would not be perceived just as the text would not be readable.

In light mode, he'd "probably" want an underline because the blue and black would be difficult to distinguish.

Just to get an idea of what an achromatope sees, here is a plot of normalized rod (and cone) responses, The dotted teal curve is the rod response (sensitivity relative to spectrum).

As a result, even sRGB red is not seen at all. In the following charts, showing a dark mode and a light mode for standard vision (top) and rod only achromatopsia (bottom).

So a few things to point out here;

1. The low vision and photophobia is a significant part of this impairment.
   • The LowVis/Photophobia is more debilitating than the hue insensitivity.
   • The need for underlines is more related to this low vision component.
2. Notice the dark blue "3" of the top row of standard, and notice how it just vanishes?
   • The implication is that achromats need links NOT in blue, but JUST underlined.

I am going to repeat:

3. The BLUE Github is using for link COLOR is TOO DARK in dark mode.
4. WCAG 2.x can not be used to calculate dark mode.
   • That "link color triangle" isn't meaningful because the underlying assumptions are flawed.
   • APCA or Bridge PCA far exceed WCAG for dark mode (all modes actually, but that's another issue)
   • This is still a problem on GitHub for dark modes.
   • The only mode I personally can use here is Dark High Contrast, as it's the "not as bad as the others" choice.

Over Kill Bill

Let's examine some thinking here and illuminate some considerations regarding links.

CONSIDER:

Right now for regular dark mode, there is white non-link text and dark blue link text, and with underline this means that from the normal text to the link text you have:

Markings in Dark Mode

a) LUV saturation from near null 0.09 way up to 1.97 (chroma 8 to 108)
b) Near null hue from #e3edf3 to the dark blue #3181f7 (hue 255°)
c) CIE Lightness L* 93 down to an L* of 55
d) Luminance 84 Y down to 23 Y
e) Against a #131723 BG, perceptually uniform contrast is $Lc\ -94$ (too high¹) down to below fluent-text cut-off at $Lc\ -36$
f) The WCAG2 is 15:1 to 4.77:1 (non-uniform and therefore lacking meaning²)
g) An underline is added.
h) Bonus: in my Github documents, I often make links bold, or italic, or bold & italic.
i) Double bonus round: other ways are with a "reference icon" like wikipedia, or ref number, or using a different font family for the link text, or changing the letter aspect ratio or spacing, changing shadow, changing/adding a color overlay, or alternate bg etc.

The Objective:

To differentiate the link text from the non-link text, with minimal interfereance to other tasks.

This is actually a pretty low bar. Even significant impairments exhibit significant sensitivity to and ability to discriminate small variations in adjacent elements. This is different than the contrast level needed for reading, and letter and word recognition in the VWFA/lexical processing³.

Looking at the above list, except ignore (i) to keep it simple.

1. ab — a strong color difference from desaturated to saturated blue.
2. cdef — a very big change in lightness, luminance, or lightness/luminance contrast.
3. g — an underline of some sort.
4. h — bolding/italicizing the link text (all of which affect visual contrast)

That is four distinctly different things. Do we need all four? No, of course not. Do we need three? Also no, yet when you turn on underlines here, you are getting the first three. All three of 'em.

The more things you have in a layout, the more cluttered the layout becomes. Link marking and readability need to be balanced for the given use case and intended purpose. The prominence needed for signaling any given link is an important design choice. And it is a design choice for the author to consider, as part of creating the visual hierarchy for guiding the user through the given content. Blanket "let's stick underlines because retro" is not per se accessible.

---

Summary

This Github thread was very useful reading. In particular, responding to that thread helped to exercise and focus my own thoughts on the matter.

Thank you for reading,

Andy

Andrew Somers
_{Director of Research}
^{Inclusive Reading Technologies, Inc.}
_{W3C WAI AGWG Invited Expert}
^{WCAG 3 and Low Vision Task Force}

Footnotes
¹ _{We are evaluating dark mode maximum contrasts, with $Lc\ -90$ for small text, $Lc\ -85$ for medium and $Lc\ -75$ for >36px bold.
      We do not find a max contrast for light mode on SDR displays, though we are working on max luminance for some scenarios.}
² _{WCAG 2 substantially overstates contrast with dark colors, in this case the blue 4.77 is overstated at over 200% .}
³ _{Despite WCAG2 slapping the ol' 3:1 on whatever SC is tangentially related to vision, 3:1 is not well supported by science,
      particularly for high spatial resolution elements like small text and thin lines.}