Twenty Fifteen: Color contrast doesn't meet minimum accessibility requirements

[celloexpressions]

At a quick glance we have some issues with insufficient WCAG contrast ratios (less than 4.5:1) in the default colorscheme with no Customizations. I haven't looked closely, but .entry-footer fails for sure and I expect there are several others.

We need to go through the entire theme and check that we're meeting the minimum requirements everywhere. We also should make all of the built-in colorschemes completely accessible by ensuring that they meet minimum color contrast requirements. In fact, we can even enforce customized colors meeting these requirements if we make some tweaks to how the colorschemes work. Throughout, we need to account for the opacity that many colors have (rgba), as that lowers the amount of contrast.

Accessibility is important and in the case of color contrast it affects many users in different situations that can be as common as a bad monitor/screen in bad light conditions.

[iamtakashi]

Replying to celloexpressions:

At a quick glance we have some issues with insufficient WCAG contrast ratios (less than 4.5:1) in the default colorscheme with no Customizations. I haven't looked closely, but .entry-footer fails for sure and I expect there are several others.

.entry-footer the background color is #f7f7f7, the foreground color is rgba(51, 51, 51, 0.7) which is equivalent to #6d6d6d in this case. This means the contrast ration is 4.83:1 - PASS.

We need to go through the entire theme and check that we're meeting the minimum requirements everywhere.

I'm quite sure the default color scheme pass the contrast check. @davidakennedy and I had already look through but if you did find, let me know.

[celloexpressions]

Looking more closely at .entry-footer, I think something's going wrong with the rgba rendering, as it looks lighter/lower-contrast than the fallback hex color (in Chrome on Windows 8.1). I did the quick calculation last night based on #777 (visually equivalent) to #f7f7f7, which fails. This morning I calculated #6e6e6e as the equivalent hex color, which is fine, although we should update the fallback color (currently #707070) to match that (or the slightly different number you got). Why are we using rgba colors here, though? I don't see any need for that, and they're on a known, solid background and are causing font rendering inconsistencies for me that make the contrast seem lower. It would make more sense to use hex colors only here since there's no need for the opacity. I'm also starting to notice this particular rgba color used in more places, on both #fff and #f7f7f7, which will result in slightly different shades of gray. These also happen to be the places that look low-contrast to me at first glance, so I think that is related to the font-rendering issues.

Regardless of those, I definitely think that we should check the default settings in all the color schemes too. The one that immediately jumps out at me is the sidebar in the blue scheme. #fff on #55c3dc is a 2.05:1 contrast ratio, which fails by a lot, and some elements have .7 opacity on top of that. A dark gray or black text color would pass (default #333 is about 6:1 on that blue), or we would need a significant adjustment to the default background color there.

[iamtakashi]

Replying to celloexpressions:

Why are we using rgba colors here, though?

In this way — main text color (100%) and secondary text color (70%), we can apply the same ratio of the tone to the sidebar color text option and some other color schemes by only specifying the 100% of color. I thought this is the simplest solution.

they're on a known, solid background and are causing font rendering inconsistencies.

True, but the difference between #fff and #f7f7f7 are not huge and as long as it passes the contrast check on #f7f7f7 I don't think it's a huge issue. And I thought this is the simplest solution rather than trying to figure out hex value of 70% of the main color.

Regardless of those, I definitely think that we should check the default settings in all the color schemes too.

No need. Themes are only required to pass the contrast check with default setting. ​Accessibility Handbook And I like some lower contrast schemes as option.

[rianrietveld]

In ​my theme review I checked this and the colour contrasts pass WCAG 2 AA ( used a Colour Contrast Analyser for the opacity, see ​http://www.paciellogroup.com/resources/contrastanalyser/)

There are actually 2 different rules in WCAG 2 AA, for normal text the contrast ratio is minimal 4.5:1, for larger text, like headings this is 3:1. ​http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Now big text is defined as 18pt or larger, so how big that is depends on the device, a bit confusing to my option.

I agree with iamtakashi, we do not have to check all the different colour schemes, there should be at least one default good scheme.

[celloexpressions]

The blue scheme is really low contrast (doesn't even meet the large-text, AA guideline), and I feel like a default theme should probably do more than the minimum theme review guidelines, but if no one else feels that way we can leave it since it's customizable.

For color schemes, I think would be better to calculate the alternate colors in php so that they can be more consistently displayed and more easily understood in the browser (avoiding the need to try to calculate rgb to hex and factor in the opacity). I'll do a new ticket for that: #30192.

[iamtakashi]

Themes are only required to pass the contrast check with default setting, and we've already validated the contrast in the default setting. Also I don't have plan to change the color scheme at this point. I'm closing as invalid.