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

[agjohnson]

Probably should have reviewed instead of comment. I'll request more changes here, I don't think the current change is the best solution to this problem.

[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?

[agjohnson]

Looking close. My notes are for code organization and color selection.

The grey I noted to change to a darker color is:

[agjohnson]

Colors are already defined as variables, #404040 should be a named color already. The yellow you have defined here is different than the yellow defined via Wyrm and should be used as a named color variable either way.

I'd also support using #404040 as the font color for #search-results, so that the text in our search results is easier to read.

[humitos]

If I understand correctly, wyrm defines gray-dark as #333333 and gray as #555555. So, they are not exactly the same as #404040. What I should do?

I was thinking on adding as a variable with the highlight- prefix, like:

// Sphinx highlight color
$highlight-background-color:          rgba(255, 220, 0, 0.5)
$highlight-text-color:                #404040

[humitos]

from bower_components/wyrm/sass/wyrm_core/_wy_variables.sass:

$black:                               #000 !default
$gray-darker:                         #222 !default
$gray-dark:                           #333 !default
$gray:                                #555 !default
$gray-light:                          #999 !default
$gray-lighter:                        #ccc !default
$white:                               #fff !default

[agjohnson]

I'd probably use $gray-dark. The visual difference between #333333 and #404040 is pretty marginal.

[agjohnson]

This is a different shade of yellow than the defined yellow from Wyrm. It would be better to drop the alpha channel and instead use a tint of the defined yellow from Wyrm. rgb(248,225,135) is a closer approximation of this.

[humitos]

I don't follow you here.

I found Wyrm defining $yellow as #F1C40F which is rgb(241,196,15).

Where rgb(248,225,135) comes from? Why it's better than my suggestion?

[agjohnson]

rgb(248,225,135) is a lighter tint of $yellow. HSL is easier to understand than RGB here:

• $yellow == rgb(241, 196, 15) == hsl(48.1, 89%, 50.2%)
• light yellow == hsl(48.1, 89%, 75%) (we increased l (lightness) from 50% to 75%) == rgb(248, 225, 135)

[humitos]

Niiiice! Thanks a lot of the explanation ;)

[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.