MetaFam / TheGame

The platform that MetaGame will be played on aka MetaOS - an open source framework for running decentralized societies. Currently featuring MyMeta Profiles, Dashboard & Quests
https://metagame.wtf
Other
131 stars 78 forks source link

Profile page: Dynamically adjust text color to ensure sufficient contrast #1514

Open davort opened 1 year ago

davort commented 1 year ago

What would you like to be added?

When a user uploads a light background image, the color of the text on the profile page should change from white to black.

An example of the current state CleanShot 2023-01-27 at 09 13 44

Why is this needed?

To ensure sufficient contrast between the text and the background. This is a fundamental feature in terms of accessibility.

dysbulic commented 1 year ago

Maybe with CSS's mix-blend-mode or background-blend-mode could cause the color, when combined with the background, to adaptively provide contrast.

Before I can really try and tackle this, I need to understand what a “stacking context” is and what it means to create a new one.