Denote removed suggested privacy policy text in a more noticeable way on the privacy policy guide

[garrett-eclipse]

In [48145]/#47327 the italics were removed from the privacy policy guide. This was used to help differentiate the sections of removed text on the guide. With this change there's not much visually different now, just a change of colour (#444 > #666) and weight (400 > 600).

This ticket is to revisit how we denote removed sections in the privacy policy guide. While there is the #49264 to explore a redesign of the entire section this issue is more of a bug and am hoping to address within 5.6.

[garrett-eclipse]

Screen showing normal section.

[garrett-eclipse]

Same section but marked as removed

[garrett-eclipse]

Potential Concept: Apply the warning left border, change color more (#999), Reduce weight instead of increase it (200). Thoughts?

[garrett-eclipse]

Initial patch to change the notice to a warning, and lighten the color and weight of the privacy-text.

[garrett-eclipse]

Screen of initial patch

[garrett-eclipse]

Alternate patch to leave the notice an info and instead apply a left warning border down the length of the removable text.

[garrett-eclipse]

Screen showing Alternate Patch

[garrett-eclipse]

I've uploaded two design options for illustrating the removable policy content when a plugin has been removed.

Initial Option - 51435.diff
*Makes the notice a warning and lightens the font color and weight of the removable text.

Alternate Option - 51435.alt.diff
*Leaves the notice a info and lightens the same as the other but places a warning styled left border along the length of the removable text to illustrate all that can be removed.

[audrasjb]

Hi,
The second option look really great to me!
The first one is great too, but I'd "vote" for the second one.

I tested 51435.alt.diff and it applies nicely on my side 👍

[sabernhardt]

Between the two options, I prefer adding a border. However, I have trouble reading medium-gray text against a gray background, so I don't want the text lightened any more.

Contrast ratios in removed text sections:

• 2.52:1 #999/#f1f1f1 (regular text)
• 2.85:1 #999/#fff (sample text)
• 3.63:1 #707f8f/#f1f1f1 (H2 headings)
• 1.53:1 #ffb900/#f1f1f1 (yellow border)

Also, if H2 headings are a different shade and/or weight, the same probably should be applied to the H3 and other tags.

[sabernhardt]

a section with H3 headings (using 51435.alt.diff)

[garrett-eclipse]

Refresh to go with the alt (left yellow border), avoid contrast issues and apply font styling to all heading levels.

[garrett-eclipse]

Thanks @audrasjb / @sabernhardt let's go with the alt (left yellow border) as it will also let us denote the section without affecting contrast too much (hopefully). Please see 51435.2.diff would love a recheck on contrast there, if it's still not passing feel free to supply some suggested hexes.

[audrasjb]

@garrett-eclipse FWIW, it looks like #777 foreground color doesn't pass WCAG AA against #f1f1f1 foreground. The old #666 foreground color was ok.

The rest of the patch looks great to me :-)

[garrett-eclipse]

Refresh to use #666

[garrett-eclipse]

Replying to audrasjb:

@garrett-eclipse FWIW, it looks like #777 foreground color doesn't pass WCAG AA against #f1f1f1 foreground. The old #666 foreground color was ok.

Thanks for the note @audrasjb updated in 51435.3.diff to use #666.

Let's move this along if you're happy.

[audrasjb]

Great! 💪

[sabernhardt]

Thanks! That's better.

[SergeyBiryukov]

In 49170:

Privacy: Denote removed suggested privacy policy text in a more noticeable way.

Props garrett-eclipse, sabernhardt, audrasjb.
Fixes #51435.