Increase contrast ratios in color theme

nbudin commented 5 years ago

Many of the default Bootstrap theme colors lead to inaccessible elements in terms of color contrast ratio. WCAG AA recommendation is at least a 4.5:1 contrast ratio between foreground and background colors. We're sitting at around 3.9:1 for default links on white text right now.

If we come up with some reasonable defaults, we could release a Github repo containing our recommendations so that others could easily take advantage of it too.

lisefrac commented 4 years ago

Sticking this here for my own reference: https://webaim.org/resources/contrastchecker/

lisefrac commented 4 years ago

So, I'm looking at the U site on my local as an example:

The default link color is #007bff, which I'm assuming is the default link color @nbudin is referring to, since it gives the same ratio he mentions.
By lowering the blue digits from "ff" to "bb" (#007bbb, option 1) we can get up to 4.61:1 contrast, which meets WCAG standards. "#007baa" (option 2) will get us 4.75:1, if we feel like being overachievers.
We can also mess with the green bits to get "#002baa" (option 3) which gives us a whopping 10.9:1 contrast, but then the link starts to look similar to the copy, which is a different contrast problem (is that a contrast problem we want to solve here? It doesn't quite seem like the same problem)
Either way, the default link color is set in _reboot.css, which appears to be a fork of normalize.css, so I assume we would want to fork it even further with the WCAG-compliant colors.

Before I make these changes, does anyone want to weigh in? (Or should I just use my best judgment?) Please see screenshots below:

Option 1:

Option 2:

Option 3:

lisefrac commented 4 years ago

gah, and I totally named these wrong; please hold

lisefrac commented 4 years ago

Okay, screenshots should be correct now. Let me know if you have an opinion, Intercode team :)

lisefrac commented 4 years ago

Tagging @marleighnorton

nbudin commented 4 years ago

I definitely want to hear from others as well, but both options 1 and 2 look nice to me. I agree Option 3 is a little too similar to the plain text color, and also the hue shift in it bothers me a bit.

marleighnorton commented 4 years ago

For me, all the link colors are clear enough, but I wonder if color blind folks would have issues. Either looking too similar to the text or too similar to the grey in "Ultraviolet." Hmm.

Is hover underline still a thing for links, or am I stuck in the 90s?

lisefrac commented 4 years ago

I believe those links do have an underline on hover — but I’ll double check when I’m back at my computer. (I should have thought to hover when I took my screenshots!)

@natbudin, do happen to know if the WCAG contrast guidelines take into account color blindness? I sorta assumed they did, but I don’t know enough about how color-blindness works. (Although I believe it’s usually keyed to red-green, and we’re only changing the blue bits of the hex value, except for the last option).

Worth noting, we could also make the links stand out more by bolding them. Maybe not to be addressed in this ticket.

Also worth noting, I think the hover color is adaptive based on the color of the link. So I’ll want to check the contrast there, too, before we call this done.

Sent from my iPhone

On Aug 2, 2020, at 4:11 PM, marleighnorton notifications@github.com wrote:

For me, all the link colors are clear enough, but I wonder if color blind folks would have issues. Either looking too similar to the text or too similar to the grey in "Ultraviolet." Hmm.

Is hover underline still a thing for links, or am I stuck in the 90s?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.

nbudin commented 4 years ago

I've just taken some colorblindness-simulated screenshots using Color Oracle. Here are the results:

Deuteranopia	Protanopia

Tritanopia	Grayscale

Looking at these, I feel like Options 1 and 2 are both reasonable with any of these filters, but Option 3 is a little difficult to distinguish from the body text particularly in grayscale.

lisefrac commented 4 years ago

Nice research, @nbudin !

Given that, I think I will probably move ahead with Option 1, unless anyone wants to weigh in. It seems slightly better than 2 under the greyscale and protanopia filters, I think.

marleighnorton commented 4 years ago

Works for me. Option 1 it is!

nbudin commented 3 years ago

Since we upgraded to Bootstrap 5, this has now actually been fixed for us by the framework! 🎉

neinteractiveliterature / intercode

Increase contrast ratios in color theme #1945