Improve styles for accessibility

[victorlin]

Considerations for dyslexia:

Many dyslexic users are sensitive to the brightness the high contrast colors cause.
To avoid this, use an off-white color for your background, like light gray or tan. You can also use a dark gray for your text instead of pure black to cut the glare even more.

Many text elements, such as paragraphs in blog posts, use a thin dark gray font on a pure white background:

Some of those factors could impair readability. Adjusting with color: black font-weight: 400 background-color: #f5f6f7 is arguably more readable (and maybe only a subset of those changes is sufficient):

These styles should be considered simultaneously:

• Font color

  • This is set to #333 for some elements.
  • It is unset at the base level, meaning the browser default is used.

• Font weight

  • We are mostly using Lato 300 and 400.

• Background color

  • This is unset at the base level, meaning the browser default (transparent) is used.

  • Note: Some elements rely on transparent for implicit inheritance. This means setting a background-color at the base level needs work to remove the implicit inheritance. Example of what happens when setting a base background: white:

    

• (others?)

Links

• Slack thread on email

[tsibley]

[edit: I want to make super clear that any curtness and aggressive tone in this comment is aimed at our styles and not at the particular words used or the yellow fever dataset or anyone in particular. I wrote it while off the clock and annoyed at how hard it was to read this text, which I wanted to read! 🙏]

There is some text on nextstrain.org that's just too damn hard to read. Not sure if it'll come thru well in a screenshot, but this was very difficult to get thru and comes off as needlessly like "fine print" that I'm not intended to read.

https://next.nextstrain.org/yellow-fever/genome?d=none

[genehack]

There is some text on nextstrain.org that's just too damn hard to read. Not sure if it'll come thru well in a screenshot, but this was very difficult to get thru and comes off as needlessly like "fine print" that I'm not intended to read.

It is unclear to me if this critique is of the presentation (i.e., the CSS styling), or of the content (i.e., the actual text), or both.

As always, suggesting some sort of fix for the perceived problem would be helpful — both as a starting point for conversation around a fix, and as a way to indicate what sort of problem we're talking about. For example, if it's the styling, perhaps something like this — changing the font-weight from 300 to 400 — would be helpful?

If it's the content, suggestions to make it more readable are welcome; I wrote it based on reviewing several description.md files from existing datasets and pitched it for the same tone.

[tsibley]

We're talking about the styling. This is an issue about the styling. The issue talks about font weights, text colors, and background colors. This is what I'm also talking about.

That the screenshot is of text you wrote is merely coincidental (not personal!). I was trying to read it, found the styling hindered that for me, knew we had an open issue about these styles, and so came here to record a concrete example of the issue.

[genehack]

We're talking about the styling. This is an issue about the styling. The issue talks about font weights, text colors, and background colors. This is what I'm also talking about.

Sorry, I was responding to what was in the email I clicked on, and I didn't appreciate the existing context. Thanks for expanding that, apologies if my reply was snarky.

Practically speaking, is there any reason to not s/font-weight: 300/font-weight: 400/g across the whole site and see where that gets us?

[tsibley]

Practically speaking, is there any reason to not s/font-weight: 300/font-weight: 400/g across the whole site and see where that gets us?

Not sure! That feels like it might make some parts look janky, but @victorlin or @jameshadfield might have a better idea without having to go digging.

I think Victor's suggestions at the top to consider all three styling properties (weight, color, bgcolor) are good. His example screenshots are from a blog post, which has a different current styling than the dataset footer text I screenshotted. The footer text is Lato 300 #888 on white. Changing weight to 400 would help a lot:

[victorlin]

+1 for changing 300 to 400 in most places. Maybe not for some text in the footer such as

nextstrain.org/static-site/components/footer/index.tsx

Lines 54 to 67 in a0cde63

	<p className="wideParagraph">
	This work is made possible by the open sharing of genetic data by
	research groups from all over the world. We gratefully acknowledge
	their contributions. Special thanks to Kristian Andersen, Josh
	Batson, David Blazes, Jesse Bloom, Peter Bogner, Anderson Brito,
	Matt Cotten, Ana Crisan, Tulio de Oliveira, Gytis Dudas, Vivien
	Dugan, Karl Erlandson, Nuno Faria, Jennifer Gardy, Nate Grubaugh,
	Becky Kondor, Dylan George, Ian Goodfellow, Betz Halloran, Christian
	Happi, Jeff Joy, Paul Kellam, Philippe Lemey, Nick Loman, Duncan
	MacCannell, Erick Matsen, Sebastian Maurer-Stroh, Placide Mbala,
	Danny Park, Oliver Pybus, Andrew Rambaut, Colin Russell, Pardis
	Sabeti, Katherine Siddle, Kristof Theys, Dave Wentworth, Shirlee
	Wohl and Cecile Viboud for comments, suggestions and data sharing.
	</p>

[genehack]

Practically speaking, is there any reason to not s/font-weight: 300/font-weight: 400/g across the whole site and see where that gets us?

Not sure! That feels like it might make some parts look janky, but @victorlin or @jameshadfield might have a better idea without having to go digging.

I think just getting rid of the font-weight: 300 stuff is going to be a readability improvement across the board. It may lead to us wanting to increase some other weights, to preserve relative weight differences that we think are important, but (IMO and the opinion of my aging eyes) 300 is just too light for anything you want people to read, especially when the contrast difference is smaller than #000/#FFF.