Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#23513 closed defect (bug) (fixed)

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

Reported by: jorbin Owned by:
Milestone: 3.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch close
Focuses: Cc:

Description (last modified by sabreuse)

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.

Attachments (9)

23513.diff (1.7 KB) - added by jorbin 3 years ago.
Screen Shot 2012-06-10 at 10.05.16 PM.png (260.4 KB) - added by jorbin 3 years ago.
Screenshot with ca3c08 instead of f94a0a
23513.2.diff (1.8 KB) - added by sabreuse 3 years ago.
headers-in-widgets.png (19.7 KB) - added by sabreuse 3 years ago.
23513.page-links.diff (498 bytes) - added by sabreuse 3 years ago.
23513.page-links.2.diff (706 bytes) - added by sabreuse 3 years ago.
missed a set of .page-links
23513.shadesofgray.diff (646 bytes) - added by sabreuse 3 years ago.
23513-footerlinks.diff (367 bytes) - added by sabreuse 3 years ago.
23513-quote.diff (468 bytes) - added by sabreuse 3 years ago.

Download all attachments as: .zip

Change History (33)

@jorbin3 years ago

comment:1 @jorbin3 years ago

  • Keywords has-patch added

comment:2 @SergeyBiryukov3 years ago

#23512 was marked as a duplicate.

@jorbin3 years ago

Screenshot with ca3c08 instead of f94a0a

comment:3 @sabreuse3 years ago

  • Description modified (diff)
  • Summary changed from Twenty Thirteen contrast between orange and beige is low to Twenty Thirteen color contrast should aim for 4.5:1

comment:4 @sabreuse3 years ago

  • Milestone changed from Awaiting Review to 3.6

comment:5 @sabreuse3 years ago

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. 

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

Aside, Link: // lt tan bg
 all links
 CR 3:19:1

Chat: // med tan bg, brown links

Quote: // dk bg, orange links

Status: // dk tan, white links

Audio, Video: // orange bg, black links

Other Issues:

 CR 3.89:1

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

.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
Version 1, edited 3 years ago by sabreuse (previous) (next) (diff)

comment:6 @goto103 years ago

  • Cc dromsey@… added

comment:7 @lancewillett3 years ago

  • Summary changed from Twenty Thirteen color contrast should aim for 4.5:1 to Twenty Thirteen: color contrast should aim for 4.5:1

comment:8 follow-up: @georgestephanis3 years ago


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

comment:9 in reply to: ↑ 8 @sabreuse3 years ago

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.

comment:10 @sabreuse3 years ago

  • Description modified (diff)
  • Summary changed from Twenty Thirteen: color contrast should aim for 4.5:1 to Twenty Thirteen: color contrast should aim for WCAG2 level AA compliance

comment:11 @sabreuse3 years ago

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

@sabreuse3 years ago

@sabreuse3 years ago

comment:12 @sabreuse3 years ago

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:

comment:13 @lancewillett3 years ago

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

@sabreuse3 years ago

@sabreuse3 years ago

missed a set of .page-links

comment:14 @sabreuse3 years ago

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.

comment:15 @sabreuse3 years ago

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.

comment:16 @lancewillett3 years ago

In 23613:

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

comment:17 @lancewillett3 years ago

In 23614:

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

comment:18 @lancewillett3 years ago

  • Keywords close added

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

comment:19 @sabreuse3 years ago

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

@sabreuse3 years ago

comment:20 @sabreuse3 years ago

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

@sabreuse3 years ago

comment:21 @sabreuse3 years ago

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.

comment:22 @lancewillett3 years ago

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.

comment:23 @lancewillett3 years ago

In 23651:

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

comment:24 @lancewillett3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.