Revise the color of the page background on content pages to pass accessibility contrast test

[gissoo]

@jhimpele @rlskoeser When designing the content pages our homepage background color that you currently see on the site is not passing the WCAG AAA test (for reading smaller text on the page, against our text color).
Therefore I had to revise our colors a little. Please look at the new colors on the content page – you can also see what it would have looked like, which failed the accessibility test

I have two proposals, we can choose one from below:

• We can revise the page background color everywhere on the site (including the homepage) so that it's a bit darker, and revise the header/footer/leaf panel colors too so that there is still a contrast between the two colors.
  

• Or we can only revise the page background color on the content pages (root pages) and leave the homepage as is. But we will still need to change the header/footer/leaf panel colors so that they match everywhere on the site.
  

[jhimpele]

@gissoo I'm sorry, I'm having a hard time following what is the old, and what are the new options. It looks like you are proposing a darker background for the content pages, which has less contrast with the header/footer. But we may or may not have to darken the main tree page background. Is that right? If so, I prefer to make the content pages dark, but keep the tree page lighter.... @rlskoeser what do you think.

[gissoo]

@rlskoeser @jhimpele based on our discussions yesterday I have revised and have two proposals here on Figma

• in proposal 1 I have a new background color we could apply to all pages that's warmer (based on your feedback), and I have also revised the header and footer and leaf panel colors to have more contrast against this background color. (and made the drop shadow of the panel starker too)
• in proposal 2 is similar to proposal 1 but the only difference is I am keeping the homepage's background color as it was before.

Which one do you like more?
I just don't really like the amount of contrast between the two colors on the homepage in proposal 2.

I'd like to also not invert the colors as I am seeing it will need more adjustments to text styles for accessibility, and it conceptually doesn't make sense to me with the roots section being lighter than the body.

[rlskoeser]

@gissoo thank you for finding a warmer color and looking at our options! I prefer proposal 2 but I'd be ok with proposal 1.

There's enough contrast for me on proposal 1, not sure the drop shadow is necessary.

[jhimpele]

@gissoo thanks for working on this. I like proposal 1 because it makes all pages the same and I find the new contrast on the homepage header and footer too harsh. That said, is there any leeway to brighten the main area of the pages?

[gissoo]

@jhimpele thanks for writing, by "...brighten the main area of the pages" do you mean make the new page background color slightly lighter?

[jhimpele]

Yes! Since we all liked the original color so much. But I also agree that there could be too much contrast with the header/footer as you also pointed out. But I would be fine with #1 after all.

[gissoo]

@jhimpele I think anything lighter than the new background color will be quite similar to what we had before –

@jhimpele @rlskoeser since neither of you feel strongly about this and are open about either option I propose we go with proposal 1 since it's the safest for accessibility, and since we like the glow for the plaque which would work on this darker background.

I'm also still not convinced that the drop shadow on the leaf labels on the lighter background is enough for accessibility, I don't really have a way to test it on my end.

[jhimpele]

Sounds good. I’d avoid the drop shadow if we can….