Update color contrasts on some elements to improve accessibilty about ml5-website HOT 15 OPEN

Working on those 3 points you mentioned @bomanimc

from ml5-website.

Fully support this plan!

from ml5-website.

I actually have run chrome dev tools(lighthouse audit) to test the accessibility, we are all good for now.
Except for the fake search bar.. will fix it during the weekend

from ml5-website.

Thanks @wenqili !

from ml5-website.

Really love this! I reran the Google Lighthouse report on our site. Here's our position overall:

The last 2% on the Accessibility section here relates to the color contrast on a few of elements:

• Contrast between our "Get started with ml5.js" button and background (likely the issue is contrast on hover)
• Contrast between comments in the code snippet and the background
• Contrast between elements in the footer and the background (likely the issue is contrast on hover)

I'm going to retitle this issue to address the color contrast issues here! May be a great option for a new contributor as well!

from ml5-website.

I pushed a pull request (#177) It improves on a lot of things you mentioned above. Unfortunately the purple you are using, #a256ff, which is mostly paired with white does not give such a great contrast. I left it as it is and am suggesting to think about making it a little darker side wide.
For the button on the start page I changed the hover into a color invert and for hover in the footer I used a text-decoration: underline. Changing the color on hover resulted in A) The change was really subtle and barley noticeable B) The change cause a really bad contrast. I will add screenshots in the pull-request #177

from ml5-website.

Thanks @tlsaeger for catching this issue with the purple (#a256f) on white aspect of our design and branding. I agree that, if we can find a more accessible option (i.e. a slightly darker purple), it could be sensible to change the purple site-wide.

@c-dacanay: Do you have a suggestion on what the best course of action here might be regarding these colors? Asking since I know you have a lot of design experience!

from ml5-website.

Thanks @tlsaeger, @bomanimc! Totally agree.

Switching our brand purple to #722ACF would pass WCAG tests at all sizes, and it's still a rather bright purple: https://webaim.org/resources/contrastchecker/?fcolor=722ACF&bcolor=FFFFFF.

If needed I can also re-create the ml5 logo with this darker purple as well!

from ml5-website.

from ml5-website.

This is great, thanks all!

from ml5-website.

Agreed! Great calls @c-dacanay and @tlsaeger!

I agree that it'd be great to update the logo color to match the new purple. I think I know how to do that in Sketch, but @c-dacanay if you have time to make the logo update, that'd be great (no worries if you don't though!).

@tlsaeger wanna open a PR for these changes?

from ml5-website.

That said our logo should be an SVG that we can change with a CSS fill property. I'm not sure what we're using now, but we might not actually need to make a new asset for this specific change.

from ml5-website.

SVG would be cool.
Maybe one more thought an the color we could also keep the original purple and make the background black. This would create a good contrast, that only fails the WCAG AAA Normal Text. A minor adjustment would get rid of that as well. I really like the old purple, if you know what I mean. @c-dacanay @bomanimc

from ml5-website.

Good point @tlsaeger! Thanks for exploring that pathway!

It seems like we have two options:

Simple Workaround: Keep our current color and change the background to black, and then fix the accessibility issues with WCAG AAA Normal Text that @tlsaeger mentioned (by the way @tlsaeger, what corrections for this did you imagine?)

More Detailed Fix: Changing our brand color to the darker color @c-dacanay. This would require some pretty quick changes to the CSS-defined colors in the code, but would also require some reworking and replacement of our logo usage across the project and the internet. We may also want to announce the update towards a more accessible logo/color scheme online, which I think would be a cool touchpoint. As there are more places we'd need to change, I think this would require a bit more work (likely on the design and community side).

Personally, I'm open to both options! The simple fix gives us time to work on other things, while the more complex one could be a way to create some excitement and some code changes that new contributors can take on.

@c-dacanay, if it's okay, I'd like to ask that you make the final decision on this one! I think you'd have the best purview as community maintainer and as a designer!

from ml5-website.

@bomanimc @c-dacanay Regarding the fixing of WCAG AAA Normal Text I thought we could darken the color a little. Now that I think about it, that would mean we need to change the logo etc. anyway.

Right now the contrast is only too low in two places, the Getting Started Button, which by the way does not really lead anywhere. And the text block titled »Meet Our team!« I would suggest that we might leave at as it is right now and plan for a more holistic redesign approach. Working together with some of the people of discord, like Miluanda.

What do you think about that?

from ml5-website.