WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#23513 closed defect (bug)

Twenty Thirteen: color contrast should aim for WCAG2 level AA compliance — at Version 10

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.

Change History (12)

@jorbin2 years ago

comment:1 @jorbin2 years ago

  • Keywords has-patch added

comment:2 @SergeyBiryukov2 years ago

#23512 was marked as a duplicate.

@jorbin2 years ago

Screenshot with ca3c08 instead of f94a0a

comment:3 @sabreuse2 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 @sabreuse2 years ago

  • Milestone changed from Awaiting Review to 3.6

comment:5 @sabreuse2 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. 
 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
Last edited 2 years ago by sabreuse (previous) (diff)

comment:6 @goto102 years ago

  • Cc dromsey@… added

comment:7 @lancewillett2 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: @georgestephanis2 years ago

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

comment:9 in reply to: ↑ 8 @sabreuse2 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 @sabreuse2 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
Note: See TracTickets for help on using tickets.