Accessibility issue with new tokens

[blackfalcon]

Please verify the version of auro-lockup you have installed

@latest

Please describe the bug

When upgrading to @aurodesignsystem/design-tokens v4.7 and running a build of the component, you will get the following build error.

test/auro-lockup.test.js:

 🚧 Browser logs:
      Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.

 ❌ auro-lockup > auro-lockup is accessible
      Error: Accessibility Violations
      ---
      Rule: color-contrast
      Impact: serious
      Elements must meet minimum color contrast ratio thresholds (https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI)

      Issue target: span[slot="subtitle"]
      Context: <span slot="subtitle">Powered by Partner Name</span>
      Fix any of the following:
        Element has insufficient color contrast of 2.24 (foreground color: #adadad, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
      ---
        at processResults (node_modules/chai-a11y-axe/src/accessible.js:87:15)
        at node_modules/chai-a11y-axe/src/accessible.js:123:7
        at async n.<anonymous> (test/auro-lockup.test.js:14:5)

Chrome: |██████████████████████████████| 1/1 test files | 3 passed, 1 failed

With the updated tokens, the currently used token of --ds-color-brand-gray-400 with the value of #adadad has a 2.24:1 color ratio which failed the accessibility requirement.

The previous value was #767676 had a ratio of 4.54:1

Reproducing the error

This issue cannot be reproduced on the Auro docsite

Expected behavior

The design of the element should be void of color accessibility issues. be

What browsers are you seeing the problem on?

No response

Additional context

It is undetermined whether to update the token or the token assigned to the text in this element. What is also unknown is the impact across all the properties currently using the --ds-color-brand-gray-400 token.

A search revealed that this value is being used within the Seats UI. https://github.com/Alaska-ECommerce/seats-ui-components/blob/40b855519bbadfbde8c6bf970d72bf39ecb52a5e/src/Tab/tab.styles.ts#L5

Exit criteria

This issue can be closed once it is able to build with the updated design tokens successfully.

[leeejune]

Please replace gray-400 with gray-600 for the lock up component. This is the closest current color to the old gray-400.

[blackfalcon]

@leeejune having tested this, I would recommend using the var(--ds-color-base-gray-700) token. The Gray 600 has a hex of 7E7E7E that fails for small type.

[blackfalcon]

Setting issues as BLOCKED until the color choice question can be resolved.

[leeejune]

@leeejune having tested this, I would recommend using the var(--ds-color-base-gray-700) token. The Gray 600 has a hex of 7E7E7E that fails for small type.

This should work. Thanks for catching that.