Rian Rietveld 5:57 pm on October 1, 2013
Tags: accessibility ( 72 ), MP6

Hi I’m not sure of this has been…

Hi, I’m not sure of this has been discussed before, but I saw the vote on the new MP6 theme. http://polldaddy.com/poll/7437854/. Has a colour scheme with sufficient contrast been suggested already? Maybe not for the default theme, but as a choice? In all of this themes the grey in the input fields is very light, did someone do some calculations on this?

#accessibility, #mp6

Graham Armfield 6:46 pm on October 1, 2013

A very good point Rian.
_Redd 6:47 pm on October 1, 2013

Hi, Rian, I LOVE the new MP6 theme, but I was really glad to see an eye out for checking color contrast.

I was unable to find exact colors used in the options by using “View Code”

In an attempt to roughly gauge success criteria for W3C color contrast standards, I used Snag-It to capture an image, and then used Photoshop eyedropper to at least grab an approximation of the color.

I then used Juicy Studio’s Color Contrast Analyzer to get a sense of color contrast among the options.

Blue: Photoshop color picker for the background: #52accc Using White Foreground #fff (for the text)
Results: Results for Luminosity Contrast Ratio

The contrast ratio is: 2.58:1

Fail: The luminosity contrast ratio is insufficient for the chosen colours (#52accc and #fff) (Needs large text to pass)

Seaweed #15757a from color picker, #fff for text:

Results for Luminosity Contrast Ratio

The contrast ratio is: 5.44:1

Passed at Level AA for regular text, and pass at Level AAA for large text: If the text is large text (at least 18 point or 14 point bold), the luminosity contrast ratio is sufficient for the chosen colours at Level AAA; otherwise, Level AA (#15757a and #fff).
_Redd 6:54 pm on October 1, 2013

Color comparisons continue to above:

Pixel #59524c from color picker, #fff for text:

Results: Results for Luminosity Contrast Ratio

The contrast ratio is: 7.68:1

Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours (#59524c and #fff).

Ectoplasm #523f6d #fff for text

Results:

Results for Luminosity Contrast Ratio

The contrast ratio is: 9.17:1

Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours (#523f6d and #fff).

…..more comparisons to follow
_Redd 7:00 pm on October 1, 2013

Comparisons continue to above:

Sunrise #cf4944 as background #fff for text

Results for Luminosity Contrast Ratio

The contrast ratio is: 4.48:1

Passed at Level AA for large text only: If the text is large text (at least 18 point or 14 point bold), the luminosity contrast ratio is sufficient for the chosen colours (#cf4944 and #fff).

Vineyard #462b36 as background #fff for text

Results: Results for Luminosity Contrast Ratio

The contrast ratio is: 12.66:1

Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours (#462b36 and #fff).

…more coming
_Redd 7:03 pm on October 1, 2013

Color contrast evaluation continues:

Primary #35395c as background, #fff as foreground (text)

Results for Luminosity Contrast Ratio

The contrast ratio is: 11.10:1

Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours (#35395c and #fff).

…summary to follow
_Redd 7:09 pm on October 1, 2013

Hi, Rian, I’m not sure my first entry got saved. To repeat from earlier first reply, I really LOVE the new MP6 theme, but also very happy to have some one ask for a check on color contrast.

Below is repeating what I said in an earlier reply, so accept my apologies if the earlier reply shows up again.

In an attempt to roughly gauge success criteria for W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. color contrast standards, I used Snag-It to capture an image, and then used Photoshop eyedropper to at least grab an approximation of the color, as I was unable to actually see CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. code for the exact colors.

I then used Juicy Studio’s Color Contrast Analyzer to get a sense of color contrast among the options.

Blue: Photoshop color picker for the background: #52accc Using White Foreground #fff (for the text)
Results: Results for Luminosity Contrast Ratio

The contrast ratio is: 2.58:1

Fail: The luminosity contrast ratio is insufficient for the chosen colours (#52accc and #fff) (Needs large text to pass)

Seaweed #15757a from color picker, #fff for text:

Results for Luminosity Contrast Ratio

The contrast ratio is: 5.44:1

Passed at Level AA for regular text, and pass at Level AAA for large text: If the text is large text (at least 18 point or 14 point bold), the luminosity contrast ratio is sufficient for the chosen colours at Level AAA; otherwise, Level AA (#15757a and #fff).

In short summary, the blue, although extremely attractive, does not provide sufficient color contrast to meet W3C guidelines for contrast. The seaweed and sunrise colors will pass if the text is large, and the rest are fine.

Thank you so much for asking.
- Rian Rietveld 7:26 pm on October 1, 2013
  
  Hi _Redd, Thanks for checking. I love the new themes too! way better than it was.
esmi 7:13 pm on October 1, 2013

I think the point to keep in mind here is that these would be user-selectable schemes (as I understand it), So as long as the default scheme passes minimum WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. contrast levels, it really doesn’t matter what contrasts are present in the alternative schemes. Also, remember some dyslexics would welcome a very low contrast scheme.

I’ve actually suggested that the color schemes shipped with the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (and later in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.) include at least one high-contrast scheme for visually-impaired user and one very low contrast scheme for some dyslexics. This ability to provide schemes for different user groups is something that Helen & I have talked about (albeit rather wistfully) in the past. 🙂
- Joe Dolson 7:13 pm on October 1, 2013
  
  Jinx!
Joe Dolson 7:13 pm on October 1, 2013

I think it’s important to note that these are not all of the themes; the primary MP6 theme, which David Kennedy has been reviewing, will definitely be included when MP6 is shipped; these other options are candidates as additional color schemes that will be available.

Esmi has already suggested adding a high-contrast and a low-contrast color scheme to accommodate for low vision or dyslexic needs; voices might be helpful there: https://make.wordpress.org/ui/2013/10/01/mp6-color-schemes/
Rian Rietveld 7:23 pm on October 1, 2013

Thanks all for the quick response. It would be perfect if MP6 will be included with a few accessible colour schemes. @esmi, thanks for all your effort!

Comments are closed.

About Us

How you can help

Learn More

Hi I’m not sure of this has been…

About Us

How you can help

Learn More

Share this: