The colour contrast on this theme looks very nice for normally sighted viewers, but fails W3C accessibility guidelines: the contrast is insufficient.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mheinke’s picture

Assigned: Unassigned » mheinke
Category: Bug report » Feature request
Priority: Normal » Minor
Issue summary: View changes
Status: Active » Needs work
Issue tags: +Accessibility

can you link to the standards, and can you provide patches or guidance?

thanks!

mgifford’s picture

The handbook is good:
https://drupal.org/node/464500

I also put up some suggestions for D8 #2125621: Contrast between title/slogan and header is too low

mheinke’s picture

i may role in a seperate stylesheet and admin setting that allows you to use a "low contrast" version for accesibility.

mgifford’s picture

Some interesting examples about contrast switching here https://drupal.org/project/pagestyle

But generally it's a good idea to have your theme follow the contrast guidelines. It helps low vision folks, but also really helps folks who are trying to use their site on the back deck on a sunny day.

The use of mobile devices especially makes contrast a more important issue for everyone.

mheinke’s picture

I guess im still not quite understanding the issue.
this theme by default shows black text on a white background for body.

are you talking about the background and the wrapper which are both sort of the same grey?

here is a production site that im currently running that uses this theme (with minor adjustments to the color scheme) is that better? http://www.mainstreamenergy.com/

mgifford’s picture

I'm just chiming in with more info about color contrast and accessibility.

White on black should be just fine. Lots of variations.

But looking at that site with this plugin indicates there are definitely problems with color contrast:
https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker/

mheinke’s picture

the text changes it suggests are all good. im going to put a patch in here which will take care of all of the WCAG2 (level AAA) issues with text.

mheinke’s picture

FileSize
1.32 KB

first attempt at a patch

mheinke’s picture

Issue summary: View changes
FileSize
263.11 KB
1.91 KB

second attempt at a patch. fixes all of the text issues.
testing

mheinke’s picture

Status: Needs work » Needs review
Leeteq’s picture

Title: This theme fails on accessibility » Make Professional_theme adhere to accessibility standards
Priority: Minor » Normal
mheinke’s picture

@leeteq,

thanks for changing the title of the issue

mheinke’s picture

the latest release is much more accessible according to the widgt above. please test and confirm (version 2.01)

mgifford’s picture

Title: Make Professional_theme adhere to accessibility standards » Make Professional_theme adhere to color contrast accessibility standards
Status: Needs review » Closed (fixed)

I looked at it and the color contrast is great, thanks!

I'll add another issue though about the carousel.

Great job though, thanks!

mheinke’s picture

look forward to the second issue!

thanks!

mgifford’s picture