swagger-ui
swagger-ui copied to clipboard
fix: page title color contrast meets WCAG AA requirements
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-50is the closest to the original$waterloo-graythat passes testing when using the WAVE testing tool. - The green used for the version-stamp was the same as the
$color-primarybut the style definition didn't use the variable. This change updates the style to use the color variable and changes to darker$japanse-laurelwhich 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:
After fix:
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.