Reduce contrast of rich text toolbar

I propose that we reduce the contrast of the rich text toolbar, which - in my opinion - is heavy and distracting.

Current:

Proposed:

Note that my proposed option (background-color: #606060) renders the dividers (e.g. between I and H2) barely visible. We could make these dividers darker or lighter, but I suggest removing them altogether.

Please use 👍 or 👎, or comment below, on the general suggestion to reduce the contrast.

[nicklee]

Mockup showing how a white background could look:

[nmorduch]

I think:

• I agree with @ollywillans that we should go to a light toolbar, which can have higher contrast without being so in-your-face
• There’s no good reason not to meet AAA anywhere on this site. None of our branding is important enough not to meet AAA. It looks like #595959 is the lightest color that always meets AAA when paired with white.
• Grouping buttons is helpful for finding things quickly. There are ways to do it other than the lines in between, e.g. extra space in between. The lines in the existing design would also probably look better with more padding and with being a little easier to see so that they feel more intentional.
• The active state is less obvious than I would like.

I think that if we want to make an intermediate change, we can lighten the background such that active buttons’ background is #595959, and not make any major changes to the dividers in an intermediate version because I think that that is a change that could make a difference for users.