Color contrast on Settings page's selected menu item is poor

[intrnl]

Description

Settings page has a sidebar and the selected menu item has poor contrast

Steps to Reproduce

1. Open Brave
2. Visit Settings page
3. Notice the selected menu item

Actual result:

Expected result:

Color should be lighter

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

1.39.64 Chromium: 101.0.4951.34 (Official Build) nightly (64-bit)

Version/Channel Information:

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

Other Additional Information:

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

Miscellaneous Information:

Here's what DevTools inspector shows if we isolate them to one color step at a time, the first and second color step is problematic.

Note that the contrast measurements here are taken with APCA enabled on DevTools' experiments section.

[intrnl]

Other area of interest: the Bookmarks page.

It seems rather odd that the sidebar for bookmarks page uses a gray color while other pages uses white. The gray can be hard to read for some folks.

[TheAresjej]

The whole gradients thing is totally pointless. 😕 Being able to choose your own color would be a much better idea.

[aguscruiz]

Already have an updated version with accessibility considerations in mind, as part of the Design system update. https://www.figma.com/file/SWgAHwnjeIY7R7NnT9NDHm/?node-id=0%3A1

Screenshot for reference:

[TheAresjej]

@aguscruiz What is the point of a separate "New tab page" where there is only one option? 😅 In my opinion, it would be a good idea to include this option in the "Appearance" category 😃

[aguscruiz]

@rebron this is already fixed with the new color scheme that's implemented