Check colours for accessibility / WCAG compliance

[rixx]

There are a couple of areas where the current colour contrasts between fonts and backgrounds fail the WCAG 2.0 colour contrast accessibility guidelines on the djangoproject.com pages. It's mostly to do with the bright green compared with white/white-ish colours:

Green on gray, contrast 2.79

Fails all checks, mostly in use on sidebars.

Bright green on less bright green, contrast 2.02

Fails all checks, it's in use in title areas.

Bright green on dark green, contrast 4.05

This would be okay with 14pt+ instead of the current ~10pt, but 14pt is unreasonably huge.

Green on green, contrast 2.43

Fails all checks, is hard to read even for me.

White on green, contrast 2.5

Sadly, this isn't even WCAG compliant in large/bold fonts, and we use it on all of our buttons, etc.

Next steps

For me (good vision, good screen) some of the completely failing combinations are perfectly easy to read, like the white font on bright green buttons – but that's the point of accessibility guidelines, they're not for people with good vision and good screens.

Since this impacts a lot of the djangoproject.com page, especially with the bright green being so prevalent, I'm not sure how to proceed here, but I wanted to document the issue to start a conversation about it.

[ryanwilsonperkin]

Looks like switching to using color: white for text on the green backdrops would be a relatively quick win here. It has an acceptable contrast ratio on both #44B78B which is used for the .copy-banner and on #0C4B33 which is used for the navigation banner on the top.

[rixx]

It has an acceptable contrast ratio on both #44B78B

How did you check the contrast? The last example is exactly white on #44B78B, and the contrast is 2.5, which doesn't even pass in large/bold fonts.

[ryanwilsonperkin]

Interesting, I'd tried on http://colorsafe.co/ and it seemed to think the contrast ratio was much higher. My mistake

[thibaudcolas]

There are a lot of shades of green used on the site currently, but it seems like it’s only the 3 intermediary "bright greens" that are problematic:

I’d recommend replacing their usage with a new darker shade. Quick tests with Leonardo: https://leonardocolor.io/?colorKeys=%230c4b33%2C%2344b78b&base=c9f0dd&ratios=4.6%2C7&mode=CAM02. That would be #247454 to have something that works with #C9F0DD as the text color.

For "bright green" for text,

• On dark backgrounds it could be replaced with white or #C9F0DD.
• On light backgrounds it could be replaced with this new shade, #247454.

The shade doesn’t have to be #247454, but I’d recommend using one that has a contrast ratio greater than 4.5:1 against #C9F0DD so it’s more versatile.

---

Here is a mockup of the result. I switched the top banner to be dark text on light background so it still contrasts with the navigation. Also feels more readable to me, less prone to halation.

Mockup

 Alternative for the footer, mirroring the header:

New color palette:

[CuriousLearner]

Hello @rixx

Can you please let us know why this issue was closed? Apparently there is a PR #998 opened for it.

[rixx]

I don't recall why I closed this – I may have assumed that this was either merged or wasn't going to get merged two years after not seeing any movement on it. Happy to reopen!

[knyghty]

@thibaudcolas on the docs site there are also red (for some reason?) links on the docs pages: https://docs.djangoproject.com/en/4.1/ - not sure if you want to add those to your palette.

I suppose there are more colours used there as well, such as the warning boxes.

[kalafut]

I'd like to add another example that I was going to report before ending up on this issue. Here's the search box, which is barely readable in light mode:

[akshatvermavi]

Looks like switching to using color: white for text on the green backdrops would be a relatively quick win here. It has an acceptable contrast ratio on both #FFFFFF which is used for text and on #0C4B33 which is used for background color.

[thibaudcolas]

Current color contrast grid for future reference

[kalafut]

I've recently noticed another area that could use improvement. The syntax highlighting of code blocks uses very light grey for braces/brackets/parens/commas/etc.:

These are about a 1.45 contrast.