search

Myndex / SAPC-APCA

APCA (Accessible Perceptual Contrast Algorithm) is a new method for predicting contrast for use in emerging web standards (WCAG 3) for determining readability contrast. APCA is derived form the SAPC (S-LUV Advanced Predictive Color) which is an accessibility-oriented color appearance model designed for self-illuminated displays.
https://git.apcacontrast.com/documentation/APCAeasyIntro
Other
435 stars 14 forks source link

Conformance levels unclear #3

Closed tkeenoy closed 3 years ago

tkeenoy commented 3 years ago

Not sure if this is the right place to report: on the SAPC tool beta, there is a section for Conformance Levels (color coded). It's unclear how (if at all) to apply these levels. Do they correspond in any way to AA/AAA ratings in the old standards?

Screen Shot 2020-10-08 at 4 32 00 PM
Myndex commented 3 years ago

Hi @tkeenoy

Thanks for asking. These have no relationship whatsoever to the existing WCAG 2.x standards.

Conformance and scoring is very much under development for Silver/WCAG 3, and we are working through it all.

Essentially there are five levels, including 0 (fail) with level four being the best outcome. In the scoring model, the scores for different aspects of a site get aggregated and averaged to determine overall site score.

The "initial" example for Visual Contrast is subject to change, but to simplify things it is based on the lowest value on a page.:

At the moment, the SAPC/APCA tool may not indicate this exactly, as this is a fairly recent development.

APCA Compared to WCAG 2

The SAPC Algorithm (APCA) and WCAG 2.x only have parity in a very narrow band, with #AAA in the perceptual middle. I.e. where the background is equidistant above #AAA and the font equidistant below #AAA. And the background must be brighter than the text as WCAG 2.x does not handle revered contrast correctly.

Those things in mind, WCAG 4.5:1 is about APCA 80%. 3:1 is ~60%, and 7:1 is ~100%. Here's a chart:

WCAG 2 to SAPC APCA

And one other thing on the lookup table: it is based on Helvetica Neue. So for example there's a Google font called Jost that is much thinner in comparison as rendered on some browsers. So for fonts that don't have the equivalent perceptual contrast of Helvetica, you need to offset the values to compensate.

Please let me know if you have further questions.

Andy

tkeenoy commented 3 years ago

This is great info, thanks Andy. My team is looking at how to use the new guidelines to inform best practices, and it's exciting seeing them develop.

I'm not clear on the meanings of the center pivot colors in the table you posted here - do you have any expanded docs up about that? Or are you able to elaborate?

Myndex commented 3 years ago

I'm not clear on the meanings of the center pivot colors in the table you posted here - do you have any expanded docs up about that? Or are you able to elaborate?

Hi @tkeenoy

I have a lot more information posted on the Wiki at: https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup

"Engineered on Purpose" 😁

The SAPC math is engineered to put the key values at easy to remember levels: 40% 60% 80% 100% 120% etc. And I specifically wanted 60%, 80%, 100% to line up at some point with WCAG 2.x's 3:1, 4.5:1, and 7:1, if for no other reason than to be able to say that "80% is about like the old 4.5:1". As it happens, the old 2.x math method really starts to breakdown when both colors are below #AAAor if the text is above #AAA among other things. This became a convenient color to have as a line up point so that there would be a point where SAPC and WCAG values matched and results were "similar".

It's a very narrow band, with the background color equally far above #AAA as the text color is below (hence #AAA pivots in the middle). Outside of this band, WCAG and SAPC do not line up — nor would you expect them to. SAPC/APCA is a perceptually based prediction method and the old 2.x is not.

So in the above chart, the BG and text colors and the pivot point are only listed to indicate the one place where 80% APCA equals 4.5:1 WCAG 2.x etc.

The 80% Trick

This only works for the 80% level, and the results are not exact, but still useful:

These may change over the coming months as this is all beta including the lookup table. The results pivot around 16px 500wt, over estimating for lower weights/bigger sizes and underestimating for higher weights — but keep in mind that 12px is the minimum font size anyway, and 12px should only be used for things like copyright or photo by-line, and never for readable text. The "real minimum" is 16px, and 18px preferred for readable text (text intended to be read).

Myndex commented 3 years ago

UPDATE:

On review: subtracting 10% form 120% is not at all the same as subtracting 10% from 40%. Currently working on a scoring model that (like the rest) relates strongly to perception. Stay tuned, and remember this is all beta at the moment.

If you want a "sneak peak" of some things we are working on but are very much ALPHA, you can take a look at the discussions page on our Wiki. I just posted a set of new charts for multi level scoring: https://www.w3.org/WAI/GL/task-forces/silver/wiki/Talk:Visual_Contrast_of_Text_Subgroup#Integrating_Lookup_Tables_into_a_Scoring_Model

I love to hear comments, but do keep in mind this is rough and early developmental stuff.

APCA vs WCAG 2.x (simplified)

As I mentioned, you can't really compare the two methods for a variety of reasons. But if we realy need to state how they compare, I'd put it like this:

joshuakraemer commented 3 years ago
  • APCA 80 is similar to WCAG 4.5:1 for a site using light or white backgrounds with dark text.

Is this still correct? The calculator page https://www.myndex.com/APCA/ and the wiki page https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup compare an APCA value of 60% to WGAG 4.5:1.

Myndex commented 3 years ago

Hi @joshuakraemer

Egads... yes much has changed since this thread was written, I should close it probably to prevent this confusion...

See issue #11 for some clarity on this...

Andy