Skip to:
Content

Opened 3 years ago

Closed 3 years ago

Last modified 2 years ago

#7222 closed defect (bug) (fixed)

Accessibility: Provide sufficient color contrast ratio to meet WCAG 2.0 AA standards Part 2

Reported by: mercime Owned by: mercime
Milestone: 2.7 Priority: normal
Severity: normal Version:
Component: Core Keywords: has-patch
Cc:

Description

Audit of bp-nouveau template screens for color contrast ratio revealed that some issues need to be fixed in core stylesheets. So far, the affected stylesheets include the twenty-* stylesheets, avatar.css, and buddypress.css.

Attachments (7)

7222-buddypress.patch (3.4 KB) - added by mercime 3 years ago.
Contrast updates for buddypress.css
7222-avatar.patch (714 bytes) - added by mercime 3 years ago.
Contrast updates for avatar.css
7222-2016.patch (5.6 KB) - added by mercime 3 years ago.
Contrast updates for twentysixteen stylesheets
7222-2015.patch (3.8 KB) - added by mercime 3 years ago.
Contrast updates for twentyfifteen stylesheets
7222-2014.patch (6.9 KB) - added by mercime 3 years ago.
Contrast updates for twentyfourteen stylesheets
7222-2013.patch (5.0 KB) - added by mercime 3 years ago.
Contrast updates for twentythirteen stylesheets
7222-2012.patch (2.2 KB) - added by mercime 3 years ago.
Contrast updates for twentytwelve stylesheets

Download all attachments as: .zip

Change History (22)

@mercime
3 years ago

Contrast updates for buddypress.css

@mercime
3 years ago

Contrast updates for avatar.css

@mercime
3 years ago

Contrast updates for twentysixteen stylesheets

@mercime
3 years ago

Contrast updates for twentyfifteen stylesheets

@mercime
3 years ago

Contrast updates for twentyfourteen stylesheets

@mercime
3 years ago

Contrast updates for twentythirteen stylesheets

@mercime
3 years ago

Contrast updates for twentytwelve stylesheets

#1 @mercime
3 years ago

Patches attached for the following stylesheets: buddypress, avatar, twentysixteen, twentyfifteen, twentyfourteen, twentythirteen, and twentytwelve.

#2 @mercime
3 years ago

  • Keywords has-patch added

#3 @mercime
3 years ago

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

#4 @mercime
3 years ago

In 11126:

Accessibility: live regions for front-end template files.

See #7222.

#5 @mercime
3 years ago

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

In 11127:

Accessibility: live regions for back-end template admin screens.

Fixes #7222.

#6 @mercime
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #buddypress by offereins. View the logs.


3 years ago

#8 @mercime
3 years ago

In 11130:

A11y: Update contrast ratios in buddypress.css to meet WCAG 2.0 AA standards.

See #7222.

#9 @mercime
3 years ago

In 11131:

A11y: Update contrast ratio in avatar.css to meet WCAG 2.0 AA standards.

See #7222.

#10 @mercime
3 years ago

In 11132:

A11y: Update contrast ratios in twentysixteen.css to meet WCAG 2.0 AA standards.

See #7222.

#11 @mercime
3 years ago

In 11133:

A11y: Update contrast ratios in twentyfifteen.css to meet WCAG 2.0 AA standards.

See #7222.

#12 @mercime
3 years ago

In 11134:

A11y: Update contrast ratios in twentyfourteen.css to meet WCAG 2.0 AA standards.

See #7222.

#13 @mercime
3 years ago

In 11135:

A11y: Update contrast ratios in twentythirteen.css to meet WCAG 2.0 AA standards.

See #7222.

#14 @mercime
3 years ago

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

In 11136:

A11y: Update contrast ratios in twentytwelve.css to meet WCAG 2.0 AA standards.

Fixes #7222.

#15 @mercime
2 years ago

In 11181:

a11y: Remove opacity causing insufficient color contrast for widget activity span.

See #7222.

Note: See TracTickets for help on using tickets.