[evidence] Upload file button - must have sufficient color contrast

[khalidelaggan]

Summary

Please ensures that the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

Design Detail

Recommended Solution

To solve this violation, you need to fix the following:
Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1

Checker result

[khalidelaggan]

I'm assuming Figma has a built in contrast checker, however I'm adding here my favourite tool

https://whocanuse.com/

[amazingphilippe]

I think this is a classic case of the white-on-blue wcag fail. I would suggest staying away from this combination of colors.

We could go towards a neutral palette. We want to avoid greens and reds because they mean something, and we want to avoid failing color contrasts like white-on-blue. A neutral palette or a darker blue seems like a simple fix for now.

[Myndex]

I think this is a classic case of the white-on-blue wcag fail. I would suggest staying away from this combination of colors.

HI @amazingphilippe I happened to come over here as I saw you linked to the issue I created last year regarding the WCAG contrast math problem. I am the principal researcher for the new visual contrast methods and standards, in the process of fixing this problem.

If you have a requirement to meet WCAG 2.x, then you can get the same perceptual look with a minor change: make the color #3177CE

You'll notice that I only lowered the GREEN very slightly!

This is because that VAST majority of luminance comes from green. Blue contributes almost none. As a result you'll see that #3177CE looks almost the same as #3182CE, except that #3177CE BG and #FFF text meets WCAG 4.5:1 using the WCAG math. TIP: if you have a color pair that you like but fails the current WCAG but is close, make a change to the green channel to improve contrast.

The Future

FWIW, the reverse contrast issue such as this white on blue is an example of the WCAG false fails. The new standard will not be published for a couple years, and if you have a legal requirement to follow the current 2.x standard, then disregard what I am about to say. What follows is NOT normative and not yet a part of any official standard.

The nature of human visual perception is such that blue is fine as a design element, provided it is the darkest of a given pair of colors. The fact that WCAG fails it is due to some incorrect math, not an actual accessibility issue. In fact I have some ongoing experiments that show that white on a medium to dark blue background can actually be an accessibility HELPER for some forms of impairment, particularly older eyes that suffer from glare/scatter.

But also realize that helping one impairment may be negative for another. However, the only color vision deficiency that can have a problem with white text on blue BG is the very rare blue cone monochromat (something like 1 in a million), and they need assistive technologies (monochrome monitors, reduced luminance environments, etc.)

I have a live contrast checker tool that demonstrates the work in progress. It is preliminary, and not the standard as yet, but feel free to bash around with it — you'll see there are fewer false fails, but more importantly, fewer false PASSES which is the more substantial problem we are working to solve.

Work In Progress SAPC Contrast Tool: https://www.myndex.com/SAPC/

Along with this, I also have a CVD simulator based on the Brettel model (generally considered an accurate representation of the most common color vision deficiencies) which is here: https://www.myndex.com/CVD/

Please feel free to ask me any questions.

Regards,

Andrew Somers
Color Science Researcher

[khalidelaggan]

Thank you so much Andrew for your insight on this, greatly appreciated!

[khalidelaggan]

@amazingphilippe 👍