search

AlaskaAirlines / auro-skeleton

Custom element that provides users a way to indicate the loading of asynchronous content on a page.
https://auro.alaskaair.com/components/auro/skeleton
Apache License 2.0
0 stars 0 forks source link

WCAG 2.1 Graphics Contrast Ratio #16

Closed Dayna-A closed 2 years ago

Dayna-A commented 3 years ago

Describe the feature

Since WCAG 2.1 adds a contrast ratio of 3.1 for graphics and user interface components against adjacent colors, does this mean that the auro-skeleton component (with a ratio of Contrast Ratio 1.03:1) is not WCAG 2.1 compliant when used on light backgrounds? or does this qualify as an inactive UI component?

The scope of this feature is to revisit this component, assess its a11y support and recommend feature enhancements if applicable.

To Reproduce

Steps to reproduce the behavior:

  1. Visit Webaim Contrast Checker
  2. Use the Webaim.org contrast ratio checker to compare #f9fbfc (a.k.a. --auro-color-brand-neutral-100) on a background of #ffffff
MattSidor commented 3 years ago

For reference, here is an example from our current project. (The GIF compression has altered the colors slightly.)

Kapture 2021-09-10 at 11 06 39

Dayna-A commented 3 years ago

Forget WCAG. CAN ANYONE SEE THAT?

leeejune commented 2 years ago

Created a blueprint with updated design: https://www.figma.com/file/16Ep0sRVQKMsAxu7vZ3wgt/Skeleton?node-id=322%3A298

Main update is the change of the base color (neutral-100 --> gray-200).

@blackfalcon Please review!