Change Text Color on "Aqua" background

[mmfreitas]

NetBox version

v3.1.0

Feature type

Change to existing functionality

Proposed functionality

Change text color on aqua background.

From this:

To this:

Use case

To see the text on an "aqua" background more clearly.

Database changes

No response

External dependencies

No response

[jeremystretch]

So here's an interesting bit of trivia: There's a utility function in NetBox called foreground_color() which is used to determine the color of text over a colored background automatically. We use the RBG code 00ffff for aqua, which resolves to white for its corresponding foreground color.

>>> from utilities.utils import foreground_color
>>> foreground_color('00ffff')
'ffffff'

I do agree that black text is more legible, but I don't recall where the formula it uses came from originally and I'm hesitant to tweak it. Might need to do a bit more research.

[hSaria]

The source of the function appears to be a stackoverflow answer. The RGB multipliers, I believe, come from NTSC's RGB to YIQ conversion formula, where Y, the luma, is for black/white. Not quite sure where the threshold of >186 for black originates from.

[hSaria]

W3 has a page that uses a threshold of 150. On the same page is a slider you can play around with to see how well it works, it works significantly better with 150.

You can check out the source of the W3 page and look for isDark. The class w3color can be found here. It uses the same multipliers as RGB-to-YIQ, but with a 150 threshold on the W3 page.

[jeremystretch]

Reducing the dark threshold to 150 tweaks the text color for several colors, namely fuchsia, agua, light green, orange, and grey. They do seem more readable with this configuration.

[jeremystretch]

Thanks for the pointers, @hSaria!