search

elixirschool / school_house

The new era of Elixir School now powered by @phoenixframework
https://elixirschool.com/
Apache License 2.0
155 stars 49 forks source link

Increasing contrast #109

Closed jaimeiniesta closed 3 years ago

jaimeiniesta commented 3 years ago

Our main accessibility issue is low contrast in some parts of the text, specially code:

https://rocketvalidator.com/s/2f3a096c-1324-48e9-ace7-e8f0d6385eee/v/15063853

I'm working on increasing the contrast of some colors, but it would really help if we increased the font size a bit in general. What do you think? Is there a CSS class to set the base font size?

jaimeiniesta commented 3 years ago

On the RV report, clicking on an affected web page shows the elements with low contrast, for example:

https://rocketvalidator.com/s/2f3a096c-1324-48e9-ace7-e8f0d6385eee/p/4681839/v?search=Elements+must+have+sufficient+color+contrast

doomspork commented 3 years ago

I'm onboard with any and all improvements in this area. I will be the first to tell you I know 0 about this part of design (or really design or color theory in general 😆 ).

I think much of this can be configured via Tailwind. I will look into that today for you. @kinson may know off the top of his head.

kinson commented 3 years ago

@jaimeiniesta thanks for opening this issue - I have been meaning to get around to the remaining contrast issues 😅

If I remember correctly, most of the contrast issues are tied to the code syntax highlighting colors defined in our css file. Instead of changing them incrementally, it may be better to find a higher contrast syntax highlighting theme from here: https://tmbb.github.io/makeup_demo/elixir.html .

As far as font sizes go, it should be straightforward to customize the existing font size specs in the tailwind css config file following this pattern: https://tailwindcss.com/docs/font-size#font-sizes .

jaimeiniesta commented 3 years ago

@kinson sure, I think that choosing a theme with higher contrast is a better option.

Do you want to take care of contrast issues? I recommend installing the axe-core Chrome extension which is useful for checking individual web pages while you develop.

kinson commented 3 years ago

Yeah I'll tackle that soon! Thanks for the tip that's much better than the website I was using before 🚀

jaimeiniesta commented 3 years ago

Cool! Also remember to check the contrast in dark mode as well -- Rocket Validator is only taking into account the default mode, the light mode.

If we want RV to be able to check the dark mode we should think of a way to set it via a URL parameter, do you think this could be easily implemented? Something like ?ui=dark to trigger dark mode in any URL? This way we can make the sitemap.xml pass this option on the generated links, so we'll be able to validate the whole site in dark mode.

If this is complicated then we can just check manually some pages in dark mode.

kinson commented 3 years ago

I was just noticing the other day that the purple I chose for dark mode is pretty low contrast so that is a good idea! Aside from accessibility concerns, checking for contrast on dark mode should highlight any obvious spots that were missed when implementing it.

I'm interested in figuring this out, so I'll take a stab at this soon.

kinson commented 3 years ago

@jaimeiniesta (or @doomspork ) Adding a dark mode url parameter is pretty straightforward. However, I am curious if there is any concern with generating links in the site map for every page using dark mode. This would double the number of links and would require generating links in light and dark mode for each language for each page. That is totally doable, but before I do I want to make sure there are not any unintended consequences that I am not thinking of.

jaimeiniesta commented 3 years ago

@kinson my idea is not to include the url parameter in every link generated in the sitemap by default, and instead have an option for us to generate that, so it can be used by Rocket Validator only. Some sites even have dedicated sitemaps to use with Rocket Validator, for example one of our clients makes its sitemap accept pagination, so he can split a large site with 25,000 in 3 reports of 5,000 web pages each:

https://rocketvalidator.com/blog/plain-text-sitemaps

My plan is:

This way we can pass Rocket Validator the starting URL https://beta.elixirschool.com/sitemap.xml?ui=dark, and it will include that parameter in every generated URL.

So, we'll have a Rocket Validator report covering HTML and accessibility for the default site in light mode, and another separate report to check only accessibility for the dark mode URLs (as the HTML markup is the same, we're basically interested in checking contrast).

Makes sense?

kinson commented 3 years ago

Yep, that makes sense, I will update the sitemap page to handle that.

kinson commented 3 years ago

@jaimeiniesta because we generate the static sitemap files ahead of time, I have created a new static file for dark mode links (/sitemap_dark_mode.xml) in #113. I tweaked the colors to increase contrast (and checked it to some extent with rocket validator locally) in #112.

Finally, I will create another pr to increase the base font size in the tailwind config so we can close this particular issue out (assuming the contrast issues are resolved)!

jaimeiniesta commented 3 years ago

OK, so now that the new dark mode sitemap is live, I've set up another daily report on that.

Here are the results for today, it looks like the dark mode has many more contrast issues than the light mode (17K vs 5K):

Light mode:

https://rocketvalidator.com/s/3ad41f85-1e13-4349-bc41-a508b4604de0/v/15083387

Dark mode:

https://rocketvalidator.com/s/fc7595fe-cf17-4601-9417-f04291deba04/v/15078845

jaimeiniesta commented 3 years ago

For the record, here's how I've set up the report for dark mode. It gets the new sitemap as a starting URL, and only checks accessibility. Also, deep crawling is disabled so that it doesn't follow the initial links, and only considers the ones in the sitemap.

Captura de pantalla 2021-07-30 a las 16 06 11

kinson commented 3 years ago

@jaimeiniesta I went ahead and merged #112 and ran a couple RV tests (with 200 pages).

The Good:

The Not As Good:

Is there another way I can check the contrast using the same technique as RV so I can reliably reproduce the issue? In the mean time I will use Rocket Validator to validate some individual pages to get around ngrok slowness and rate limiting.

P.S. There is an obvious contrast issue on this page under the second subsection that I will fix in the next pr.

jaimeiniesta commented 3 years ago

Well automated tests are not to be taken as the ultimate truth, as axe-core says, it's not completely sure about some of those issues, so it just raises a flag there and then we take a look and decide, using other tools as you just did.

Rocket Validator uses the latest axe-core, at a resolution of 800x600 (so be sure to resize your browser to that size before you run the axe chrome extension, to get similar results).

Once you have taken care of those issues when you think it's been fixed we can then just mute the remaining issues regarding contrast and move on. Let me know when I should apply muting and I'll create the rule!

kinson commented 3 years ago

@jaimeiniesta do you mind re running the report using the "official" set of reports mentioned in the ROCKET-VALIDATOR.md file? I think we are pretty close to having each of the contrast issues resolved.

jaimeiniesta commented 3 years ago

@kinson sure, I just run the reports for the light and dark modes.