amp-story: Non-text content has insufficient colour contrast

# Non-text content has insufficient colour contrast

## WCAG Level
Level AA

## Priority
Medium

## Pages/screens/components affected
* [Navigation](https://www.gstatic.com/amphtml/stamp/qa/navigation.html)
* [RTL](https://www.gstatic.com/amphtml/stamp/qa/rtl.html)
* [Video](https://www.gstatic.com/amphtml/stamp/qa/video.html)
* [Audio - amp-story background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-story.html)
* [Audio - amp-story-page background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-page.html)
* [Audio - amp-story using amp-audio](https://www.gstatic.com/amphtml/stamp/qa/amp-audio.html)
* [Animation](https://www.gstatic.com/amphtml/stamp/qa/animation.html)
* [Sharing](https://www.gstatic.com/amphtml/stamp/qa/sharing.html)
* [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html)
* [Page attachment](https://www.gstatic.com/amphtml/stamp/qa/page-attachment.html)
* [Branching](https://www.gstatic.com/amphtml/stamp/qa/branching.html#page=page2)
* [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html)
* [Prerender - Image](https://www.gstatic.com/amphtml/stamp/qa/prerender-img.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [Prerender - Video](https://www.gstatic.com/amphtml/stamp/qa/prerender-video.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [AMP Story Player - Player](https://www.gstatic.com/amphtml/stamp/qa/player.html)
* [AMP Story Player - AMP Story 360](https://www.gstatic.com/amphtml/stamp/qa/amp-story-360.html)

## 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.

Some of the standard elements of AMP story pages currently have insufficient contrast for non-text elements.

## 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.

## Required solution
Make sure that non-text content has a colour contrast ratio of at least 3:1 against its background and the content that is adjacent to it.

Elements that are disabled or inactive, and elements that use the browser's default styles, are exempt.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

## Implementation guidance

In large-screen/desktop view, where the share dialog is presented as a centred dialog, the "X" close control for the dialog uses a light gray (`#9AA0A6`) foreground colour on a white (`#FFF`) background, with a contrast ratio of 2.6:1.


In this case, we recommend using a slightly darker gray (such as `#949494`) for the "X" control, to bring the contrast ratio to at least 3:1.

In small-screen/phone view, the white (`#FFF`) graphical controls for sound, play/pause, and to trigger the share dialog are shown directly over the page content. Depending on the actual page content, this can result in a contrast ratio below 3:1. For instance, for most of the test sample pages, the contrast ratio of the controls against the purple background gradient (averaged to approximately `#8D9FC4`) is 2.7:1.


Similarly, the progress indicators in small-screen/phone view use solid white (`#FFF`) for viewed pages, and a semi-transparent white (`hsla(0,0%,100%,0.4)`) for upcoming/next pages. As these elements are overlaid directly onto the page content itself, this can result in a contrast ratio below 3:1. Using the purple background gradient of the test pages as a reference (approximately `#76809E` at the top end of the page, where the indicators are), the white (`#FFF`) indicator passes (with a contrast ratio of 3.9:1), but the semi-transparent indicators result in an insufficient color contrast combination (`#AFB5C7` against `#76809E`, with a contrast ratio of 1.9:1). On very light/bright backgrounds, even the white indicator will end up failing the required contrast ratio.


Lastly, in [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html), in small-screen/phone view, when tooltips are shown the previous/next navigation buttons that appear use white (`#FFF`) over the slide background (with the addition of a subtle semi-transparent overlay). Again, depending on the actual slide content, this can result in contrast ratios below the required 3:1.


For all of these cases where elements are overlaid directly on the AMP story page itself, we recommend either including an explicit dark overlay/background behind the elements (to assure a minimum contrast ratio of 3:1 or better, regardless of the actual page content/background), or the addition of a dark/black outline around the icons/elements.

## Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:
1. Check the contrast of all non-text content using a tool such as the [TPG: Colour Contrast Analyser](https://developer.paciellogroup.com/resources/contrastanalyser/).
2. Check that the contrast level between the element and its adjacent content is at least 3:1.

### Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
* All issues identified within the test sample have been resolved.
* The rest of the website has been tested for the same issue.
* All issues identified throughout the rest of the website have been resolved or filed as new issues.

## Related standards
* [WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast (Level AA)](https://www.w3.org/TR/WCAG21/#non-text-contrast)

## More information
* [TPG: Colour Contrast Analyser](https://developer.paciellogroup.com/resources/contrastanalyser/)
* [WebAIM: Contrast and Color Accessibility - 1.4.11 Non-text Contrast](https://webaim.org/articles/contrast/#sc1411)
* [WebAIM: Color blindness](https://webaim.org/articles/visual/colorblind)

## Test data
Test date: January 2021

Start by checking the listed AMP Story sample pages, including Navigation, RTL, Video, Audio, Sharing, Tooltip, and Player, with a contrast analyser. Compare each non-text control and adjacent background against the required 3:1 ratio; done means all sample findings and matching issues across the rest of the website are fixed or filed as new issues.

Written by the indexing model from the issue text.