Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

[mdc-theme] Incorrect ink color for particular background #5416

Closed
@Yavanosta

Description

Bug report

For some backgrounds mdc-theme calculate incorrect ink color.

Ink color for background color is usually chooses using this algorithm:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

But here there is a condition that give priority to white ink color if both white and black are suitable according minimal contrast criteria.

That's why for background #018786 (secondary variant color from base theme) white ink color is white, but contrast for black ink is higher (black has 4.8111258691 white has 4.3648826847). Moreover contrast for white is lower that required contrast for small texts.

Color selection tool offer black ink for this background.

Steps to reproduce

  1. Set secondary color to #018786
  2. run npm start (or open demo page)
  3. Go to fab button demo
  4. Buttons will have white ink color

Actual behavior

Buttons have white ink color.

Expected behavior

Buttons have black ink color.

Possible solution

Remove this condition ($lightContrast < $minimumContrast) from theme component or at least update 3.1 -> 4.5 (4.5 is minimum required contrast for small texts).

Metadata

Assignees

No one assigned

    Labels

    Unresolved (Archived)Open and unresolved issues and PRs that were closed due to archiving the repository.backlogbug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions