Bandwidth stats is not shown clearly when blue Gradients/Solid background color is selected

[GeetaSarvadnya]

Description

Follow up of the PR https://github.com/brave/brave-core/pull/14783 Bandwidth stats is not shown clearly when blue Gradients background color is selected

Steps to Reproduce

1. NA

Actual result:

Expected result:

Bandwidth stats should be shown clearly when blue Gradients background color is selected

Reproduces how often:

Easy

Brave version (brave://version info)

Brave	1.45.44 Chromium: 105.0.5195.102 (Official Build) nightly (64-bit)
Revision	4c16f5ffcc2da70ee2600d5db77bed423ac03a5a-refs/branch-heads/5195_55@{#4}
OS	Windows 10 Version 21H2 (Build 19044.1889)

Version/Channel Information:

• Can you reproduce this issue with the current release? NA
• Can you reproduce this issue with the beta channel? NA
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? NA
• Does the issue resolve itself when disabling Brave Rewards? NA
• Is the issue reproducible on the latest version of Chrome? NA

Miscellaneous Information:

cc: @simonhong @petemill @sangwoo108

[GeetaSarvadnya]

The issue is applicable for solid color selction also

[aguscruiz]

Design ready here https://www.figma.com/file/FMuS3IZbzqzQTyRHz42Oix/Desktop-NTP?node-id=2586%3A108235

Already discussed having the text color changing from white to black depending on the background color contrast.

[sangwoo108]

Prototype plan

Colors to be inverted when contrast ratio with light background is too low

• stats
• clock
• right-bottom buttons
• News peek label

How to define luminance of color

references

https://www.w3.org/TR/WCAG20/#contrast-ratiodef%20 https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance https://www.myndex.com/WEB/LuminanceContrast

contrast ratio

contrast ratio
(L1 + 0.05) / (L2 + 0.05), where

L1 is the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the lighter of the colors, and

L2 is the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the darker of the colors.

Threshold

: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, : Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

In our use case, 4.5:1 would be better cause there are small interactive texts and buttons.

how to define luminance of gradient?

For now, we should calculate some average color of gradient. The calculation for linear gradient and radial gradient would be different.

[aguscruiz]

Great! Yeah agreed 4.5:1 contrast would be ideal

[sangwoo108]

This is what I got now. Let me try deploying a storybook for you to play with.

[sangwoo108]

0.45 seems to be too tight threshhold. Even gray and violet background can't pass it. Let me try 3:1.

[stephendonner]

Verified PASSED using

Brave	1.46.81 Chromium: 107.0.5304.68 (Official Build) beta (x86_64)
Revision	a4e93e89d3b3df1be22214603fba846ad0183ca5-refs/branch-heads/5304@{#991}
OS	macOS Version 11.7.1 (Build 20G918)

Steps:

1. installed 1.46.81
2. launched Brave
3. opened a new-tab page
4. clicked on Customize
5. clicked on Solid colors
6. selected various shades of colors
7. clicked on Gradients
8. selected various shades of gradients

Confirmed I was able to see Bandwidth saved text and its count, with high contrast

solid 1	solid 2	solid 3	solid 4	gradient 1	gradient 2	gradient 3	gradient 4