angular
code examples: Removing text-shadow on the AngularJS bits will improve readability
(moved from https://github.com/angular/angular.js/issues/16495 )
I'm submitting a ...
- [ ] bug report
- [ ] feature request
- [x] Documentation issue or request
- [ ] other
Current behavior:
On https://angularjs.org, the styling on the AngularJS bits (tags, attributes, placeholders) in the code examples include a white colored text-shadow on a light blue background. This makes text difficult to read from 2-3ft (for example, a desktop monitor).
Expected / new behavior:
The text doesn't need the white text-shadow. The light blue background is enough to identify it as AngularJS related.
Minimal reproduction of the problem with instructions:
- Visit https://angularjs.org
- Scroll down to one of the code examples
What is the motivation / use case for changing the behavior?
Changing will improve usability and possibly accessibility.
Environment
Chrome 65, Firefox 59, Ubuntu 16.04
Angular version: NA
Browser:
- [x ] Chrome (desktop) version 65
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x ] Firefox version 59
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: NA
- Platform: Linux
Others:
@gkalpak As mentioned https://github.com/angular/angular.js/pull/16496#issuecomment-374209194 the styles need to be overridden and not modified, right?
I think the styles should be changed wherever that light blue background is applied (i.e. docs.css afaict). I would also experiment with a lighter shade of blue (instead of or in addition to removing the text shadow) :grin:
Hi,
Apologies if I'm speaking out of turn. Removing the text-shadow and darkening the foreground text (to #132448) also works:
Making the light-blue lighter will reduce its contrast against the grey background which is probably not good from a11y point of view.
Just my 2c.
Regards, Manjit
