AC-2496::Contrast insufficient - light grey text (Checkout - Payment)

[glo71317]

Description

Contrast insufficient - light grey text (Checkout - Payment)

Reproduction Steps
select "Blouses & Shirts" > select "Susanna Draped Tank" > add product to cart > select bag > select "Edit Shopping Bag" > select "Proceed to Checkout" > complete shipping information and continue to "Shipping Method" > complete shipping method and continue to "Payment Information" (TEST - Payment information][NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(3)>:nth-child(1)>:nth-child(1)>:nth-child(5)>:nth-child(1)>:nth-child(1)>:nth-child(1)>*:nth-child(1)]

1. Use a color contrast checker to compare foreground and background colors.

Actual Behavior
There are text elements or images of text that do not meet the WCAG 2.0 required minimum color contrast ratio of 4.5:1 for standard text of 18pt (24px) or 14pt (19px) if bolded. Examples include:

Expiration date format
CVV format

Foreground: #B5B5B5
Background: #ffffff
Contrast ratio: 2.1:1

Sufficient contrast ensures that people with low vision or color deficiencies, users viewing the page without color, and users of monochrome screens can see the page content.

Expected Behavior
All text and images of text should provide the following minimum contrast ratios:

For standard text less than 18pt (24px) or less than 14pt (19px) if bolded must have a luminosity contrast ratio of 4.5:1 or more.
For larger text 18pt (24px) or larger or 14pt (19px) if bolded must have a luminosity contrast ratio of 3:1 or more.
Refer to the Color Contrast Checker Tool for assistance:
https://www.levelaccess.com/compliance-resource/color-contrast-checker/

Related Issue

Closes https://jira.corp.magento.com/browse/AC-2496.

Verification Steps

Pre-Conditions:

1. Have Magento instance with sample data installed
2. Make sure to have pwa studio installed
3. Make sure to have a customer login for front end login

Manual Steps executed:

Login to venia > Navigate to global header accessories or other
Add product to cart > select bag > select "Edit Shopping Bag" > select "Proceed to Checkout" > complete shipping information and continue to "Shipping Method" > complete shipping method and continue to "Payment Information" (TEST - Payment information]
select credit card option and check the constrast

✖️ Behaviour Before The Fix : There are text elements or images of text that do not meet the WCAG 2.0 required minimum color contrast ratio of 4.5:1 for standard text of 18pt (24px) or 14pt (19px) if bolded. Examples include:

Expiration date format
CVV format

✔️Behaviour After The Fix: The text elements or images of text meet the WCAG 2.0 required minimum color contrast ratio of 4.5:1 for standard text of 18pt (24px) or 14pt (19px) if bolded.

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

Resolved issues:

1. resolves [Issue] AC-2496::Contrast insufficient - light grey text (Checkout - Payment) #3835: AC-2496::Contrast insufficient - light grey text (Checkout - Payment)

[pwa-studio-bot]

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Associated JIRA tickets: AC-2496.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against 59807b1

[glo71317]

run all tests

[supernova-at]

@magento create issue from PR

[ericeoeur]

Approved-- this has passed review.