django / djangoproject.com

Source code to djangoproject.com
https://www.djangoproject.com/
BSD 3-Clause "New" or "Revised" License
1.88k stars 952 forks source link

Check colours for accessibility / WCAG compliance #974

Open rixx opened 4 years ago

rixx commented 4 years ago

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

Bright green on less bright green, contrast 2.02

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

Bright green on dark green, contrast 4.05

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

DeepinScreenshot_select-area_20200129112047

Green on green, contrast 2.43

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

DeepinScreenshot_select-area_20200129112333

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

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

thibaudcolas commented 4 years ago

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:

Shades of green for background color, text color, fill, borders on djangoproject.com

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,

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 ![www djangoproject com_start_overview_](https://user-images.githubusercontent.com/877585/97096298-16cbe780-1662-11eb-8ed9-bcd76a99f71b.png) Alternative for the footer, mirroring the header: djangoproject-footer-alternative

New color palette:

djangoproject-colors-after
CuriousLearner commented 2 years ago

Hello @rixx

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

rixx commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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:

image
akshatvermavi commented 1 year ago

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 commented 4 months ago

Current color contrast grid for future reference

current color contrast grid for website
kalafut commented 2 months ago

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

image

These are about a 1.45 contrast.