question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add missing typography color contrast / text colors

See original GitHub issue

Would it be possible to add the missing typography color contrast / text colors outlined on https://material.io/guidelines/style/typography.html#typography-other-typographic-guidelines. For example, caption is 54%, body1 is 87%, etc.

I couldn’t find documentation that these exist on https://material-components-web.appspot.com/typography.html.

Looks like color contrast in MDL was implemented in https://github.com/google/material-design-lite/blob/mdl-1.x/src/_mixins.scss using opacity

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
lynnmerciercommented, Jul 27, 2017

It is confusing…I’m confused…I’m going to talk with our designers more and see if I can clarify when you use the typographic system, and when you use the color theming system

1reaction
touficbatachecommented, Jul 6, 2017

I can do it 😃 Should I add it using mixins? (I’m not really familiar with them 😅) @amsheehan

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Fix Your Low-Contrast Text - Ben Myers
Missing alternative text for images; Empty links; Missing form input ... The easiest way to get started is with a color contrast checker....
Read more >
Understanding Success Criterion 1.4.3: Contrast (Minimum)
People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person...
Read more >
Set Typography text color in MUI - reactjs - Stack Overflow
Material UI clearly separates palette (colors) from typography (font definitions). I don't think you'd want to mix them by defining color in the ......
Read more >
Understanding WCAG 2 Contrast and Color Requirements
Text over gradients, semi-transparent colors, and background images still need to meet contrast requirements, but WCAG does not provide any ...
Read more >
Tips for Creating Accessible Design: Color & Typography
Additionally, poor contrast between foreground and background colors can be hard to see for users with low vision. When designing, an easy way ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found