Example Summary - Step 1 : Elements must have sufficient color contrast

XMLWordPrintable

    • Severity 2 - Major

      Issue Summary

      Elements must have sufficient color contrast

      Tested URL

      https://instenv-5971-nizh.instenv.atl-test.space/servicedesk/customer/portal/1/create/35

      Steps to Reproduce

      1. Step 1

      Actual Results

      Actual results

      Expected Results

      Fix Information
      RULE :
      Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. This issue applies to placeholder text as well.

      HOW TO FIX:
      The Firefox browser applies an opacity of less than 1 to placeholder text color that causes the rendered text color to fall below contrast ratio requirements. Fix this issue by using CSS to ensure that the rendered placeholder text has an opacity of 1. For example:

      :moz-placeholder { /* Firefox 18 */
      color: #767676;
      opacity: 1;
      }

      ::-moz-placeholder { /* Firefox 19+ */
      color: #767676;
      opacity: 1;
      }

      REFERENCE:
      W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/forms/instructions/#styling

      BACKGROUND:
      People who have low vision or are colorblind may have difficulty reading text if the contrast between the text its background is insufficient. When the contrast ratio between text and its background is adequate, people who have low vision or are colorblind are more likely to be able to read the text.

      Screenshot

      Unable to render embedded object: File () not found.

      Screen Recording

      screen recording

      Workaround

      workaround

      Bug Ref: 744321

      Bulldog Ref: JSMDC-12710

            Assignee:
            Andrew Bui
            Reporter:
            Matthew Brennan
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: