Problem/Motivation

WCAG 2.1AA requires certain minimum contrast for icons which convey information (SC 1.4.11 Non-text contrast). Also sites with a dark theme will require a light icon.

Proposed resolution

The current sprite needs to be changed to adjust the color of the icon. Light icons also need to be added to the sprite.

Alternatively we create an svg for each of the icons. Possibly declaring the code in the css. Which would allow css override for the colour.

Additional information on SVG accessibility:
https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-...

Original report by [miwayha]

We're using this module on sites that must comply with WCAG 2.0 AA, which includes minimum contrast requirements. The pngs included in this module are slightly too light to meet the minimum requirements on a white background. When I use the mac color meter, it looks like they are RGB (135, 135, 135). Anything RGB (105, 105, 105) or darker would meet this requirement.

Is that something you could consider?

Thanks!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

miwayha created an issue. See original summary.

elachlan’s picture

If you submit a patch with the changed images I would be happy to review/add it.

Also is the inverse true? if we change them to be darker is the contrast going to be bad with a darker background?

miwayha’s picture

Thanks for your reply!

This patch is a binary one, so be sure to test by using git apply --diff rather than just git apply. This darkens things to about RGB(111,111,111), which has a contrast ratio a bit over 5:1 against a solid white background.

Re: reducing contrast on darker things: it's a really good point. A darker image would show less contrast on a darker background. But given that you can't have a solution that will work in all cases, I would suggest that you focus on what you think is the default use case and focus on that. I assume that most of the text this module applies to would have a white or light gray background, but if that's not a reasonable assumption, feel free to reject the patch.

Building something that could be more flexible — maybe a few options depending on the background color, or using an icon that could be applied through CSS — would be a heavier lift, but perhaps worth considering. But I think it's unavoidable that some users area going to have to create their own image files overwrite your own CSS with theirs no matter what solution you come up with.

Cheers, and thank you for the really helpful module!

elachlan’s picture

I think there was talk about having a light/dark theme in another issue. If you can put together light/dark versions we might be able to combine the issues.

elachlan’s picture

Are you able to put together some lighter icons as well?

elachlan’s picture

elachlan’s picture

Version: 7.x-1.x-dev » 8.x-1.x-dev
Issue tags: -undefined
FileSize
302 bytes

Attaching the lighter version of the icons from #2465503: Light version of icon.

This is so all changes are done in one issue.

They should probably be added to the one sprite file and maybe even changed to a svg?

Changing to 8.x as all changes should be made here first.

elachlan’s picture

Issue tags: +Accessibility
elachlan’s picture

Issue tags: +Novice
mgifford’s picture

Issue tags: +color contrast

This tool is good for finding better color contrast options http://contrast-finder.tanaguru.com/

elachlan’s picture

Issue summary: View changes
elachlan’s picture

These are the svg images I found.
https://thenounproject.com/search/?q=link&creator=15063&i=497066
https://thenounproject.com/search/?q=mail%20to&creator=15063&i=497064

Here is an example codepen.
https://codepen.io/anon/pen/KedZbp

I think the javascript would either store the svg definition, or it would read the file contents and then output an svg tag for the external links.

elachlan’s picture

Title: Improve accessibility by making images darker » Accessibility improvements to icons
elachlan’s picture

Status: Active » Needs review
FileSize
3.42 KB

This is my attempt. It will need some tweaking and the tests need to be updated.

Status: Needs review » Needs work

The last submitted patch, 14: 2811293-14.patch, failed testing. View results

elachlan’s picture

Status: Needs work » Needs review
FileSize
3.41 KB

Status: Needs review » Needs work

The last submitted patch, 16: 2811293-16.patch, failed testing. View results

elachlan’s picture

Status: Needs work » Needs review
FileSize
3.41 KB

Status: Needs review » Needs work

The last submitted patch, 18: 2811293-18.patch, failed testing. View results

elachlan’s picture

Status: Needs work » Needs review
FileSize
3.59 KB
elachlan’s picture

Issue summary: View changes

Status: Needs review » Needs work

The last submitted patch, 20: 2811293-20.patch, failed testing. View results

elachlan’s picture

Status: Needs work » Needs review
FileSize
9.38 KB

Status: Needs review » Needs work

The last submitted patch, 23: 2811293-23.patch, failed testing. View results

elachlan’s picture

Status: Needs work » Needs review
FileSize
10.26 KB

Status: Needs review » Needs work

The last submitted patch, 25: 2811293-25.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

elachlan’s picture

Status: Needs work » Needs review
FileSize
10.32 KB
elachlan’s picture

elachlan’s picture

elachlan’s picture

