Readability wants you to read comfortably— anytime, anywhere. But what if you’re colorblind?

Readability

Readability

Readability wants you to read comfortably— anytime, anywhere. But what if you’re colorblind?

Readability offers you a clean reading experience by stripping webpages from any distracting elements like ads, sidebars and navigation. You can convert any webpage into a Readability version and read it in your browser on a laptop or desktop. They also offer iOS and Android apps to take your articles with you.

Articles are stripped of any markup and converted into a consistent clean design. In this design the text-links are red without an underline. This poses a problem for the colorblind, especially the protan- (red) types of colorblindness.

They have difficulty distinguishing between the black of the main text and the red of the text-links. This results in the colorblind having trouble spotting a text-link in a body of text. The protan- (green) type colorblind have the same trouble, though somewhat less serious.

There are websites that do not include the default underline on text-links. This is often not a problem as long as a good contrasting color is used, the contrast between the links in readability and the text is not big enough though.
The desktop version of the Readability reader view does offer a underline on hovering over a text-link, the colorblind can use this functionality to quickly recognize a link if they are hovering over it.

I say if, because even if it does add some clarity and reassurance that you’re indeed dealing with a text-link it still does not address the problem of finding and recognizing links in a body of text. As a result, the colorblind will more than often just not spot a potential link, they’ll just won’t know it’s there.

However, the real problem lies with Readability on mobile devices. Mobile devices like the iPad or a smartphone do not have a mouse, no mouse means no hover function. Spotting a link is still difficult, but confirming that a link is also difficult due to the lack of feedback.

beforeafter

To make matters worse, reading from a mobile device also exposes you to a wider and stronger variety of external influences.
Screens are smaller, saving your battery with a lower brightness reduces the contrast between red and black, the same goes for the reflection of sun- or other bright lights. Even vibrations and noise from the train you’re on tend to also make it harder to focus on the app.

Key here is communicating with information other than color. Solutions lie in increasing contrast (pure bright red: #ff0000 instead of dark red: #9C0001), underlining links or adding an icon next to it like wikipedia does with its external links.

A special colorblind mode might be a last option if changing the design of text-links does not fit within the default style.

Update

The CTO of Readability just messaged @wearecolorblind on Twitter:

*

Comments

  1. Lennart Goosens

    When I was running a science fiction web site, a fellow webmaster from a now defunct site on Stargate proudly showed off his new design to me. When I commented on the somewhat unfortunate choice of colour for the links in the body text, he shrugged. I was obviously exaggerating.

    The background colour was grey. The text was a light creamy sort of yellow, that nicely contrasted, with the background at least.

    The links weren’t underlined (except when you hovered over them), and were the exact same colour. I don’t think he ever noticed or cared.

  2. Web Axe

    Great article. In web design, I always recommend, and prefer, not removing the underline in text links in main body content. @WebAxe

  3. Pete Fairhurst

    As a stop-gap solution, have you tried enabling the “links as footnotes” option in Readability?

    This removes all hyperlinks from the main copy – leaving behind a bracketed numeral – and instead lists them all after the article.

    Whilst I imagine this isn’t ideal, might it at least remove some of the guesswork (and no doubt frustration) for colourblind users?

  4. Richard

    When you say solutions lie in increasing contrast, I presume you mean use the dark red #9C0001 instead of the pure bright red: #ff0000 because the dark one has much greater contrast (at least against a light background). The way you have worded it implies you mean the other way round.

    • Julia

      Hello, Richard.
      I think the article refers to contrast between words, not background.
      The bright red contrast better with black typography. You can try closing your eyes a little bit, and you will notice that the dark red can be confused with black.