Components: Documentation Website is difficult to read

[diminutivesloop]

It's exciting to see the full website for Angular Material 2 finally take shape. Unfortunately the new design has a very low text contrast ratio that makes the site content noticeably hard to read. Obviously there are stylistic considerations at play here, but since this site is primarily a working resource for developers it seems that readability should be given increased priority.

[elvisbegovic]

Second it!

[jelbourn]

@diminutivesloop can you describe the specific parts of the site where this is an issue?

[diminutivesloop]

I think it's most noticeable on the component documentation and guide pages. It also seems to be dependent on display quality as the pages appeared more readable on my personal MacBook (non-retina) than on my work PC. Also I haven't noticed the same readability issues on the main Angular website.

[davidglezz]

In https://material.angular.io/components/component/snack-bar I see:

The text color is Black 54%
Material design guidelines recommends Black 87%
https://material.io/guidelines/style/typography.html#typography-other-typographic-guidelines
Win10 PC, Chrome 55, no High DPI

[EladBezalel]

Will be fixed with https://github.com/angular/material.angular.io/pull/91

[davidglezz]

Text still at .54

[slimlime]

I'm glad I'm not the only one who is bothered by this. Also https://angular.io/guide/reactive-forms seems to be 0.87 now, but still feels relatively hard to read in comparison to other docs.

tfw you're a newbie web developer and use Chrome DevTools Inspector to adjust webpages to your own readability preferences
Ctrl+Shift+C -> Click on textual element -> edit styles colour to black or red or something cool.

Now check out that contrast ratio in the colour picker!

:: Might be some issue with my extensions on Chrome. Seems readable on other platforms/browsers.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}