Inaccessible icons in Support Forums

[sabernhardt]

1. On the ​ HelpHub front page , these icons are linked without any text inside them (empty links). Either the links could be removed from the icons to match the ​ Support Forums page , or else the icons can be placed inside the links with the heading instead of having them separate.
2. ​ Accessibility guidelines require a color contrast of at least 3:1 for icons against their background, and #32373c at 40% opacity is insufficient (2.2:1).
3. The icon character can be hidden from screen readers with aria-hidden .

[sabernhardt]

The ​ styles should have a text color without the reduced opacity. #8d969f has a 3:1 contrast ratio against white, and a darker option would be fine.

 .dashicons { font-size: ms(16); color: #8d969f; width: auto; height: auto; }

If grouping the icon and heading within the link, the .icon-wrapper element can be a div or a span :

 <div class="info-box"> <a href=" https://wordpress.org/support/category/getting-started/ "> <span class="icon-wrapper"> <span class="dashicons dashicons-wordpress" aria-hidden="true"></span> </span> <h3>Getting Started</h3> </a>

[sabernhardt]

HelpHub front page's current gray icons

[sabernhardt]

using #8d969f gray for icons

[hilayt24]

Hi @sabernhardt, Thanks for the ticket and the suggestions. I added the color to the dash icons and removed the opacity from them.

[hilayt24]

Color added and opacity removed

[sabernhardt]

​ HelpHub apparently does not have the icons anymore.

I do not know how to test the patch properly, but the change looks good for the Support Forums.

[coffee2code]

In thirteen thousand three hundred and seventy :

Support: Improve color contrast of icons on forums page.

Props hilayt24, sabernhardt.
Fixes #6305 .