USWDS-Site - Icon: Add note about icon color contrast

[amyleadem]

Summary

Added a note about checking icon color contrast.

Warning
We should update the changelog date before merging

Related issue

Closes #2224

Preview link

Icon component page

Testing and review

Confirm that the copy makes sense, conveys what we want it to, and is free from spelling and grammatical error.

[amycole501]

Approved as-is. However, I suggest changing the link from a generic W3C link text to instead read: 1.4.11: Non-text Contrast

[amycole501]

The only improvement would be to clarify exactly which WCAG success criteria we're referring to in the link text. The link itself is good and points the user to a useful page. It's not a requirement, however, just a suggestion.

[amyleadem]

@amycole501 Good point! I updated the link text to reflect the title of the article. Let me know if you want any changes!

[mahoneycm]

Lgtm! 👍

[mejiaj]

@sarah-sch would you be able to review & approve? We can merge after.

[sarah-sch]

Thanks for sharing, @amyleadem! Katie and I are suggesting some tweaks.

[sarah-sch]

Check for sufficient color contrast. Verify that the icon has a minimum contrast ratio of 3:1 against its background. See [WCAG 2.1 Techniques: Ensuring that a contrast ratio of 3:1 is provided

@amyleadem - looked at this with @finekatie and we are suggesting some tweaks to maintain USWDS's conversational, approachable style: Check for good color contrast. Make sure that the icon has a minimum contrast ratio of 3:1 against its background.

[amyleadem]

@sarah-sch @finekatie
Good improvement! I've updated the copy in c634d58. Let me know if you want any changes.

[sarah-sch]

Looks good--thanks!