Testing for contrast with buttons and gradients

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
dead_arm's picture
Posted by dead_arm on December 14, 2012 at 5:57pm

Lately I have been doing color contrast testing for Drupal 8, and I've come across two examples that aren't as straight forward as text color on background color. I wanted to know in particular if there was already a standard for handling the instances described in these issues http://drupal.org/node/1858238 and http://drupal.org/node/1858206.

In issue 1858238, if both the text on button background, and button background on page background should pass the color contrast WCAG AA threshold.

In issue 1858206, what must pass when there is a gradient applied.

Thanks!

Comments

Colour Contrast pass with gradients

Posted by dewh2o on December 14, 2012 at 9:29pm
dewh2o's picture

With gradients, the colour that has the least contrast to the text must pass. Example: If the text is white and the button is gradient from dark blue to pale blue, the palest blue that touches the text must pass at 4,5 for 1 contrast of luminosity if you check for WCAG 2.0 AA.

Hope this helps!

Color Contrast testing

Posted by gdruckman on December 14, 2012 at 10:26pm
gdruckman's picture

I agree with dewh2o. Regardless the background, it must at least pass a contrast ratio of 4.5:1 for font size of 14pt (18px or 1.125em), or a ratio of 3:1 on large text 18pt (24px or 1.5em).
I am using the Paciello Group Color Contrast Analyzer (they have it for Windows and Mac, I'm using a Mac...) http://www.paciellogroup.com/resources/contrastAnalyser

Also, for a better understanding of the WCAG2.0 1.4.3 success criteria here's some reading (don't read tired, you may fall asleep... Fair warning...) http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast...

Thanks dewh2o and gdruckman!

Posted by dead_arm on December 17, 2012 at 3:41pm
dead_arm's picture

Thanks dewh2o and gdruckman! I appreciate the help.

On the button…

Posted by Cliff on December 31, 2012 at 7:51pm
Cliff's picture

dead_arm, you've been steered in the right direction by dewh2o and gdruckman, but they didn't directly answer your question about text, buttons, and background. In that case, you want to clearly convey that the button is a special kind of link and points to a specific target. The specific target is especially important, so it's crucial that the text have sufficient contrast to the button color. Still, it's important for the buttons themselves to be perceivable and their general role clear. You could do this a number of ways:

  • Style the button text in a distinct manner that makes it clear that this is, if not a button, at least a specific class of link.
  • Make sure both text and background colors are in the same direction from the button color. Otherwise, you'll have a hard time finding a set of three colors that will make the text, the button, and the background sufficiently distinct from one another using color contrast alone. So either:
    • Make the button's color the lightest of the three.
    • Or make the button's color the darkest of the three.
  • Put a border around (or at least between) each button.
  • Apply any other comparable styling that makes the role of the button obvious and the text on it have a sufficient contrast to its color.

The Paciello Group's Colour Contrast Analyser, originally created by Steve Faulkner, is a great tool for analyzing the contrast of a specific pair of colors. But I've found Contrast-A, used as described under Specifying colors and contrast for accessibility in the Drupal Theming Guide, to be a better tool for two of the tasks you're dealing with:

  • Developing a complete palette of colors for your website
  • Finding just the right shade of one color to achieve sufficient contrast with another—a feature that should be especially useful in working with your color gradients