search

newjersey / njwds

NJ Web Design Standards
https://newjersey.github.io/njwds/
MIT License
9 stars 2 forks source link

Address contrast issues #39

Open dhcole opened 1 year ago

dhcole commented 1 year ago

A few components (alerts and summary boxes) are showing contrast issues between the link colors and backgrounds. Here's the report:

Warning: [Alert (success)] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `success-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss 97:5        alert-status-body-styles()
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_usa-alert.scss 23:7                                 @forward
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_index.scss 4:1                                      @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 15:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Alert (warning)] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `warning-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss 97:5        alert-status-body-styles()
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_usa-alert.scss 23:7                                 @forward
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_index.scss 4:1                                      @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 15:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Alert (error)] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `error-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss 97:5        alert-status-body-styles()
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_usa-alert.scss 23:7                                 @forward
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_index.scss 4:1                                      @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 15:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Alert (info)] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `info-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss 97:5        alert-status-body-styles()
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_usa-alert.scss 23:7                                 @forward
    node_modules/@uswds/uswds/packages/usa-alert/src/styles/_index.scss 4:1                                      @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 15:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Alert (info)] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `info-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss 97:5        alert-status-body-styles()
    node_modules/@uswds/uswds/packages/usa-site-alert/src/styles/_usa-site-alert.scss 21:7                       @forward
    node_modules/@uswds/uswds/packages/usa-site-alert/src/styles/_index.scss 4:1                                 @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 44:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Summary Box] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `info-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-link-from-bg.scss 18:17          set-link-from-bg()
    node_modules/@uswds/uswds/packages/usa-summary-box/src/styles/_usa-summary-box.scss 48:3                     @forward
    node_modules/@uswds/uswds/packages/usa-summary-box/src/styles/_index.scss 4:1                                @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 47:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

Warning: [Summary Box] Neither the specified preferred link color token (`base-lighter`) nor the fallback link color token (`primary`) have AA contrast on a `info-lighter` background. Using `primary`. Please check your source code and project settings.
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-color-token-from-bg.scss 65:7   get-color-token-from-bg()
    node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/get-link-tokens-from-bg.scss 79:27  get-link-tokens-from-bg()
    node_modules/@uswds/uswds/packages/usa-summary-box/src/styles/_usa-summary-box.scss 54:19                    @forward
    node_modules/@uswds/uswds/packages/usa-summary-box/src/styles/_index.scss 4:1                                @forward
    node_modules/@uswds/uswds/packages/uswds/_index.scss 47:1                                                    @forward
    src/sass/styles.scss 63:1                                                                                    root stylesheet

We can find these in our CI logs, but they're warnings rather than errors, so we didn't catch them early: https://github.com/newjersey/njwds/actions/runs/5347214943/jobs/9695360369#step:4:137

dhcole commented 1 year ago

Here’s an illustration of the first case in this report: https://pr-37.d6umhtb6a6pvv.amplifyapp.com/components/detail/alerts--success.html https://webaim.org/resources/contrastchecker/?fcolor=0076D6&bcolor=ECF3EC