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.

[SergeyBiryukov]

#23512 was marked as a duplicate.

[jorbin]

Screenshot with ca3c08 instead of f94a0a

[sabreuse]

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

[georgestephanis]

​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

[sabreuse]

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.

[sabreuse]

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

[sabreuse]

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:

[lancewillett]

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

[sabreuse]

missed a set of .page-links

[sabreuse]

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.

[sabreuse]

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.

[lancewillett]

In 23613:

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

[lancewillett]

In 23614:

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

[lancewillett]

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

[sabreuse]

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

[sabreuse]

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

[sabreuse]

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.

[lancewillett]

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.

[lancewillett]

In 23651:

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

[lancewillett]

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