elachlan’s picture

Here is the test example of external links using the svg.
https://dispatcher.drupalci.org/job/drupal8_contrib_patches/30816/artifa...

mgifford’s picture

One challenge comes down to the id's within the SVG file. Glad you involve the title, and link to the title with an id. But id's still need to be unique in a page, so if we know there might be two images on a page then id="title" is going to be a problem.

What's the best way to make this identifier unique?

elachlan’s picture

Could we use aria-label since we are using an aria role?

cboyden’s picture

It looks like the latest patch already uses aria-labelledby? In a case where the label text is not visible on the screen, it's fine to use aria-label instead.

andrewmacpherson’s picture

Status: Needs review » Needs work

re: #32 - the duplicate ID issue is indeed a problem. As well as being a HTML validation problem, when they are references for aria-labelledby then it causes a problem for calculating the accessible name. In this case, the FIRST element with id="title" will be used as the accessible name for all elements with aria-labelledby="title".

For example, a page can have an external link icon AND a mailto link icon. In this case they both have different text in the SVG <title id="title"> element, but the first one will be used as the label for both icons.

I made a simple demo page for this: Duplicate IDs with aria-labelledby. I tested it with IE, Chrome and FIrefox using NVDA.

What's the best way to make this identifier unique?

How about removing them instead? aria-label will be better, because it doesn't need IDREFs. The duplicate ID attributes can be removed:

<svg role="img" aria-label="Link is external" ... >
  <title>Link is external</title>
  <path ... />
</svg>
andrewmacpherson’s picture

WCAG 2.0 AA requires certain minimum contrast.

The WCAG 2.0 success criterion 1.4.3 Contrast (minimum) only applies to text. However WCAG 2.1 has introduced SC 1.4.11 Non-text contrast, which will apply to these icons.

elachlan’s picture

Status: Needs work » Needs review
FileSize
10.42 KB

Changed to use aria-label. Unsure on exactly what is needed for contrast. But people should now be able to override it in their themes.

Status: Needs review » Needs work

The last submitted patch, 37: 2811293-37.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

elachlan’s picture

Status: Needs work » Needs review
FileSize
11.81 KB
brucedarby’s picture

Picking this up at #uoecontributionday2018

brucedarby’s picture

I hope I’m picking this up correctly. The icons for external links should have a contrast ratio 3:1 to comply with WCAG 2.1 Non-text Contrast.
Do we have the exact hex codes for the colours? If so we can check the contrast using https://webaim.org/resources/contrastchecker/
In this patch are there 2 different coloured icons - one for the light background and one for the dark background? Sorry if I'm picking this up wrong.
If so I’m wondering if the icons are the wrong way round? The icon next to the ‘User Guide’ link on the default homepage is lighter than the icon next to the ‘Drupal’ link? If they were the other way round the contrast would pass the WCAG 2.1 Non-text Contrast for both a light background and a dark background. It’s the icon next to the ‘Drupal’ link which fails in the current set up.

‘User Guide’ icon should be #6E6E6E and a background of white #FFFFFF which is 5.10:1 which is a pass.
Rather than what it is currently is at #727272 and #FFFFFF which is still a pass at 4.81:1.
But the ‘Drupal’ icon in footer should be #727272 with background of #292929 so the ratio would be 3.02:1 which would be a pass.
Rather than what it is currently at #6E6E6E and #292929 which fails at 2.85:1

elachlan’s picture

@brucedarby, thanks for your help on this.

Attached is the amended patch.

brucedarby’s picture

Picking this up at #uoe-d8-contribution

brucedarby’s picture

Yep that's worked. The difference is subtle but it does now pass. I've applied and checked the patch for the icon and the colour contrast for the dark panel and that will pass the WCAG 2.1 guidelines. Just adding a couple of screen shots for clarity (they are in the files for this issue).
The new icon fill colour in the dark panel is #727272 and the panel colour is #292929.
Using Webaim colour checker at https://webaim.org/resources/contrastchecker/ returns a ratio of 3.02:1 which is a pass for not text items.

brucedarby’s picture

Status: Needs review » Reviewed & tested by the community

The last submitted patch, 3: darker_icons-2811293-3.patch, failed testing. View results

andrewmacpherson’s picture

Issue summary: View changes

Thanks for the review.

Minor update to issue summary to clarify which WCAG SC is being addressed.

  • elachlan committed 92c2d5b on 8.x-1.x
    Issue #2811293 by elachlan, miwayha, brucedarby, andrewmacpherson:...
elachlan’s picture

Status: Reviewed & tested by the community » Fixed

Thanks for everyone's work on this!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.