the following ctas(button) on the nvda website: 'Free Download' and 'Donate' are orange(bg) with white(fg) text. Would this fail color contrast compliant test?

[ronra]

Steps to reproduce:

Go to nvaccess site and you'll see the following cta(buttons): 'Donate' and 'Free Download' on the page.

Actual behavior:

Color contrast combination: orange background with white text would fail the tool (which would be webaim color contrast)

Expected behavior:

The question is regarding the site itself for nvda. Are ctas required to meet color contrast compliance in regards to WCAG 2.0?

System configuration:

N/A

NVDA Installed/portable/running from source:

N/A

NVDA version:

N/A

Windows version:

Windows 10

Name and version of other software in use when reproducing the issue:

N/A

Other information about your system:

Other questions:

N/A

Does the issue still occur after restarting your PC?

N/A

Have you tried any other versions of NVDA?

N/A

[josephsl]

CC @feerrenrut

[Brian1Gaff]

Hmm, of course lost on me, but what would be a good colour scheme? I would suggest that this would very much depend on the eye condition. Dark buttons with bright writing are usually preferred from those I know. The inverse can tend to wash out the text if the eye is easily overloaded and bleaching occurs. Brian

[feerrenrut]

I think this does fail the compliance test, and is something that NV Access would like to address. Thanks for pointing it out.

These colours match the branding and logo and so we are hesitant to change them. WCAG recommends using a halo to improve the contrast around the text in these buttons.

From the definition of "contrast ratio" in the glossary of WCAG2.1

NOTE
When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background.

Some intereseting discussion on this approach when others have encountered this issue: GoogleChrome/accessibility-developer-tools#302
CodeforAustralia/school-finder#191

The current "Donate" button looks like this:

Using text-shadow: 0 0 0.001em black; to make the text look like the following:

The current banner text:

And with the shadow applied.

Further down the page are prices for featured products, these are orange on white:

And with the shadow applied.

[feerrenrut]

We should run these images by Emma for advice on whether applying the shadow is ok, and if she has any suggestions on how to address the styling of prices of featured products.

[feerrenrut]

Quentin is going to have a play with the colours, and then Reef will update the website.

[feerrenrut]

We have added text shadows to improve the contrast on these items, these will still fail many of the automated tools (which don't take the text shadow into account), however we believe that we have addressed the contrast requirements for these buttons.