swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard

fix: page title color contrast meets WCAG AA requirements

Open dgading opened this issue 2 years ago • 0 comments

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.

dgading avatar Mar 15 '24 16:03 dgading