[a11y] VPN guarantee copy does not meet minimum color contrast threshold

[alexgibson]

Description

The "30 money back guarantee" copy on the VPN landing page does not meet the minimum required color contrast threshold.

Steps to reproduce

https://www.mozilla.org/en-US/products/vpn/

Expected result

The copy should meet the minimum required contrast

Actual result

Environment

N/A

[janbrasna]

For the occurrences on white background the $color-moz-dark-green (#005e5e) would pass both AA and AAA, however there's also an occurrence in plan comparison table on grey background, and that one would fail AAA for smaller text: https://webaim.org/resources/contrastchecker/?fcolor=005E5E&bcolor=EDEDF0

Also note this one has an icon in matching colour that needs to be updated along with the text:

[alexgibson]

@janbrasna this looks like a good match to me. The icon is an SVG, so we can hopefully just edit the hex color to match :)

[janbrasna]

@alexgibson Do you necessarily strive for WCAG AAA or just AA would suffice? I can either try more colour combos to get the needed contrast even over the grey background for pricing/plans table, or another option would be to move the green guarantee out of the grey box just underneath it (which is perhaps unnecessarily complicated).

Do you want to just pass the aXe tests for now (where 6.5:1 might be enough), or would you like a proper AAA contrast in the table too?

(I haven't moved forward with these tiny https://github.com/mozilla/bedrock/labels/Good%20First%20Bug fixes to let someone from the community work on that, but you probably want to pass the daily a11y tests rather soon to stop triggering the failure notifications in all the channels, so I'll slowly tackle these, too…)

[alexgibson]

@janbrasna yourself or anyone else is welcome to work on these, but yes I am not going to let them sit here as I’d like to start expanding coverage once we get the test job passing. Thanks for taking a look!

Right now I think just AA would suffice and at least allow the test job to be happy.

[janbrasna]

This 6.5:1 is not too far from AAA 7:1 for this small size, but passing that would mean using a custom colour outside from the Protocol palette so the PR #15038 only reaches AA for now, let's see at least what contrast ratio does aXe deem as sufficient.