Skip to content
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.

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

fix: page title color contrast meets WCAG AA requirements #9703

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

dgading
Copy link

@dgading dgading commented Mar 15, 2024

Description

The background colors for the version and version-stamp badges in the title do not pass WCAG AA color contrast standards.

  • Updating the grey for the version to $gray-50 is the closest to the original $waterloo-gray that passes testing when using the WAVE testing tool.
  • The green used for the version-stamp was the same as the $color-primary but the style definition didn't use the variable. This change updates the style to use the color variable and changes to darker $japanse-laurel which passes WCAG AA testing.

I looked through the style folder and couldn't find the $color-primary used anywhere else. If the color works for the version-stamp, but not as color primary, I can always switch it back to the previous value and just use $japanese-laurel in the information.scss file.

Motivation and Context

Fixes #9583

How Has This Been Tested?

Using the WAVE Chrome extension, I tested out the various greens and grays in the _variables file until I found some that were close but passed WCAG AA. I didn't go for WCAG AAA as it was a significant change in style.

Screenshots:

Original:
original-page-title-color-contrast
After fix:
bug-fix-9583-color-contrast-screenshot

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • [ x] Bug fixes (non-breaking change which fixes an issue)
  • [ x] Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • [ x] are not breaking changes.

Documentation

  • [x ] My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

a11y: Page title version ID does not have enough color contrast
1 participant