FLUID-5999: Contrast of "Restart Demo" link meet WCAG standards

Metadata

Source
FLUID-5999
Type
Bug
Priority
Major
Status
Closed
Resolution
Fixed
Assignee
Alan Harnum
Reporter
Justin Obara
Created
2016-10-26T16:18:08.991-0400
Updated
2016-11-01T16:15:39.980-0400
Versions
  1. 2.0
Fixed Versions
  1. 2.0
Component
  1. Demos
  2. Progress

Description

On the progress demo the "Restart the Demo" link is light blue on a green background; however, this does not pass WCAG contrast guidelines.

from tota11y:
"The color combination #2199e8/#afddc5 has a contrast ratio of 2.06, which is not sufficient. At this size, you will need a ratio of at least 4.5."

a suggestion is to set the font colour to #006095

Environments

Safari 10 ( macOS 10.12 )

Attachments

Comments

  • Justin Obara commented 2016-10-26T16:18:53.543-0400

    screenshot.png shows the low contrast of the "Restart the Demo" link.

  • Alan Harnum commented 2016-10-28T14:03:39.938-0400

    Fixing as part of FLUID-6008. The validator also reports a contrast issue for the "Submit" button in its inactive state, but this is an allowable exception per https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html: "Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."

  • Justin Obara commented 2016-11-01T16:15:39.978-0400

    Addressed with work on FLUID-6008