amp-social-share: Best practice: Non-text content has insufficient colour contrast

[TetraLogicalHelpdesk]

WCAG Level

Level AA

Priority

Low

Type

Colour

Pages/Components affected

• amp-social-share

Description

An important design consideration is to make sure there is enough contrast between the colour of meaningful non-text elements (such as controls denoted purely through graphical elements, icons used as the only visible indicator for errors, charts/graphs, meaningful borders/outlines used to denote a selected item) and their background. Good colour contrast ensures that all sighted users, including those who have a condition that affects their ability to perceive colour, are able to see/understand meaningful non-text content.

Three of graphical buttons for pre-configured <amp-social-share> (Twitter, WhatsApp and Line) currently use a foreground/background color combination that falls below the 3:1 threshold for non-text content defined in WCAG 2.1 SC 1.4.11 Non-text Contrast.

Example	Details
	Foreground: #1DA1F2 /Background: #FFFFFF / contrast ratio: 2.8:1
	Foreground: #25D366 /Background: #FFFFFF / contrast ratio: 2:1
	Foreground: #52B448 /Background: #FFFFFF / contrast ratio: 2.6:1

These graphics use the standard corporate colors of their related services, and there is an exception mentioned in the Understanding Success Criterion 1.4.11: Non-text Contrast that exempts logos from the criterion.

The graphic is part of a logo or brand name (which is considered "essential" to its presentation)

There is currently discussion/disagreement around whether or not this exemption should also apply when the logo is used as an actual interactive control/button - see the related discussion on GitHub.

User impact

Without sufficient contrast, content can be difficult to perceive and therefore difficult to identify. In extreme cases, content with low contrast may not be visible at all to people with colour perception impairments. In the case of the share buttons, users may not be able to appropriately perceive/understand what the share controls are, what service they relate to.

Required solution

While it may not be possible due to corporate identity/branding/usage guidelines of these services, consider choosing default color combinations that have a contrast ratio of 3:1 or better. Review the guidelines to see if there are higher-contrast alternative versions of the logos available that are safe/approved for use.

If no alternatives are available, we recommend at least adding a key-line/border around the overall <amp-social-share> control itself that will make sure the button overall stands out against the white background with a minimum contrast of 3:1. The border can be made specific to each of the pre-configured social sharing platforms (e.g. the Twitter control could have darker blue outline, while the WhatsApp and Line controls could have a darker green outline).

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied:

1. Check the contrast of all non-text content using a tool such as the TPG: Colour Contrast Analyser.
2. Check that the contrast level between the element and its adjacent content is at least 3:1.

Related standards

• WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast (Level AA)

More information

• TPG: Colour Contrast Analyser
• WebAIM: Contrast and Color Accessibility - 1.4.11 Non-text Contrast
• WebAIM: Color blindness

Test data

Test date: July 2020

[nainar]

Unfortunately, since these are the official brand logos that are provided to us by these companies themselves we can't change the default icons.

We also can't provide high contrast options as that it would be a liability for the AMP project. We could and should change the documentation to describe this in the a11y section for the <amp-social-share> component