code examples: Removing text-shadow on the AngularJS bits will improve readability

[frederikprijck]

(moved from angular/angular.js#16495 )

I'm submitting a ...

• bug report
• feature request
• 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:

1. Visit https://angularjs.org
2. 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:

[frederikprijck]

@gkalpak As mentioned angular/angular.js#16496 (comment) the styles need to be overridden and not modified, right?

[gkalpak]

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) 😁

[manjitkarve]

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