search

readthedocs / sphinx_rtd_theme

Sphinx theme from Read the Docs
https://sphinx-rtd-theme.readthedocs.io/
MIT License
4.77k stars 1.73k forks source link

Color contrast is too low on various page elements #971

Open jonels-msft opened 4 years ago

jonels-msft commented 4 years ago

Problem

The white-on-blue project title has contrast of 4.2:1, which is less than the 4.5:1 recommended minimum.

Reproducible Project

https://pg-auto-failover.readthedocs.io/en/latest/

Error Logs/Results

contrast-1

Expected Results

The blue background should be a little darker to allow people with visual impairment to read the title. WCAG 1.4.3

Environment Info

jonels-msft commented 4 years ago

Other low contrast instances:

mgifford commented 4 years ago

Color contrast is an important accessibility issue.

rkdarst commented 4 years ago

I wanted to do somethign about this sooner, but am not enough of a designer to try adjusting the actual theme (also, I don't know what direction we should take it). So I made a package that overrides some elements to increase contrast: https://github.com/AaltoSciComp/sphinx_rtd_theme_ext_color_contrast You can currently preview it at https://scicomp.aalto.fi/

This is not the work of a designer or someone that knows about web accessibility. Nor is it the work of someone that knows sphinx_rtd_theme. And it's not everything, just the things I've found so far. Still, it might be a starting point. I expect this to go away once the theme itself is improved some.

If you have more easy things to improve in sphinx_rtd_theme_ext_color_contrast, let me know.

rkdarst commented 1 year ago

Should I take my changed colors from sphinx_rtd_theme_ext_color_contrast and directly upstream them? It's been two years and I've seen few problems with the colors I selected, may as well make it more easily reusable while waiting for a designer to take a look?

benjaoming commented 1 year ago

@rkdarst can you post some screenshots?

rkdarst commented 1 year ago

Screenshot: image

You can also see more in these two pages (really that whole site): https://coderefinery.github.io/sphinx-lesson/sample-episode-rst/ https://coderefinery.github.io/sphinx-lesson/directives/

This is all the changes: https://github.com/AaltoSciComp/sphinx_rtd_theme_ext_color_contrast/blob/master/sphinx_rtd_theme_ext_color_contrast/_static/sphinx_rtd_theme_ext_color_contrast.css Looking again, it seems that some changes may be in for pygments highlighting, which a quick check doesn't seem to say is here. I guess I can try to figure that out...