Fix #331 Meet accessible contrast ratio

[thadguidry]

Fix #331

• Adjusts color ranges for Infirma to meet WCAG AA 4.5:1 contrast ratio
• Adds slightly lighter ranges for dark theme to meet as well.

[netlify[bot]]

✅ Deploy Preview for openrefine-website ready!

Name	Link
🔨 Latest commit	6359c43a573bfc2f2481ec3ba5cdb3fd6828f889
🔍 Latest deploy log	https://app.netlify.com/sites/openrefine-website/deploys/664da1969de15d0008915e3c
😎 Deploy Preview	https://deploy-preview-332--openrefine-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wetneb]

Thanks for this! It's hard to get an overview of all the color changes but for the one of the download button, the new color strikes me as significantly away from the color palette used in the logo. For that color, how about using #0078ff, which is the darkest shade of blue in the logo? And leaving the other ones untouched? Or if you want to adjust them, perhaps they could only be made darker/lighter, so that the shades of blue remain consistent with the ones from the logo. For instance, there are a couple of colors starting with #00… indicating that they have no red component, so I would expect that when making them darker, that component remains #00….

[thadguidry]

@wetneb Slightly better now? I've pulled the range over to more closely match what we had before. I.E. the color matrix is just slightly darker blues and only --ifm-color-primary-darkest fails just slightly the contrast test (but it's close enough).

[wetneb]

I like it better, thanks! Let's leave some time for others to chime in. Would you be able to add small screenshots of some sample areas with noticeable color changes?

[thadguidry]

There's also a few other changes that I think are generally necessary after this... For instance, our <a> links are really hard to spot as links within paragraphs! That's where I think we can customize the CSS to have them as font-weight: bold;

Also when hovering over certain types of elements like <button>s etc. I don't think it's contrasting enough now after this color change? There also, we can just tweak the CSS for those kinds of elements that just need a slight tweak for hover { background-color: xxx } style changes.

Another new issue for those kinds of small tweaks.

[thadguidry]

Darker Blues for better contrast than original lighter blues