Understanding different contrast of a pink/purple background and white/black text

We are trying to provide a better UX in our charting library and we are facing some issues when we need to choose automatically the more readable text color when we need to render a text over a chart geometry (bar/slice).

We used the WCAG 2.0 color contrast code to determine the contrast and choose if a pure black or a pure white obtain the right color but there are always some cases where we haven't reached good results. I've finally found your research and, since it will be applied to WCAG3, I'm really interested in testing it. I've used your code and played a bit with various versions of the coefficients but I'm getting a strange result when the background has a particular pink/purple hue like #CC69FD

With APCA, the white text (-61) has better contrast than the black one (48), which is completely the opposite of the WCAG 2 contrast (2.9 for white, 7 for black)

I've also checked the white on purple contrast using your CDV simulator and the white text on the purple background get's completely unreadable with Monochromat (Blue Cone), Missing L & M cones (no red/green) where the black over purple still readable in most cases

Is there any specific reason for that huge difference? I know that the argument is very complex but I was wondering if there was something I can do to improve the text contrast under similar conditions.

Hi Marco, @markov00 Thank you for reaching out.

The short answer to this question...

Is there any specific reason for that huge difference?

…is that WCAG 2.0 is not perceptually correct, it does not follow human perception of contrast for the use case of reading computer monitors. I am on record (WCAG issue #695) that the 1.4.3 is not a valid measure of contrast for readability. This is obviously not the official position of the W3! Officially I can not tell you to not use WCAG 2.x, because it is codified into law in some jurisdictions. Nevertheless WCAG 2.x contrast is only “semi-valid” when the background is lighter than about #999 to #A0A0A0, AND the text is darker than the background.

WCAG 2.x does not really work for cases where both colors are darker than about #808080 (creates false passes) and also does not work for many cases where the text is lighter than the background (creates false fails). In testing sets of thousands of random color pairs, WCAG 2.x false passed as many as 49% (relative to total passes), and false-failed around 22% (relative to total fails).

APCA was developed for WCAG 3 to correct these kinds of issues. However, I have to tell you that WCAG 3 is not yet a set standard, so the legal ramifications may vary depending on the region/nation you are in. Also, APCA is still in the beta stages, while it is clear it is superior, there will be some fine adjustments and some further work.

Here are two articles that describe the differences and compare APCA and WCAG 2.x:

Orange You Wondering About Contrast?

The Lighter Side of Dark Backgrounds

The TL;DR is that APCA is both perceptually uniform and the subsequent guidelines better help those with visual impairments.

Regarding CVD

Here’s the thing regarding Blue Cone Monochromacy: You can’t really do a visual design for it.

First, it is incredibly rare. But second, the condition requires assistive technology no matter what. BCM is co-morbid with very low vision, as the blue cones are very sparse, vacant in the foveal (central vision) area, and otherwise not a part of how the visual cortex filters for fine details like text. And BCM patients typically have severe photophobia as well. It is a tragic edge-case that is outside the content creator’s control, other than to ensure that AT hooks like Aria and semantic HTML are properly used, as BCM typically need to use screen readers due to low vision. At the very least they need to use a screen adjusted or modified for their use.

On the other hand, Protan and Deutan types make up 99.98% of the CVD types, and this group also makes up about 6% of the total population. Definitely design for protan and deutan types, meaning adequate contrast and use more than color (hue) for coding information.

So, for addressing BCM, mainly ensure that content is good for assistive technologies. Tritan types are also rare, and not particularly stricken in terms of readability, as blue is not a major part of reading (in fact blue is a problem for reading for many people due to glare and other issues). Nevertheless, again, never rely on hue as the sole means of coding information.

Please let me know if I can answer any other questions.

Thank you!

Andy

Andrew Somers
AGWG Invited Expert
Myndex Color Science Researcher

I can't see the text in one of the boxes. Turning "high contrast" on and off does nothing to help.

It's the box in the middle row on the right side in the second image example. I can read all the others with or without "high contrast" turned on.

Hi @jmp407

Correct, that is a simulation of an impairment known as blue cone monochromacy (BCM) which is a tragic but very rare color vision deficiency (CVD) where the individual has no L or M cones. They literally cannot see the majority of the spectrum of visible light, and are the only CVD that is actually “color blind” and in fact, stricken with severe low vision and photophobia.

BCM is a CVD issue and unrelated to APCA/SAPC. One thing the CVD simulator does not model is the severe low vision of BCM, which necessitates assistive technologies (AT).

If you want to experiment with how different CVD types perceive things, the simulator is:

https://www.myndex.com/CVD/

Please let me know if you have questions .

Thank you,

Andy

Thanks for the reply Andy. I see that I was using the repo wrong. Since I have a CVD, I was trying to measure my CVD influence on the contrast regardless of a web site's design contrast. After some more research I'm back to blaming Microsoft and now Google for promoting "material design" that has some contrast too low period. Let me know if I can be of help in your research. I've known about my CVD since childhood but can't recall what it's called or how severe it is exactly.

jmp 167 Justin Dr Mooresville, IN 46158 Jan Pottinger Mobile: 636 542 1017

On Tue, Sep 28, 2021 at 4:10 PM Andrew Somers @.***> wrote:

Hi @jmp407 https://github.com/jmp407

Correct, that is a simulation of an impairment known as blue cone monochromacy (BCM) which is a tragic but very rare color vision deficiency (CVD) where the individual has no L or M cones. They literally cannot see the majority of the spectrum of visible light, and are the only CVD that is actually “color blind” and in fact, stricken with severe low vision and photophobia.

BCM is a CVD issue and unrelated to APCA/SAPC. One thing the CVD simulator does not model is the severe low vision of BCM, which necessitates assistive technologies (AT).

If you want to experiment with how different CVD types perceive things, the simulator is:

https://www.myndex.com/CVD/

Please let me know if you have questions .

Thank you,

Andy

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Myndex/SAPC-APCA/issues/16#issuecomment-929586832, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKLOFE3LJQVQL5XRB2QNB3UEIOJ5ANCNFSM5EL7AN3A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Hi Jan @jmp407, thank you for getting back.

I see the confusion. The screen shots are from the CVD simulator, And APCA is a new contrast method for WCAG 3, to replace WCAG 2.x. The CVD sim is not part of APCA, but is used for research and testing.

There is a lot of poor contrast on the web — I just saw an automated survey that indicated that over 80% of sites have poor contrast. But also, the old method for WCAG 2.x is not perceptually accurate, and allows some dark color pairs to pass with low contrast. APCA is designed to fix these kinds of issues.

You might be interested in the research tool, at https://www.myndex.com/SAPC/ if you click on research mode, there are some interactive tools that demonstrate some of the concepts.

As for help: indeed, we have some ongoing empirical studies, and I am very interested in additional data regarding CVD.

If you'd like to be informed of tests and surveys you can participate in, please send an email to cvdstudy@myndex.com with "CVD Participant" in the subject line please.

And also please feel free to ask questions about any of the technologies being developed.

Thank you,

Andy

Andrew Somers
AGWG Invited Expert
Myndex Color Science Researcher

Thank you @Myndex for the great explanation. I understood the fact that WCAG 2.x doesn't work very well in every case but, in my purple case it the dark foreground on purple background looks more readable to me then the high contrast with white text (the black text looks more relaxed contrast and more easily readable then the white powerful contrast). In any case thanks so much for that work, that finally solves a lot of issues around color contrast.

I've one last quick question: with this algorithm, if I need to check what text color between black or white has more contrast with the current background, should I always compute both the contrast with white and the one with black and find the absolute highest? Is there a simple way to compute the contrast with the opposite text color, like (Max APCA value - abs(contrast_with_white_text) ?

Hi @markov00

.... in my purple case it the dark foreground on purple background looks more readable to me then the high contrast with white text (the black text looks more relaxed contrast and more easily readable then the white powerful contrast).

There is certainly more to readability that just the color pair — there are a lot of other factors. To keep this new paradigm as simple as possible, it is still just looking at pairs and then adding in font weight and size. But there is so much more.

To answer this, I'd need to see your actual use case and not the AIM samples posted above to give further guidance. From the AIM samples you provided and looking on a couple difference devices, some in dark mode, some in light mode, I can tell you the black on the purple in the above sample is nearly invisible to me, and also one of my test subjects that I recently showed it to (casually, not in a controlled experiment).

Nevertheless, your point on "too high" contrast is well taken, and in fact APCA does specify an upper bound for large bold headlines. Body text though is a different issue, which is why I'm asking about our use case where you'd prefer the black on purple. Can you show me a screenshot? You can send it to me privately via: cvdstudy (at) myndex.com

When it comes to reverse (light on dark) your eye adaptation level has much to do with your contrast perception.

There is a massive different between this:

And this:

fiveboxingwizardsbold

But the colors are identical. What is different is the context, size, weight, and surround. Without knowing the context etc., the color pair is nearly meaningless.

Context, size, weight, and surround are often more important than the color pair. APCA takes this into account partially, but there is a limit to what can be advanced in a standard for a variety of reasons. WCAG 3 contrast is a big step in that direction.

In any case thanks so much for that work, that finally solves a lot of issues around color contrast.

Thank you, much more work going on in the lab.

_I've one last quick question: with this algorithm, if I need to check what text color between black or white has more contrast with the current background, should I always compute both the contrast with white and the one with black and find the absolute highest? Is there a simple way to compute the contrast with the opposite text color, like (Max APCA value - abs(contrast_with_whitetext)?

There is a reverse version if that's what you're asking (see the "constant contrast" demo at https://www.myndex.com/SAPC/ ). But I am revising it right now.

Nevertheless, the goal is not necessary to always have "maximum" contrast, and it is very dependent on the use case. Body text is one thing that needs Lc75 to Lc90 but on the other hand, large bold headlines can be difficult to look at if they are at contrasts above 90, again, dependent on other factors.

Also FYI, some of these more interesting threads are going to be moved into the discussion tab in the near future, as APCA is generating a lot of these kinds of questions that are not really "issues". and don't need to be "closed" (nor should they be).

Thank you,

Andy

Myndex / SAPC-APCA