🖍 [Story interactive] Color Logic for A/B/C/D Bubbles for Image Quizzes #35174
Conversation
|
Hey @gmajoulet, @mszylkowski! These files were changed: |
mszylkowski
requested review from
processprocess and
mszylkowski
and removed request for
newmuis
|
Just a thought: IMO when the background colors is close to halfway in the brightness spectrum, the text color is easier to read when it matches the theme of the component. However, logic wise I don't think we have a way to make this work, since the contrast checker prefers the black text to the white text almost by 2x the contrast (link) and the logic theoretically should have nothing to do with the background of other parts of the UI that are not directly behind the text anyways. TL;DR: There are some cases that matching the font color to the theme might make the text more readable, but I'm not sure there's much we can do since the contrast values in the example favors black text.
|
| content: '' !important; | ||
| display: block !important; | ||
| width: 100% !important; | ||
| height: 100% !important; | ||
| border-radius: 50% !important; | ||
| position: absolute !important; |
There was a problem hiding this comment.
Nit: Do we need this change? I'd think it's better the other way (and also, it's not related to the ABCD coloring)
| * @param {!Element} root | ||
| * @private | ||
| */ | ||
| setBubbleColor_(root) { |
There was a problem hiding this comment.
Nit: setBubbleTextColor_ helps understand that you're just changing the text color and not the background color
I definitely agree |
For A/B/C/D bubbles on image quizzes: Set the background color to the accent color (can be customized by user) and automatically set the text color to be a readable color based on the background color
Demo: https://interactive-img.web.app/color-logic/quiz.html
Apologies for messy commit history, only the last 5 commits are relevant (as of the initial PR)
Closes #35183
/cc @mszylkowski
/cc @processprocess