Contrast color edge cases & slightly different dark text color

[dkimmich-onventis]

:ghost: Brief Description

I am using the auto contrast colors feature. It works fine for most of the cases. However there are some edge cases where this feature returns a color which has a worse contrast. As an example, when using the color #f0002f, the light color is used as contrast color. It has a contrast of 4.42:

Choosing the dark color as contrast color would increase the contrast to 4.47:

Also I noticed that Angular Material uses #000000 on their buttons, but this library sets rgba(0, 0, 0, 0.87). Setting it to #000000 would improve the contrast, in this example it would increase to 4.74 and pass validation:

:pancakes: Version

5.0.2

Steps To Reproduce

Steps to reproduce the behavior:

1. Set primary / accent / warn color to #f0002f
2. Check the contrast color, for example on a raised button

:police_car: Expected behavior

Black is chosen as text color, as it has the better contrast.

[json-derulo]

The current approach for choosing between light and dark text indeed doesn't always choose the best contrast. I am working on a fix.

Regarding the dark contrast colors, they are a big mess in Angular Material. For most of their buttons, they use #000000 as the dark text color. Except for the icon button, there they use rgba(0, 0, 0, 0.87). On other elements like the chips, they seem to use rgba(0, 0, 0, 0.87) as well. With Angular 17 this might change, as they are refactoring a lot under the hood with the token-based Theming API. So I would suggest we wait until Angular 17 is out (should happen in the next 4 weeks) and then check again which colors they use on their buttons. Based on that we can align this library.