#7222 closed defect (bug) (fixed)
Accessibility: Provide sufficient color contrast ratio to meet WCAG 2.0 AA standards Part 2
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| 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)
Change History (22)
#1
@
8 years ago
Patches attached for the following stylesheets: buddypress, avatar, twentysixteen, twentyfifteen, twentyfourteen, twentythirteen, and twentytwelve.
#3
@
8 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
#5
@
8 years ago
- Owner set to mercime
- Resolution set to fixed
- Status changed from new to closed
In 11127:
Contrast updates for buddypress.css