Skip to content

USWDS - Core: Repair color contrast issues for color-grade 45 #4694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
thisisdano merged 3 commits into from
Jun 3, 2022
Merged

USWDS - Core: Repair color contrast issues for color-grade 45 #4694

thisisdano merged 3 commits into from
Jun 3, 2022

Conversation

@amyleadem
Copy link
Contributor

@amyleadem amyleadem commented May 16, 2022 •
edited by mejiaj
Loading

Description

Closes #4146.

Problem details:

Background colors with a color-grade of 45 will produce inaccurate results when fed into theget-color-token-from-bg mixin. Two distinct issues have been identified and are outlined below:

Note: Color-grade 45 is a mid-range grade given to any color with a relative luminance (rLum) value of 0.183 < rLum < 0.25.

  • Issue 1: For some colors inside color-grade 45, our checks return a fail when manual checks return a passing grade.
    • A range of rLum values inside color-grade 45 would pass contrast tests against ink #1b1b1b (ie, have a contrast ratio >4.5:1) but our system returns a warning that neither white nor ink is accessible, and returns the preferred token (white by default)
      • Affected rLum range: 0.225 ---> 0.25
        • Test color with 0.225 rLum: #7a8677
        • Test color with 0.25 rLum: #629739
  • Issue 2: For other colors inside color-grade 45, no accessible contrast is possible with project defaults.
    • A range of rLum values inside color-grade 45 cannot pass contrast tests with with either white or ink (ie, have a contrast ratio <4.5:1 when tested against both colors)
      • Affected rLum ranges: 0.184 ---> 0.224
        • Test color with 0.184 rLum: #577c8e
        • Test color with 0.224 rLum: #7e847d

Testing revealed that rLum = 0.225 is the breakpoint that separates the two issues. You can see the errors shift in the following @debug results, which include sample colors with specific rLUM values as well as notes from manual contrast testing with the WebAIM contrast checker:

@debug "#629739: rLum = 0.25, ink passes manual contrast check" calculate-grade(#629739); // returns 45
@debug get-color-token-from-bg(#629739); //returns ink

@debug "#619736: rLum = 0.249, ink passes manual contrast check" calculate-grade(#619736); // returns 45
@debug get-color-token-from-bg(#619736); //returns white and 'Warning: Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `#619736` background. Using `white`. Please check your source code and project settings.

// DHS green
@debug "#5E9732: rLum = 0.247, ink passes manual contrast check" calculate-grade(#5E9732); // returns 45
@debug get-color-token-from-bg(#5E9732); //returns white and 'Warning: Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `#5E9732` background. Using `white`. Please check your source code and project settings.'

@debug "#7a8677: rLum = 0.225, ink passes manual contrast check" calculate-grade(#7a8677); // returns 45
@debug get-color-token-from-bg(#7a8677); //returns white and  'Warning: Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `#7a8677` background. Using `white`. Please check your source code and project settings.

@debug "#598c7f: rLum = 0.224, white and ink fail manual contrast check; black passes manual contrast check" calculate-grade(#598c7f); // returns 45
@debug get-color-token-from-bg(#598c7f); //returns white and 'Warning: Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `#598c7f` background. Using `white`. Please check your source code and project settings.

@debug "#577c8e: rLum = 0.184, white and ink fail manual contrast check; black passes manual contrast check" calculate-grade(#577c8e); // returns 45
@debug get-color-token-from-bg(#577c8e); //returns white and 'Warning: Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `#577c8e` background. Using `white`. Please check your source code and project settings.

@debug "#587e75: rLum = 0.183 white passes manual contrast check" calculate-grade(#587e75); // returns 50
@debug get-color-token-from-bg(#587e75); //returns white

Proposed solution:

To solve, we must:

  1. Include the rLum values that CAN pass contrast tests in the appropriate luminance range grade
    • Action: rLum values of 0.25 > rLum > 0.225 should be included in grade 40
  2. Serve alternate token values with color-grades 0 and 100 (black and white) for color grades that CANNOT pass against system defaults
    • Action: Test $bg-color for color-grade 45 and serve positive results "black" and "white" contrast tokens

Results after implementing this solution:

Note the shift in calculate-grade results. Some items that were color-grade 45 are now color-grade 40. Color-grade 45 now receives black for contrast token

@debug "#629739: rLum = 0.25, ink passes manual contrast check" calculate-grade(#629739); // returns 40
@debug get-color-token-from-bg(#629739); //returns ink

@debug "#619736: rLum = 0.249, ink passes manual contrast check" calculate-grade(#619736); // returns 40
@debug get-color-token-from-bg(#619736); //returns ink

// DHS green
@debug "#5E9732: rLum = 0.247, ink passes manual contrast check" calculate-grade(#5E9732); // returns 40
@debug get-color-token-from-bg(#5E9732); //returns ink

@debug "#7a8677: rLum = 0.225, ink passes manual contrast check" calculate-grade(#7a8677); // returns 40
@debug get-color-token-from-bg(#7a8677); //returns ink

@debug "#598c7f: rLum = 0.224, white and ink fail manual contrast check; black passes manual contrast check" calculate-grade(#598c7f); // returns 45
@debug get-color-token-from-bg(#598c7f); //returns black

@debug "#577c8e: rLum = 0.184, white and ink fail manual contrast check; black passes manual contrast check" calculate-grade(#577c8e); // returns 45
@debug get-color-token-from-bg(#577c8e); //returns black

@debug "#587e75: rLum = 0.183 white passes manual contrast check" calculate-grade(#587e75); // returns 50
@debug get-color-token-from-bg(#587e75); //returns white

Additional information

To reproduce original issue:

  1. Update value of $theme-color-accent-cool: to #5E9732 !default;in packages/uswds-core/src/styles/settings/_settings-color.scss
  2. Compile Sass
  3. Receive the following warning:
    Warning: [Button] Neither the specified preferred color token (white) nor the fallback color token (ink) have AA contrast on a accent-cool background. Using white. Please check your source code and project settings.
  4. Check contrast ratio for both white and ink against #5E9732 in WebAIM contrast checker tool. Ink receives a passing grade 4.87:1. (WCAG AA defines 4.5:1 as passing)
  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

@amyleadem amyleadem marked this pull request as ready for review May 17, 2022 20:48
@amyleadem amyleadem requested review from mahoneycm and mejiaj May 17, 2022 20:48
@amyleadem amyleadem mentioned this pull request May 17, 2022
Closed
4 tasks
mejiaj
mejiaj suggested changes May 18, 2022
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Let's include some grade 45 values in uswds-core/src/test/tests.scss

@amyleadem amyleadem requested a review from mejiaj May 18, 2022 22:02
mejiaj
mejiaj approved these changes May 26, 2022
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding those tests!

@thisisdano thisisdano merged commit 3370c21 into develop Jun 3, 2022
@thisisdano thisisdano mentioned this pull request Jun 3, 2022
Merged
@thisisdano thisisdano mentioned this pull request Jun 17, 2022
Merged
@amyleadem amyleadem deleted the al-luminance-calc branch August 11, 2022 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mahoneycm mahoneycm Awaiting requested review from mahoneycm

2 more reviewers

@mejiaj mejiaj mejiaj approved these changes

@thisisdano thisisdano thisisdano approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Color Contrast Not Calculating Correctly

4 participants

@amyleadem @mejiaj @thisisdano