High contrast mode needs some more refinement

forgot the mobile viewport. made a few additions to the issue summary

mmm, i can't reproduce it @rkoller

so you said:

enable automatic dark mode ticked, forced colors active and preer contrast set to more

In the system OS settings on Mac OS i have enabled dark mode
in MS Edge browser i have enabled forced-colors: active
and this preer contrast set to more i think you were talking about system OS settings again? I see range bar in the settings to increase contrast (or this setting somehow i can apply inside of MS Edge)?

no all those three settings were set within ms edge (@mherchel provided the instructions for this handy feature testing high contrast mode a while ago on slack if i remember correctly). you have to add the render tab either to the quick view or move it to the activity bar on top in the ms edge devtools:

and i then only set and adjust those three settings highlighted:

Added WCAG 2.2 success criteria and moved steps to reproduce into its own section for easier readability.

I can't find solution for this, maybe some hints?

Maybe we can replace CSS mask-image with embedded svg icons ? Or to use iconic font and content css property (but embedded technology is better)

I have updated the latest screenshot in the issue summary