C41: fix change of contrast ratio in Procedure

[momdo]

https://www.w3.org/WAI/WCAG22/Techniques/css/C41#tests

The required change of contrast for Focus Appearance (Minimum) is 3:1, this technique goes slightly beyond the minumum requirement.

The success criterion "Focus Appearance (Minimum)" was renamed "Focus Appearance," and "Focus Appearance (Enhanced)" was deleted.
Therefore, the change of contrast ratio shown in the procedure should be 3:1 instead of 4.5:1.

EDIT by @patrickhlauke: also, while here, updated the CSS code sample to match the following image

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	8b067ec
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/683d96d550b3f10008b1f2da
😎 Deploy Preview	https://deploy-preview-4422--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[patrickhlauke]

while we're here ... the hex values in the code sample don't match the image that's then shown in the example.

The code sample uses

background-color: #236AB8; /* medium-dark blue */

outline: 3px #fff5be solid; /* light yellow */

but the example in the image actually uses

background-color: #003366; /* dark blue */

outline: 3px #ffff00 solid; /*yellow */

Suggest changing the example code as well (yes, the example then has a contrast ratio of 11.7:1 ... but this still gives a good example of a strong focus indicator)

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	7ded7a9
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/69c5bed03f80040008fa382a
😎 Deploy Preview	https://deploy-preview-4422--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[w3cbot]

patrickhlauke marked as non substantive for IPR from ash-nazg.