Twenty Thirteen: color contrast should aim for WCAG2 level AA compliance

[jorbin]

With a more complex color palette than the previous black (or gray) on white default themes, we will have to check contrast ratios more carefully, with a goal of 4.5:1 for body text, and 3:1 for large text, as recommended by WCAG 2.0 accessibility guidelines. For example:

The contrast between the beige and orange is a bit low. The ratio is currently 3.2:1 with f94a0a being the orange, If we switch to CA3C08, then we can bump the ratio to 4.6:1.

Even against white (#fff), the ratio is only 3.5:1.

Why is this important:

​http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html explains why 4.5:1 is a minimum that we should aim for. Essentially it greatly will increase the readabilty for people with low visual acuity (roughly people with 20/40 vision).

​http://leaverou.github.com/contrast-ratio/ was used to check the ratios.

Since we're likely to have multiple contrast fixes, let's collect them all in this ticket.

#23512 was marked as a duplicate.

Screenshot with ca3c08 instead of f94a0a

I did a quick audit of contrast ratios throughout the theme using the HTML5 Code Sniffer bookmarklet at ​http://squizlabs.github.com/HTML_CodeSniffer/. Note that this checker calculates ratios to 2 decimal places, so the results look slightly different than Aaron's on the same elements -- but my 3.19 is close enough to Aaron's 3.2, and both of them miss the 4.5 mark by a good bit.

Post Formats:

Std, Image: // white bg
 all links
 CR: 3.49:1. 
 fixed in r23514. New CR: 5.0

Gallery: // yellow bg
 .page-links a 
 CR 4.32:1
 fixed in r23614

Aside, Link: // lt tan bg
 all links
 CR 3:19:1
 fixed in r23514: new CR 4.6

Chat: // med tan bg, brown links
 ok

Quote: // dk bg, orange links
 ok

Status: // dk tan, white links
 ok

Audio, Video: // orange bg, black links
 ok

Other Issues:

.form-allowed-tags
 CR 3.89:1
 fixed in r23613

.site-footer h1, .site-footer h2, .site-footer h4, .site-footer h5, .site-footer h6
 CR 1:1
 see screenshot in comment 8!
 fixed in r23514. New CR: 18.4

.site-footer .widget a 
 CR 4.27:1. 
 note: same dark background as the Quote format, but with a tiny difference in link colors

.site-footer a 
 CR 3.36:1 
 note: this is the "proudly powered by" footer, not the dark widget area
 fixed in r23613

​http://cloud.stephanis.info/image/3e1l1F380U2z

h4 tags in the footersidebar are nearly impossible to see for people with good vision.

This one came in the Jetpack Gravatar widget -- you can see it up on stephanis.info

Great catch, George -- turns out that the same is true of all Header levels except H3 (which is specifically styled since it's the widget-title for all the default widgets). Adding it to the master list.

As noted in the WCAG guidelines, the 4.5:1 level is required for normal text; large text (18+ points for normal weights or 14+ points for bold) requires 3:1; level AA is what we talked about, so I edited the title for accuracy. ref: ​http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

18pt ~= 24px; 14pt ~= 18.667px

23513.diff refreshes Aaron's patch and adds a fix for the header color problem George reported. New screenshot of a text widget with header tags:

In 23514:

Twenty Thirteen: first pass at better color contrast for links. Also fixes very poor contrast for h3-h6 headings in footer widget area. Props jorbin and sabreuse. See #23513

missed a set of .page-links

23513.page-links.2.diff uses the new higher-contrast link color in the white-on-orange and orange-on-white versions of .page-links . Contrast ratio is now 5.0.

23513.shadesofgray.diff tweaks the gray text in the Powered By WordPress footer and the list of allowed tags on the comment form. New Contrast Ratio is 4.5.

In 23613:

Twenty Thirteen: better contrast for footer text and form "allowed tags" text, props sabreuse. See #23513.

In 23614:

Twenty Thirteen: better contrast for page links, props sabreuse. See #23513.

@jorbin and @sabreuse -- OK to close this as fixed now?

Not just yet -- I'll have one more this afternoon that I missed in my last pass through the list.

23513-footerlinks.diff lightens the orange of links in footer widgets. Old CR was 4.3, new is 4.5.

When we made the main link color darker, we knocked links in the (dark background) quote format out of compliance. 25313-quote.diff applies the same link color from 23513-footerlinks.diff to links and postmeta in the quote format.

In 23650:

Twenty Thirteen: lighten orange color for link text in footer widgets, props sabreuse. See #23513.

Also use same shade for paging links, to be consistent and not have thousands of small color variations in the the theme.

In 23651:

Twenty Thirteen: improve contrast for quote post format links, props sabreuse. See #23513.

Discussing today in office hours, in IRC, that we can close and open new tickets for new issues.