contrast check for accessibility
mikesmullin - April 7, 2007 - 01:27
| Project: | Drupal |
| Version: | 8.x-dev |
| Component: | color.module |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
| Issue tags: | accessibility |
Description
color.module should have the ability to prevent colors that do not have the minimum required contrast for color-blind folk to read properly either a) provide a warning or b) automatically shift to the closest color(s) that still provide enough contrast when 'accessibility' mode is on or something.
along these lines there should be a feature for 'white-on-black' vs. 'black-on-white' foreground/background colors. currently there's no way to, for example, set the header gradient to a dark color and the text over it to a light color--allowing the user to change it to the dark text on light background if they want.
#1
AFAIK this feature request still applies, so moving version to head
#2
Ok, just to nudge this along a but more.
This is how W3C suggests calculating this:
http://www.w3.org/TR/AERT#color-contrast
More rules:
http://html.cita.uiuc.edu/style/contrast/contrast-rules.php
And PHP code even:
http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_wit...
So how to bring this into the color.module?
#3
#4
Here's a first crack at testing contrast. I've added a validation function that calculates the luminosity difference of the text and link colors vs. a presumed white background and informs the user. Herein lies the difficulty, as there's no easy way of finding the background color in use. There may be a way check it with javascript- anyone have any suggestions as to how this could be done? Is there a standard #id in the theme that could tell me?
The luminosity test is specified in the WCAG 2.0 standard. Interestingly, some of the default color schemes included with Garland fail to provide sufficient contrast.
Standard used: WCAG 2.0 http://www.w3.org/TR/WCAG20/
Luminosity algorithm from http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_wit...
#5
I applied the patch to D7 and it seemed to work fine. Set them all to the same color and hit save and got these messages:
* The selected text color, when used with a white background, has a luminosity ratio of 4.5. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the text to be readable by all.
* The selected link color, when used with a white background, has a luminosity ratio of 4.5. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the links to be readable by all.
# The selected text color, when used with a white background, has a luminosity ratio of 14.6. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the text to be readable by all.
# The selected link color, when used with a white background, has a luminosity ratio of 7.7. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the links to be readable by all.
I tried with 'black', '#000', '#000000' too and got messages. Would be necessary to have a :
if ($test >= 4.5) {drupal_set_message(t("The selected text color, when used with a white background, has a luminosity ratio of %result. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the text to be readable by all.", array('%result' => $test)), $test >= 4.5 ? 'status': 'warning');
}
Added to the messages I think. Nobody wants to see the text if it's alright.
Also, looks like the assumption for the color module is a white background. Guess that's ok too.
Mike
#6
I've rerolled the patch here, but I can't seem to find the color picker in the theme config in D7..
I have looked at:
http://drupal.org/node/109457
Mike
#7
The last submitted patch failed testing.
#8
I've applied this patch to the new CVS (as of less than an hour ago you couldn't use this module at all).
I've also turned off the messages if the contrast is sufficiently high. I think this is a good compromise as we don't need to show users warnings if it isn't really required.
#9
+1. Mike, this is a great idea, especially since so many of the commonly used themes either have poor contrast or border on having poor contrast. For example, on this page, these items fail:
So we definitely need developers and themers to get more feedback about the contrast ratios of the color pairs they choose.
One suggestion: If only when the color pair fails at the AAA level, add something like this to the report output:
<p>To learn more about measuring color contrast, read <a href="http://drupal.org/node/464500">Color and Contrast</a> in the Drupal online documentation.</p>It might be a good idea to always include that statement and link, since it's impossible to determine all color pairs that might arise in a design. (Even if two colors with little contrast between them are used in the same design, there's no guarantee that they would be paired as foreground and background.)
Quite a valuable patch, Mike. Good work!
#10
+1 applied this to head this morning and it is working really well. I like Clliff's comment in #9 to add a link to provide developers with more information on colors and contrast.
#11
The last submitted patch failed testing.
#12
New patch to keep up with CVS.
#13
@mgifford
Can you please provide an explanation of how the most recent patch differs from the prior patch?
#14
There are no functional differences between patch 3 & 4 other than that the code around the patch changed breaking it. The bot complained (for good reason) and I rerolled the same patch to fit with the latest code.
Think we just need someone to RTBC this.
#15
Applied and tested the new patch. Looks good to me.
+1 / RTBC. Hoping that in a future iteration we can add functionality to display the error on page load, not on saving of the theme configuration.
#16
This was first RTBC now over a months ago. - Bump!
#17
This is a new feature, which was not ready prior to 9/1 (feature freeze). Bumping to Drupal 8 for consideration, though I am not convinced this validation really belongs in core. Luckily, it'd be trivial to add such validation to a "a11y_best_practices" contrib module for the D7 (and D6) cycle through hook_form_alter().
However, there's no way this could be committed as-is. The error message produced is:
"The selected link color, when used with a white background, has a luminosity ratio of 4.5. The W3C WCAG 2.0 accessibility standard suggests this ratio must be a minimum of 4.5 and optimally at least 7.0 for the links to be readable by all."
The average end user will have absolutely no idea what that means, nor how to go about fixing it. Furthermore, several of our default colour schemes for Color module break this spec. Core should not be generating errors out of the box, so this would need to be fixed as well.
Patches that adjust the default core colour schemes so that they pass this luminosity test, however, would still be on-topic for D7 as bug fixes.
#18
It is certainly something that could be added in with a module like http://drupal.org/project/accessible
I don't agree that validation isn't something that should be in core, but I'm not sure how critical this particular issue is for now.
I don't know how long the color module is going to be supported in core. Guess as long as Garland is the central theme. However, not many themes use it from my brief surveys. It's a neat idea though.
Not sure how to convey the language in a human readable form. "It is recommended that you increase the contrast between your foreground & background colors for accessibility" is simple enough, but doesn't have enough context.
Core should definitely not be producing errors of any sort out of the box.
Blue Lagoon (Default) - Barely passes with a luminosity ratio of 4.5 - Suggest link color of #135684
Ash - Passes!
Aquamarine - Barely passes with a luminosity ratio 4.5 - Suggest text color of #565555
Belgian Chocolate - Passes!
Bluemarine - Barely passes with a luminosity ratio 6 - Suggest link color #294664
Citrus Blast - Fails with a luminosity ratio of 4.2. - Suggest link color #5e4f09
Cold Day - Passes
Greenbeam - Barely passes with a luminosity ratio 5.5 - Suggest link color #0d4e06
Mediterrano - Passes
Mercury - It's deadly both text & link color fail - Suggest link color #315061 & text color #585858
Nocturnal - Barely passes with a luminosity ratio 5.7 - Suggested link color #46497f
Olivia - Fails with a luminosity ratio 3.3 - Suggested link color #41561b
Pink Plastic - Fails with a luminosity ratio 3.8 - Suggested text color #605454
Shiny Tomato - deadly tomato both text & link color fail - Suggest link color #7b0c0c & text color #393f39
Teal Top - Passes
But these should get passed by someone who has a better sense of color & then there should be a new issue made and a real patch applied to
themes/garland/color/color.inc & themes/garland/minnelli/color/color.inc