Purchases: Certain texts on expired upgrades are hard to read

[hafizrahman]

On https://wordpress.com/purchases:

On On https://wordpress.com/purchases/:site/:purchaseId

From the CSS it looks like there's an added opacity of 0.6 to these texts. I don't see why it's a good idea to make an expired upgrade's information to be harder to read. An expired upgrade can affect a user's site negatively in various ways. Wouldn't it be better if we present that information clearer?

Here's the WCAG color contrast checker result for the least contrast-y text color on those screenshots: http://webaim.org/resources/contrastchecker/?fcolor=668eaa&bcolor=f3f6f8

Normal Text
WCAG AA: Fail
WCAG AAA: Fail
Large Text
WCAG AA: Pass
WCAG AAA: Fail

[mikeshelton1503]

The reason for the dropped opacity is to focus the user on the red notice which explains to the user the issue and the action to solve it. The intent wasn't necessarily to make the other info hard to read though. We could set the opacity back to 1 for the text, leaving the background color as is.

[Lochlaer]

Adding to this report that the list of upgrades on the /Purchases page has the same problem. Important information like the URL and the type of upgrade that needs renewal is in really low contrast font. I literally had to squint a bit to read it, and my eyesight is in the normal range for my age (mid-forties).

The font styles failed the AA Color Checker Test:

[fabianapsimoes]

Pinging @mikeshelton1503 for feedback on Marjorie's findings.

[mikeshelton1503]

So the colors used here are consistent with other areas of Calypso so I think this should be brought up a broader scale. Let's leave this open for now and I'll use it as a basis to start the conversation.

[davewhitley]

Aside — can we make sure that the color Marjorie is referring to is using a color variable? The one she tested is not in our handbook I don't think. Doesn't affect the accessibility though, I just wanted to make sure.

[mikeshelton1503]

can we make sure that the color Marjorie is referring to is using a color variable? The one she tested is not in our handbook I don't think.

Yep it's using gray. The color checker must have just sampled it slightly incorrectly.

[fabianapsimoes]

@mikeshelton1503 did anything come out of this issue, or should we call this a won't fix?

[mikeshelton1503]

No nothing has been started in this area AFAIK, however we don't need to keep this one open. Any change here will need a broader effort.

[fabianapsimoes]

Thanks, Mike! I'll close this one then.