Make highlight-color lighter yellow

[humitos]

Small change to make the highlight-color a little lighter.

I found that with this change it's easier to read what's highlighted, but still easily realized where is the highlighted text.

Before

After

NOTE: I don't know how to build these .sass files, so maybe the change is completely wrong.

[agjohnson]

I'm not opposed to a lighter yellow, but here are some notes on this design change:

• The lighter version of yellow could be less .. absolute yellow (rgb(255,255,0)). There is middle ground that retains the warmth of the current yellow
• The lighter version of yellow might not be visually recognizable for readers with visual impairments (too low of contrast to the white background).
• The current version is similarly not high enough contrast overall, depending on what text is highlighted (2.37/4.5), so a lighter color would help correct this.
• I might support using a design feature on top of a background color change to aid users in recognizing these highlight elements

So, given the above, I'd be more enthusiastic about something like:

This example:

• Changes the font color on search results from gray to #40404 -- this is a separate issue, and we don't have good reason to use a muted color here
• Implements a strong underline to retain visual distinction between highlight and standard text
• Mimics other elements that we have that use a 2px border
• Uses the same highlight color, but with lower alpha
• Has a contrast ratio of 8.46:1 on highlighted text

[humitos]

Thanks @agjohnson! I like your proposal. I will give it a try.

[humitos]

I followed your recommendation and end up on this:

[humitos]

NOTE: I don't know how to build these .sass files, so maybe the change is completely wrong.

Just for the records, I was able to npm install and then npm run build. Then I installed this folder with pip install -e . and build a set of documentation with this theme. It worked!

[jessetan]

How does this new color look when combined with the browser native highlight color using Ctrl-F/Cmd-F?

[humitos]

@jessetan take a look at these screenshots

Firefox

Chrome

I'm not sure if all the OS use the same colors for this, or if it even depends on some other color settings.

[agjohnson]

There are CSS selectors to control the highlight color inside elements, it's something we could add here if we wanted.

Do the proposed changes seem okay so far? Is it clear text is highlighted, or does it maybe look too much like a button now?

[jessetan]

There are CSS selectors to control the highlight color inside elements, it's something we could add here if we wanted.

Are you referring to ::selection? I think that only works for user-selected text, not the browser search highlight color.

[agjohnson]

There are two outstanding changes here around color names/values. Marking WIP.

[humitos]

I won't be able to finish this PR. It may be better if @nienn can take ownership of it, probably. What do you think, @nienn?

[nienn]

@humitos sure, I can do that.

I guess also that the changes in this PR and in the #1170 should be combined, as they are affecting the exact same thing. I'll probably pull those changes here to bring the conversation back where it started.

[humitos]

I don't think I will come back to this PR again. @benjaoming feel free to re-open and update it if you consider it useful.