WCAG 2 vs APCA Comparisons #30
Replies: 11 comments 17 replies
-
|
When you look at this entry about CSS |
Beta Was this translation helpful? Give feedback.
-
Hi Bart @bartclaeys I'm sorry I do not understand your question? I'm going to throw out a bunch of tidbits here, maybe some will hit: WrongtrastAt the moment, the CSS WCAG_2 wrongtrast is composed of two parts. Part one, using a luminance estimate for sRGB that stems from an incorrect and obsolete early draft. Part two, using an inappropriate equation CIE luminance is the Y of the 1931 CIEXYZ space, it is not CIELAB. Regardless the sRGB piecewise math used does not define the actual, practical, relative luminance of a typical LCD display. There is more to how humans "see" the colors on a self illuminated display. See Lab... See Lab Run...CIELAB is a different colorspace entirely. It is modeled after the human opponent process of vision, uses the "wrong kries" transform to LMS space, and a perceptual lightness (L*) curve that is intended to model the human perception of lightness of surface colors in a tightly controlled environment. It is modeled after the Munsell color system. CIELUV is a colorspace that is based on the uv projection of the 2° observer xy chromaticity diagram. It adopts the exact same perceptual lightness (L*) curve as CIELAB, which is one of the particular problems with CIELUV, as for a self illuminated display, the L* curve is less than ideal. S A P C and other alphabet soups du jourSAPC is the larger model I have been developing that is the "S-Luv Accessible Predictive Color model" and APCA is the "Advanced Perceptual Contrast Algorithm" which is derived from the SAPC. Over the last three years of experimenting, we found a number of interesting factors for perceived contrast that have not been well modeled, at least not toward readability. Certainly the Barten 1991 and later contrast models are very instructive. APCA does not use the (L*) curve, it uses hybrid curves with a plurality of independent exponents that approximate the skew that occurs with supra-threshold color differences at high spatial frequencies on self-illuminated displays. It is "closer to" CIELUV than CIELAB, but is still different, and you can find traces back to Fairchild's R-LAB and of course CIECAM02 and CAM16, not to mention some of Hunt's model. I really don't know if any of that answers your question? Hopefully it clarifies the subject matter to get to your actual question? Thank you, Andy |
Beta Was this translation helpful? Give feedback.
-
|
Yes, definitely helps clarify between CIE Luminance, CIELAB, CIELUV and SAPC with the latter being a mixture of curves. |
Beta Was this translation helpful? Give feedback.
-
|
@Myndex – at your leisure, I would appreciate having the numbers provided in OP. Fails and passes is good, but I also want to see how close each sample gets. An APCA pass/fail is also not an unambiguous term for me (at this moment in time). Relatedly, and maybe this should be its own discussion, I would like to understand better the statement that The lookup table for 12pt/16px normal weight has |
Beta Was this translation helpful? Give feedback.
-
|
Hi Bruce! @bruce-usab
Yes, Let me look into my notes, that should be no issue...
Eh.... yea this came up recently... So, I've written a lot about it, including a subsection in the Wiki white paper, but in view of the genesis of Bridge-PCA it got a little more complicated, so I just made it a new discussion. Here's the Hollywood teaser to make you wanna click: if you pass Bridge-PCA you automagically pass WCAG_2
This is one of those things I've been wanting to discuss, but we lost the safe-dev-space we had with Chris, you, and me... I am leaning right now of making 16px Lc80 or Lc85, and rippling that shift, and also WAY simplifying the charts, as in "one use case per chart" and not trying to jam in copyright/spot text etc etc... In the very heated discussion recently, one this became apparent, I have to WAY simplify the entire process. I'm not clear on where conformance is for the other sections? I can adjust to what ever model they prefer, but text/contrast is already TOOOOOOO complicated, and I am getting ready for a major simplification of all the tools because (and apparently I didn't get this until all this crap came tumbling down last two days) people want something much simpler, and that full-matrix all 5 score levels apparently is nto well received by ... See the other discussion I'm starting on the comparison #42 |
Beta Was this translation helpful? Give feedback.
-
|
Hi Bruce @bruce-usab Sorry for the delay, to answer your question of what the values were for the pass fail tests. I made them small below just for reference. In reference to the below values, In the worst case when WCAG_2 is incorrectly passing colors it should fail, APCA is failing them by about Lc30 or so which is about half the contrast needed to properly pass. For the colors WCAG_2 is failing but should reasonably pass, APCA is passing them by about Lc15 or so. This is with the full APCA. With Bridge-PCA, the false failings are the same (must be for backwards compatibility). This also means that Bridge-PCA fails the false passes by more like Lc45. If we convert this to ratios similar to WCAG_2, then that means for dark colors that WCAG_2 rates as 4.5:1 are actually about 1.8:1, and colors light colors (white text on a color) that WCAG_2 rates as failig 3:1 should be about 4.5:1, and 4.5:1 should be about 6:1 Examples of WCAG 2 incorrect passes of unreadable contentIn these examples with black text
Examples of WCAG 2 incorrect fails of okay contentIn these examples with white text
|
Beta Was this translation helpful? Give feedback.
-
|
TO ADD: This problem passed by over the years as no designer would choose such poor colors as the first examples. But today the looming problem is that CSS is trying to add an automatic contrast property. If colors are going to be chosen automatically, then the math has to be correct, and it isn't with the WCAG_2 contrast math. The SAPC site has an APCA constant contrast demonstrator that works as expected. |
Beta Was this translation helpful? Give feedback.
-
|
@Myndex thanks for adding the specific Lc numbers. That was half of what I was looking for.
I did pick up that 4.5:1 and 3:1 were the the threshold you were using. I am curious to learn how close the color pairs came to passing, as 4.4:1 and 3.1:1 pretty different. Also, just to be greedy, please also add the color hex values. My understanding is that relying upon an eyedropper-type tool just introduces yet another variable. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Bruce @bruce-usab
Right, so the WCAG_2 fails were close, ~4.4:1 and 2.9:1, and the passes were also right on that edge, 4.55:1 and 3:1, as close as possible. The key takaway is that for the dark color passes, the LC value was about half — with 60 being the "sort of" like 4.5:1 when color are light, the 4.5:1 when dark, APCA drops (correctly) to near 30. Or put another way, WCAG_2's 4.5:1 reports that value even though the perceptual contrast is cut in half. On the high end it's not so extreme, and depending on how you look at it you could say it's "close" but it's the discrepancy between the passes and fails that is the bigger concern. A key reason that APCA is able to pass some of these lighter colors is that APCA is a spatial contrast calculator, and you gain contrast by using a larger or bolder font. Sam Waller did a study quantifying this and he discusses it in a thread in the LVTF And he also created a webpage demonstrating his study: http://www.cedc.tools/pairs.html
Yes I can do that.... BTW: if you have a Mac, the trick is on the App store, called "Classic Color Meter", ... It has a lot of settings, but set it to "sRGB" And then as you can see, the color meter matches the CSS color value.
|
Beta Was this translation helpful? Give feedback.
-
|
Hey Bruce, @bruce-usab I created this chart that really lays out the differences incrementally. In the top half of the chart, each row has the same TEXT color, in the bottom half of the chart, each row has the same BG color. I think this does the best job of demonstrating how the different key levels compare. The blank light-red areas indicate where the end of the visible range was reached for the given contrast level.
DISCUSSIONOn the far left column, the text is obviously bolder, as required under APCA guidelines per the current APCA tool, for that font size and weight. While WCAG_2 degenerates to an unreadably-low-contrast as colors get darker, APCA maintains readability across the visible range, and you may notice a slight increase in contrast for darker colors to address the cases of display flare and misadjusted black levels in monitors, and particularly the psychophysical phenomenon relating to colors in the mesopic range of vision where rod-intrusion impacts contrast perception (Rudd et al 2007). Thank you! Andy |
Beta Was this translation helpful? Give feedback.
-
|
I very much appreciate these greys-on-grays examples, especially since you keep black and white in the mix! What I would like to see is Venn diagrams that help illustrate where the threshold agree and where they diverge. One example that I think might not be too hard to program:
Next step would be for gray gradient from black to white. Since the 2.0 algorithm is not affected by which color is foreground/background, it might even be possible to put all this information into a single illustration. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @bruce-usab I'm not quite sure I grasp what you're asking? One thing to mention: APCA is about non-text as much as text, and the design flexibility comes from a wider range of useable contrast-per-use case, based more on spatial frequency and not so much color distances. WIth dark colors, WCAG_2 will pass more text colors, and APCA will reject more, but APCA is more flexible in permitting large elements (like a button or a big icon)... Im trying to picture making this as a venn diagram.... that is you want the diagram to also be the demonstrator, yes? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I think for grayscale, the Venn diagram could also be be the demonstrator. Since what I am visualizing is more a series of concentric rings, it is not much of a classic Venn. The idea is to visually illustrated where 4.5:1 and Lc75 agree is a fail, where both agree is a pass, and where there are the differences. |
Beta Was this translation helpful? Give feedback.
-
|
Ahhhh... Apparently I need to learn to be less literal in how I read things LOL. That was kind of the idea with the grayscale chart that I posted… But I think I understand what you mean let me see what I can work up... |
Beta Was this translation helpful? Give feedback.
-
|
Hi Bruce @bruce-usab
I want to address this one further:As you know one of the things I have tried to balance is that of not failing existing sites that are generally well designed, and a desire to have a "certain amount" of alignment with WCAG 2 and 1.4.3. This led to some of these values. Among the issues that are not as well resolved (though "stuff is in the works") are that of x-height, and uniform font weight properties, and some issues relating to how different browsers rasterize fonts, etc etc... The pressing question has been, what is too much, what is not enough — too much degrades design flexibility, and too little does not achieve the desired results of accessibility and readability. WCAG 2 has both of these problems. At times, demanding more than reasonably needed causes "false fails" and the more serious problem on the other end allowing false passes. The false fails annoy designers and clients who want to know why something perfectly readable is being rejected. Meanwhile skilled designers get no benefit from the false passes, as they would not choose color pairs so unreadable in the first place. The fact that anyone can see that something is unreadable even when WCAG_2 passes it led to the current climate of confirmation bias as in "oh it works". But it doesn't, it only seems to work because people manually toss out the false passes. But CSS is planning an automatic color contrast property which will won't be particularly useful without someone to intervene and toss out the bad colors manually, which is demonstrated in the comparison I discuss in this article on TangledWeb. (written in a different style that I write here fwiw.) No ifs ands or LUTSThat said, I've been working with the LUT, rebalanced a bit again, moving Lc 75 to apply to 18px, and moving 16px to Lc 80, and considering bumping the entire 16px row up another Lc 5 so that 16px normal weight is Lc 85, and keeping 14px as the hard minimum for body text at Lc 90. At the same time, fonts larger than 32px were getting a bit more than needed. If you look at the chart, the central "body text zone" has the most movement, Lc 60 for 24px rapidly climbing to Lc 90 for 14px. This is in keeping with well established contrast sensitivity/spatial frequency curves. 24px normal was chosen as the pivot on Lc60 for alignment with WCAG_2. That and in working with Bridge-PCA, I see two ways to handle conformance.
For These general levels are appropriate for use without reference to the lookup table.
The Revised Lookup TableSame guidance as before except to add:
As I mentioned, considering bumping the entire 16px row up 5px, and also extending the body text range up to 28px or 34px. And in these cases, the key is if the indicated value is less than Lc 75, then add Lc15 to it. NOTES ON FONT SIZEFont sizes listed above assume an x-height ratio of at least 0.52. Font weight is based on highly standardized reference fonts such as Helvetica or Arial. "px" means the CSS reference px not device pixels. The reference px is defined as 1.278 arc minutes of visual angle. All for now, thank you for reading! Andy |
Beta Was this translation helpful? Give feedback.
-
|
Notice: I'll leave the old look-up tables above there just for historical value, but there were some final tweaks a few months after those were set up, which can be seen at APCA Readability Criterion: Text Contrast Tables. |
Beta Was this translation helpful? Give feedback.
-
|
Hey Bruce @bruce-usab Venn-Type DiagramsLet me know if this answers your questions as far as Venn diagrams-type charts are concerned. Except for Lc30 and Lc45 against 3:1, I just did two are a time to make things most clear. WCAG is cyan, and APCA is magenta, and transparent so you can see the overlays. These charts use the data that created the greyscale chart above, with some adds. Like the greyscale chart, the first set of these charts all have a common text color (hence the straight line/triangle). The second set is for a common background. The white area in the middle is "contrast' — the larger the vertical distance between the top and bottom colors is more contrast. You'll notice that WCAG_2 vertical distance decreases as color get darker, the opposite of what needs to happen for readability contrast. This is the current "G series" constants which haven't changed since February 2021. These are also for dark text on a light background. Reverse polarity would be slightly different. WCAG 2 & APCA Common Colors as per Key LevelsThis is a test of the WCAG 3:1, 4.5:1, and 7:1 levels relative to the closest APCA levels, Lc 30, Lc 45, Lc 60, Lc 75, and LC 90. A discussion of how to read the charts after. COMMON TEXT COLOR
COMMON BACKGROUND COLOR
EDIT TO ADD: How to read the charts More Descriptive DescriptionThe Y axis is the RGB value of both colors as an integer (0-255). The X axis is the HEX value (00 - ff) of the shared text (or the shared background) value. "shared" means that both WCAG and APCA are using the same color. For the first charts, both are using the same text color, but the BG color is different, and vice versa for the last set of charts. An rgb value of 123 means
The white are is where both WCAG and APCA say the contrast in insufficient for the given level. Chart Legend
This means any background color in the colored area above passes when matched to a text color in the colored area that is directly below per a vertical straight line, at at least the indicated ratio or Lc value.
Colors to be compared with those directly below/above.
If a text color is at 000, then that defines the last background color possible. Similarly if the background hits 255, then that defines the last text color available. The vertical line in the shared color indicates the point that APCA hits that end wall before WCAG does. DISCUSSIONAs can be seen, and we already knew this, for certain key levels APCA provides just a few additional colors at the very high-end when colors are lighter. However WCAG passes a very large quantity of colors in the dark area. And what's worse, is that at some levels WCAG actually reduces the sRGB color distance as colors get darker!! That's the opposite of what we would want to see for readability. Note on "number of colors"Looking at these charts, it's probably obvious that APCA presents fewer colors than WCAG. However, that's for fluent text, AND the APCA colors are all useable, whereas the "extra" colors of WCAG are by and large not useable. The magenta areas are where APCA has more colors than WCAG, and these ARE usable per the APCA guidelines. BUT ALSO: APCA has additional use cases that permit Lc 30 for some non-text items like large buttons or map areas (I still need to answer your post on that), and some ancillary text like placeholder and disabled items and copyright, which expands the useable colors to exceed WCAG. See the first and seventh chart, the light lavender area defines this extended zone. (And even then, as you can see Lc30 is STILL stricter than WCAG in the dark areas). The upshot:YES, APCA demands higher contrast for TEXT than WCAG, especially for body text. BUT APCA extended use cases improves design flexibility by relaxing contrast in accordance with human perception of low spatial frequency elements. Please le me know if you have any questions! Andy |
Beta Was this translation helpful? Give feedback.
-
|
These are fantastic @Myndex ! I think this is exactly the sort of thing which makes compelling cases. Do you have Excel or OpenOffice Calc versions you would be willing to share? Last night, it did occur to me that I had not suggested anything for the X axis. So the "Venn diagram" as I proposed was barely a bar chart! This morning, I find you have already done all the work, and filled in the appropriate choices!
Sorry, but I am not entirely clear what you are these are illustrating! (Yet, go figure, that does not temper my enthusiasm!) Please be patient with me...
Thanks again for all your hard work on this! |
Beta Was this translation helpful? Give feedback.
-
@Myndex can you explain this a little more? |
Beta Was this translation helpful? Give feedback.
-
Hi Dan @danhollick yes, looking at the charts above, measure the vertical distance between the blue on the bottom and the blue on the top: notice that on the left of the charts, the blue is closer, these are the darker colors. I.e. as shown in the comparison greyscale above, as colors get darker, WCAG 2 lowers contrast of self illuminated displays. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Bruce @bruce-usab (Also @danhollick this post more clearly answers your question)
Thank you! Based on your suggestion last year, I've been trying to "show" as opposed to "write unwieldy long essays on the minutiae of photons impacting retinal cells and stimulating neurological responses"
There is an openOffice spreadsheet with the basic APCA math in the "PORTED" folder. BUT that does not have these charts... let me clean up the file and I'll email it. Remind me if I forget LOL.
Thank you for being patient with ME. One of the more painful discoveries is my communications deficit, and on that there is a recent study that was like a "oh, that" where things suddenly fell into place. THE STUDY. More Descriptive Description
My bad for labeling it that way. The Y axis is the RGB value of both colors as an integer (0-255). The X axis is the HEX value (00 - ff) of the shared text (or the shared background) value. "shared" means that both WCAG and APCA are using the same color. For the first charts, both are using the same text color, but the BG color is different, and vice versa for the last set of charts. An rgb value of 123 means
Insufficient
Doh to me for not being clear. The white are is where both WCAG and APCA say the contrast in insufficient for the given level.
Here is what I should have written: Chart Legend
This means any background color in the colored area above passes when matched to a text color in the colored area that is directly below per a vertical straight line, at at least the indicated ratio or Lc value.
Colors to be compared with those directly below/above.
If a text color is at 000, then that defines the last background color possible. Similarly if the background hits 255, then that defines the last text color available. The vertical line in the shared color indicates the point that APCA hits that end wall before WCAG does. Note on "number of colors"Looking at these charts, it's probably obvious that APCA presents fewer colors than WCAG. However, that's for fluent text, AND the APCA colors are all useable, whereas the "extra" colors of WCAG are by and large not useable. The magenta areas are where APCA has more colors than WCAG, and these ARE usable per the APCA guidelines. BUT ALSO: APCA has additional use cases that permit Lc 30 for some non-text items like large buttons or map areas (I still need to answer your post on that), and some ancillary text like placeholder and disabled items and copyright, which expands the useable colors to exceed WCAG. See the first and seventh chart, the light lavender area defines this extended zone. (And even then, as you can see Lc30 is STILL stricter than WCAG in the dark areas). The upshot:YES, APCA demands higher contrast for TEXT than WCAG, especially for body text. BUT APCA extended use cases improves design flexibility by relaxing contrast in accordance with human perception of low spatial frequency elements.
Thank you for asking! I would not have built this otherwise, as I'm scratching my head right now trying to figure out how to communicate what is a fairly abstract and densely complicated subject. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the additional exposition. That addresses my questions for now! |
Beta Was this translation helpful? Give feedback.
-
|
two quick questions from someone new to the space. understanding that these use cases demonstrate the superiority of the APCA standard (which appears to still be a work in progress): |
Beta Was this translation helpful? Give feedback.
-
|
Hi @spawnharvey — Were we chatting on Twitter? I just realized LOL...
Basic APCA for sRGB is pretty stable at this point, the "work in progress" is more toward fine tuning things like font-weight breakpoints for WCAG_3, and addressing new and emerging technologies. There is a MAJOR shift in display technologies going on, and to that end, there will always be a "work in progress" to address new technology.
There was no primary research in the development of the WCAG_2 contrast specs, as it was a priori. There are some published third party papers that are critical of this. And here is one which includes studies with individuals with color insensitive vision, showing that WCAG_2 is "backwards". I have not published formal papers (yet) of my research findings that WCAG_2 contrast is not fit for use, but I have researched, conducted studies, and written about it in threads and articles. My work began three years ago, with the first posts in thread 695, but later expanded, and at present I suggest looking over the APCA linktree, starting at the top, for a complete (and easy to read) tutorial. LINKTREE: https://linktr.ee/MyndexAs for your question "is it better than no standard" I characterize it as "a broken clock is right twice a day." There are other, well established standards, that are better, and there is (and was) substantial existing science that provides better solutions.
No, but using APCA is definitely better than "doing nothing". If you are interested in making your site actually accessible, use APCA now. If you are in a narrow category wherein you are legally required to follow the absolute letter-of-the-standard, even when it is wrong, then use Bridge-PCA, which is fully backwards compatible with WCAG_2, but is using science-based APCA technology. Note that in most jurisdictions, APCA is usable as a more accessible alternative contrast guideline. However, you need to know your specific contractual and legal obligations in your specific use cases. But IN GENERAL if:
Loaded Leading Questions du Jour"Better than doing nothing" is a bit loaded...I might ask if you are an attorney, heh...😎 (intended as humor BTW).😁 Using your eyes and good judgement is what is better than doing nothing. Blindly following the bad math of WCAG_2 is worse than doing nothing. Wait Wut?The argument can be made that WCAG_2 contrast is worse than "doing nothing" — studies using random colors show that WCAG 2 contrast math is worse than a coinflip in terms of human perception and readability. The belief that it "works" is mostly a function of confirmation bias. The reality: using a good (classical) design sense, and good visual judgement is better than uncritically following bad math. I've written a few articles which present the evidence and research that WCAG_2 contrast math and methods are harmful to readability, ESPECIALLY for those with certain color vision deficiencies (the very people that it is claimed to help). See this recent article:
And this three part series:
I hope this answers your questions, but please followup if you have more. Thank you, Andy |
Beta Was this translation helpful? Give feedback.
-
|
@spawnharvey — I have a little bit different take on this.
Saying that there is For about twenty years (up to 2008) there was no requirement for contrast. WCAG 2.0 has had a huge impact, and SC 1.4.3 is a notable part of that story.
No, of course not. If you have figured out the use cases where APCA is superior to WCAG2, by all means, use APAC. Even Section 508 allows for If you have not mapped out those use cases, then use WCAG2. Meeting SC 1.4.3 is decent, and better than nothing. Please be encouraged to do better. It is a minimum baseline after all. It is the very least a designer might be expected to do.
Anyone paying attention to accessibility is paying attention to color contrast.
Yes, because doing nothing is so much worse than using a metric which has some deficits. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Myndex
I'd like to learn more about BPCA and think of applying it as you suggested. The first thing I noticed on BPCA calculator is that "WCAG compatible" ratio changes while swapping text and background colors. If my memory serves well, WCAG contrast ratio should remain the same in case of text/background color swapping. Then I checked the default sample colors (#1234b0 on #e9e4d0). Its WCAG 2.1 contrast ratio should be 7.68:1 rather than 5.1:1 or 5.6:1. Perhaps I misunderstand the meaning of "WCAG compatible" here? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @JediLin Bridge PCA is backwards compatible with WCAG2. What this means is, there are no colors that Bridge PCA will pass that the old WCAG2 would have failed. But otherwise, it's using the APC algorithm. The algorithm has two modifications, one, a small area is adjusted to make sure that no colors are passed that WCAG 2 would fail (even if that fail is incorrect), and then secondly, a conversion to a ratio, for familiarity, so that it can be used directly with the existing WCAG2 guidelines. So what you get, is that the 47% of false passes of colors that should be rejected, are now properly rejected. However the 22% a false rejections, are still rejected in order to maintain backwards compatibility. The idea is, that bridge PCA is a drop in replacement for the existing WCAG2 equation. What you lose, is the extra flexibility you get from the full APCA Readability Criterion. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the explanation! Now I understand that "WCAG compatible" isn't WCAG-algorithm contrast ratio at all, but a contrast ratio with BPCA algorithm to be tested against WCAG 2 SC. That makes total sense to me now. |
Beta Was this translation helpful? Give feedback.
-
WCAG 2 vs APCA Comparisons
A lot has been made of the idea that WCAG 2 "helps people with Color Vision Deficiency". However this is not demonstratively true as we can see by these simulations. In fact, WCAG 2 creates situations that are harmful especially to protanopia.
APCA clearly provides more accurate and useable guidance, and by a wide margin — and by wide, I mean that WCAG 2 incorrectly passes colors by as much as Lc 30. WCAG 2 incorrectly fails color pairs by as much as Lc 15 or even more.
Examples of WCAG 2 incorrect passes of unreadable content
In these examples with black text
Examples of WCAG 2 incorrect fails of okay content
In these examples with white text
Here are those again, processed to simulate various CVD types
A lot has been made of the idea that WCAG 2 "helps people with Color Vision Deficiency". However this is not demonstratively true as we can see my these simulations. In fact, WCAG 2 creates situations that are harmful especially to protanopia.
Bad Passes
Bad Fails
Beta Was this translation helpful? Give feedback.
All reactions