[mdc-theme] Incorrect ink color for particular background

[Yavanosta]

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

[Yavanosta]

Problem

To determine ink color for each given background color the mdc-theme-tone function used. I has following algorithm:

1. Determine contrast between background color / black and background color / white.
2. If background color / white contrast > 3.1 -> ink color white
3. Else use ink color with the maximum contrast.

This algorithm is not compatible with our default theme because for secondary varian color (#018786) it return white ink.

Possible solutions

1. Hardcode black ink for secondary variant color. It can be done because automatically defined color can be overrider with manually set if they does not satisfy requirements.
2. Tune color definition algorithm:
   1. Tune force white cut off for example to 4.5 (minimum contrast for small captions)
   2. Use contrast only to determine ink color (always choose ink with maximum contrast). Same as currently but without 3.1 cut-of.
   3. Use YIQ color palette and check if Y >= 128 (or vice versa).
   4. Use HSL color palette and check if L >= 0.5
   5. Use Color difference and choose color with maximum difference

All this algorithms re not silver bullet because there are a lot edge cases where changing algorithm change ink color from white to black or from black to white. Additional research should be done to find out the best algorithm for tone detection.

Here is very brief overview of affected cases:

| Current | [i] Current (4.5) | [ii] Max contrast | [iii] YIQ | [iv] HSL | [v] Color Diff | | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | | | |  |  |  |  | |

Since for now Secondary Variant is not used algorithm will not be changed as not to make breaking changes.