Default pkgdown theme contrast

[maelle]

Disclaimer: I was told about contrast yesterday, so I know very little.

On http://wave.webaim.org/report#/https://pkgdown.r-lib.org/index.html (click on contrast) it seems that contrast is too low

• in the navbar

• for comments in code chunks.

Should a darker shade be used in these places?

Related to #782

[maelle]

If the changes suggested are welcome,

For the comments the line that'd need to be changed is

pkgdown/inst/assets/pkgdown.css

Line 202 in 04e3f6e

.co {color: #888888;} /* comment */

(with a darker shade, but how much darker?)

The navbar colors are bootstrap default, maybe one could add

.navbar-default .navbar-nav > li > a {
    color: newcolor;
}

to pkgdown.css?

I see Bootstrap docs mention the contrast might be too low by default. https://getbootstrap.com/docs/4.3/getting-started/accessibility/#color-contrast but I don't know if the default color of the navbar in newer Bootstrap versions (cf #894) is better.

[hadley]

How about #444 for the links in the navbar, and #666 for comments. We could also make the background colour a little lighter, maybe #fafafa? Do you want to make the change?

[hadley]

Oh, but we can't override the default theme colours in pkgdown.css because that would be applied across all themes.

[maelle]

So where could the change happen?

[hadley]

I don't recall how the theming system works, but presumable we'd either have to change the default theme, or make one of our own.

[maelle]

Oh, but we can't override the default theme colours in pkgdown.css because that would be applied across all themes.

I now realize this is actually what I'd like to happen. 😁 E.g. when working on the rOpenSci pkgdown template, I noticed the lack of contrast and would prefer it to be solved in pkgdown default, than to solve it in my theme. I also think it's good if the default that might appear in themes (that don't override the color of comments) has a good enough contrast. Is the issue with applying the change across all themes that it is sort of a breaking changes for folks who've developed their themes?

[hadley]

I meant something slightly different: if we set the text colour it will be applied across all themes, regardless of what their background colour is (ie it might decrease the contrast if the theme uses a dark background).

I would be fine changing the css for a given theme, assuming that’s possible with the current design (I don’t remember exactly but aren’t they coming from another site?)

[jayhesselberth]

You could change the contrast for just the pkgdown site by including and making changes in an extra.css file.

I don't think you want to make changes to inst/assets/pkgdown.css because they could clash with different bootswatch themes used on other sites.

[maelle]

I think I understood the issue now, thanks! 😌

So for my own pkgdown themes/templates I will tweak colors directly and not wait for an "upstream fix". 😉

What about pkgdown's default theme, where should the change occur?

[hadley]

The colours come from the bootstrap default, so I don't think there's an easy way for us to change this globally (without potentially making some existing pkgdown sites less usable).