sphinx_rtd_theme icon indicating copy to clipboard operation
sphinx_rtd_theme copied to clipboard

Color contrast is too low on various page elements

Open jonels-msft opened this issue 5 years ago • 6 comments

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

  • Python Version: 3.7.3
  • Sphinx Version: 1.8.5
  • RTD Theme Version: 0.4.3

jonels-msft avatar Jul 06 '20 20:07 jonels-msft

Other low contrast instances:

  • contrast-2

  • contrast-3

  • contrast-4

  • contrast-5

  • contrast-6

  • contrast-7

  • contrast-8

jonels-msft avatar Jul 06 '20 20:07 jonels-msft

Color contrast is an important accessibility issue.

mgifford avatar Aug 21 '20 18:08 mgifford

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 avatar Aug 31 '20 19:08 rkdarst

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?

rkdarst avatar Dec 12 '22 20:12 rkdarst

@rkdarst can you post some screenshots?

benjaoming avatar Dec 12 '22 20:12 benjaoming

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...

rkdarst avatar Dec 13 '22 09:12 rkdarst