[buddypress-trac] [BuddyPress Trac] #7222: Accessibility: Provide sufficient color contrast ratio to meet WCAG 2.0 AA standards Part 2

[buddypress-trac]

#7222: Accessibility: Provide sufficient color contrast ratio to meet WCAG 2.0 AA
standards Part 2
--------------------------+------------------
 Reporter:  mercime       |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  2.7
Component:  Core          |     Version:
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |
--------------------------+------------------

Comment (by mercime):

 Following are the changes to the respective stylesheets:

 '''buddypress.css'''
 #767676 is the lightest shade of gray on #ffffff background that passes
 WCAG AA 4.5:1 contrast ratio requirement.

 #767676 on #f5f5f5 background = 4.17:1 fail. Change to #707070 for 4.54:1
 #767676 on #fafafa background = 4.35:1 fail. Change to #737373 for 4.55:1
 #767676 with 0.8 opacity = 3.14:1 fail. Remove opacity.

 '''avatars.css'''
 #aaaaaa on #ffffff = 2.32:1 insufficient contrast. Change to #767676 for
 4.54:1

 '''twentysixteen'''
 Twenty Sixteen's link color #007acc on #ffffff passes WCAG AA guidelines
 at 4.51:1. When we add any background color, we have a insufficient
 contrast.
 e.g.  #007acc on on #f7f5e7 in `item-list-tabs ul`= 4.12:1 insufficient
 contrast. Bump the link color to #0073c1 for 4.54:1  ratio.
 In addition, remove `li:not(.selected) a {opacity: 0.7}` on item-list-tab
 links.

 #767676 on #f7f7f7 = 4.24:1 = insufficient contrast. Change to #717171 for
 4.51:1
 #767676 on rgba(247, 247, 247, 0.6) aka #fafafa = 4.36:1 insufficient
 contrast. Change to #737373 for 4.55:1
 #007acc on #f7f7f7 = 4.21:1 insufficient contrast. Change to #0075c4 for
 4.51:1
 #767676 on #fafafa = 4.36:1 insufficient contrast. Change to #737373 for
 4.55:1
 #767676 on #f5f5f5 = 4.17:1 insufficient contrast. Change to #707070 for
 4.54:1

 '''twentyfifteen'''
 #767676 on #f7f7f7 = 4.24:1 insufficient contrast. Change to #717171 for
 4.51:1
 #767676 on #fafafa = 4.36:1 insufficient contrast. Change to #737373 for
 4.55:1
 #333333 on #23282d = 1.18:1 insufficient contrast. Change to #8e8e8e for
 4.54:1
 #898b8b on #23282d = 4.34:1 insufficient contrast. Change to #8c8390 for
 4.52:1
 rgba(51, 51, 51, 0.6) aka #858585 on #ffffff = 3.71:1 insufficient
 contrast. Change to #767676 for 4.54:1

 '''twentyfourteen'''
 #24890d (2014 link color) on #d8d8d8 = 3.16:1 insufficient contrast.
 Change to #1b6e08 for 4.67:1
 #767676 on #fafafa = 4.36:1 insufficient contrast. Change to #737373 for
 4.55:1
 #24890d on #fafafa = 4.33:1 insufficient contrast. Change to #1b6e08 for
 4.5+:1
 #24890d on #f5f5f5 = 4.13:1 insufficient contrast. Change to #22820c for
 4.5+:1
 #ffffff on #999999 = 2.85:1 insufficient contrast. Change background to
 #949494 for 3.03:1 (for large font)
 `lighten($body-text, 30%);` on #ffffff = 4.42:1 insufficient contrast.
 Change to `lighten($body-text, 25%);`
 #24890d on #f7f7f7 = 4.21:1 insufficient contrast. Change to #22830c for
 4.54:1

 '''twentythirteen'''
 #767676 on #f7f7f7 = 4.24:1 insufficient contrast. Change to #727272 for
 4.5+:1
 #767676 on #fafafa = 4.36:1 insufficient contrast. Change to #737373 for
 4.55:1
 not selected nav link {opacity: 0.7;} => #da7752 insufficient contrast.
 Remove {opacity: 0.7;}
 `$cream-background` (#f7f5e7) on `lighten($background-hover, 10%)` aka
 #e37a5a for hover = 2.66:1 insufficient contrast. Change background to
 #bd4b28 for 4.56:1

 '''twentytwelve'''
 #767676 on #fafafa = 4.36:1 insufficient contrast. Change to #737373 for
 4.54:1
 #eeeeee on #6e6e6e = 4.39:1 insufficient contrast. Change to #f1f1f1 for
 4.51:1

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7222#comment:3>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac