Text opacity a11y

[ludoboludo]

PR Summary:

In this PR we're removing the lower opacity we have on some text element throughout the theme. This is done to make it easier for us to keep our theme accessible with a contrast ratio that passes the AA standards.

There are a few places that this is affecting and we will need to work together with Designers to figure out where it's ok and where we might want to do something to preserve the hierarchy we had by using different opacity on text elements.

Elements impacted:

• body,
  .color-background-1,
  .color-background-2,
  .color-inverse,
  .color-accent-1,
  .color-accent-2
• h6 - wasn't used anywhere
• blockquote screenshot
• .select__select ( this is used for the variant selector on the product page/section and sort option for the filters )
• .field__label,
  .customer .field label ( labels for inputs on the customer page and for field__label which is used in many places like: facet filter, main product, main article, contact form, email signup, footer, header, main search, etc )
• .header__heading-link .h2 (Shop logo when no image is uploaded)
• .header__menu-item screenshot
• .cart__note label screenshot
• .facets__summary screenshot
• .mega-menu__link screenshot
• .pickup-availability-button screenshot
• .price--on-sale .price-item--regular screenshot
• .slider-button ( previous next slide button )
• .slideshow__autoplay path ( pause/play button )
• .customer td::before screenshot
• .article-template__comments-comment screenshot
• .blog-placeholder .rte-width screenshot
• .footer__localization h2 ( for the heading of language selector and country/region. Could be removed I believe)
• .footer-block__details-content .list-menu__item--link,
  .copyright__content a ( this is for the menu items in the footer and the copyright: screenshot )
• .footer .disclosure__link ( language or country/region link/option: screenshot )
• a.product__text ( I don't think this is actually coming up anywhere 🤔 )

Why are these changes introduced?

Fixes #1521

After noticing a few issues with color contrast between text and the background, the idea of removing the text opacity was brought up. This is to look into our initial approach and decide whether it's something sustainable and guarantee our merchant to have the most accessible storefront possible even though we do not have control of the colors chosen.

What approach did you take?

I looked at all the CSS declarations using .75 opacity and removed it.

Other considerations

There are other styling declarations across the theme with a different opacity that can also be looked into.

I think there is also an opportunity to remove some of the styling we had for colors for the selectors mentioned above.

Testing steps/scenarios

• Here you'd need to test all the elements mentioned above and check how they look now that the opacity has been removed.
• Test different states when possible. Hover, active, focused.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Notified the help.shopify.com team about updates to theme settings (current contact: Kimli)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility