Increase visual contrast of text to improve readability

[d2s]

Increase visual contrast of the text & links to make them easier to read.

Quick visual test with Pixelmator:

Related blog post How the Web Became Unreadable from Kevin Marks explains why websites should first focus on readability:

“… as more of us switch to laptops, mobile phones, and tablets as our main displays, the ideal desktop conditions from design studios are increasingly uncommon in life.”

“My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.”

Main point is focus on faster communication.
If text is difficult to read, it is slowing down the usability of the application.

There are examples of more effective type scale that focuses on different font sizes instead of visibility of text colour.

• Smaller text sizes require darker text colour to stay visible.
• For larger (more bold) headings, lighter colour might still work well, since there is bigger visual contrast between the text and surrounding elements.

[meganft]

hi! do you still need help with this?

[andrew]

@meganft Hi Megan, yeah some help with this would be great 👍

[meganft]

Can you specify exactly where the issue for this is? Is it here? It's a bit different than the above screen shot so I want to make sure!

[andrew]

Yeah the committer graphs are the worst offenders, I think @d2s tweaked the contrast on his screenshot to show how clear it should be if the contrast was higher.

I think the grey text needs to be black and the blue text "more" blue if that makes sense?

Alternatively we could change the grey bar background to be a thin bar that runs along the top, maybe only a few pixels high, instead of being the background to the test?

[d2s]

Yeah, I took a screenshot of the page… 📷
just to quickly mock up what it could be look with more contrast.

Colour palette could be improved in the future, of course,
but lets just first focus on improving readability. 😄

[andrew]

Moving this to the Backlog as we'd still like to implement it but can't see that happening in the near future.