NPM package does not match the web contrast calculator

[TaigaYamada]

Using the apca-w3 NPM package, version 0.0.98-g-4g.4b does not match the result calculated with the online contrast checker at https://www.myndex.com/SAPC/.

For example, the following code:

import { APCAcontrast, sRGBtoY } from 'apca-w3';
console.log(sRGBtoY([255, 151, 198, 1]));
console.log(sRGBtoY([113, 45, 68, 1]));
console.log(APCAcontrast(sRGBtoY([255, 151, 198, 1]), sRGBtoY([113, 45, 68, 1])));

Returns

0.4553507281777737
0.04431087650514489
-52.260847224115004

In contrast, in the tool at https://www.myndex.com/SAPC/, Plugging in #ff97c6 as the text color and #852d44 as the background color results in: Y: 47.4748 for #ff97c6 Y: 7.28211 for #852d44 Contrast: -49.236

Is there any reason for this difference? Am I misunderstanding the use of the API?

Thank you in advance.

[Myndex]

Thank you for bringing this to my attention, looking into this now. I suspect the final scale adjustment is off in the npm, I'll get an answer for you asap.

[TaigaYamada]

I created a custom implementation of APCA in JavaScript, based off of the plain English explanation (and not the NPM code). Results seems to match the NPM package, not the web checker.

console.log(calcAPCAY({r:255, g:151 , b:198}));
console.log(calcAPCAY({r:113, g:45 , b:68}));
console.log(calcAPCAContrast({r:255, g:151 , b:198}, {r:113, g:45 , b:68}));

Returns

0.4553
0.0443
-52.258

*Small difference in the value of contrast is because I used rounded value of Y.

[Myndex]

Hi @TaigaYamada I'm sorry you are having troubles. I am not finding a problem here.

Please don't use the SAPC site for a source for code — that is a live development site, not production, and there may be slight differences.

The canonical site is https://www.myndex.com/APCA/

Can you use the test values below, and tell me if you get these results please?

Also: are you developing in a language other than Javascript?

TESTING YOUR IMPLEMENTATION

If you've implemented the code and want a quick check, Here are some keystone checks with no rounding. The first color is TEXT and the second color is BACKGROUND:

Test Values for the 0.0.98G 4g constants, normal and reverse float values for each color pair.
First number is TEXT second number is BACKGROUND.

    TEXT vs BKGND •  EXPECTED RESULT for 0.0.98 G-4g

    #888 vs #fff  •  63.056469930209424
    #fff vs #888  • -68.54146436644962  

    #000 vs #aaa  •  58.146262578561334
    #aaa vs #000  • -56.24113336839742

    #123 vs #def  •  91.66830811481631
    #def vs #123  • -93.06770049484275

    #123 vs #234  •   1.7512243099356113
    #234 vs #123  •  -1.6349191031377903

These exercise all the important constants.

Thank you!!

Andy

[TaigaYamada]

I am so sorry. turns out, it was a typo...

in the first comment, I'm checking the color {r:113, g:45 , b:68} as the second color. However, converting #852d44 to rgb is {r:133, g:45 , b:68}. Red is 133, not 113.

It took me a while to notice this.

I'll leave the result of the checking I did below.

Thank you so much.

---

I just checked the 8 given pairs in my custom implementation. The result all checks out. The custom implementation seems to be working properly.

console.log(calcAPCAContrast({ r : 136, g : 136, b : 136 }, { r : 255, g : 255, b : 255 }));
console.log(calcAPCAContrast({ r : 255, g : 255, b : 255 }, { r : 136, g : 136, b : 136 }));

console.log(calcAPCAContrast({ r : 0, g : 0, b : 0 }, { r : 170, g : 170, b : 170 }));
console.log(calcAPCAContrast({ r : 170, g : 170, b : 170 }, { r : 0, g : 0, b : 0 }));

console.log(calcAPCAContrast({ r : 17, g : 34, b : 51 }, { r : 221, g : 238, b : 255 }));
console.log(calcAPCAContrast({ r : 221, g : 238, b : 255 }, { r : 17, g : 34, b : 51 }));

console.log(calcAPCAContrast({ r : 17, g : 34, b : 51 }, { r : 34, g : 51, b : 68 }));
console.log(calcAPCAContrast({ r : 34, g : 51, b : 68 }, { r : 17, g : 34, b : 51 }));

returns

63.057
-68.542
58.146
-56.241
91.677
-93.076
1.744
-1.628

---

I also decided to check all the pairs with the NPM package. Here, the last 2 pairs returned 0 for some reason, but otherwise it's all fine.

console.log(APCAcontrast(sRGBtoY([136, 136, 136, 1]), sRGBtoY([255, 255, 255, 1])));
console.log(APCAcontrast(sRGBtoY([255, 255, 255, 1]), sRGBtoY([136, 136, 136, 1])));

console.log(APCAcontrast(sRGBtoY([0, 0, 0, 1]), sRGBtoY([170, 170, 170, 1])));
console.log(APCAcontrast(sRGBtoY([170, 170, 170, 1]), sRGBtoY([0, 0, 0, 1])));

console.log(APCAcontrast(sRGBtoY([17, 34, 51, 1]), sRGBtoY([221, 238, 255, 1])));
console.log(APCAcontrast(sRGBtoY([221, 238, 255, 1]), sRGBtoY([17, 34, 51, 1])));

console.log(APCAcontrast(sRGBtoY([17, 34, 51, 1]), sRGBtoY([34, 51, 68, 1])));
console.log(APCAcontrast(sRGBtoY([34, 51, 68, 1]), sRGBtoY([17, 34, 51, 1])));

returns

63.056469930209424
-68.54146436644962
58.146262578561334
-56.24113336839742
91.66830811481631
-93.06770049484275
0
0

---

In the comparison of #ff97c6 and #852d44:.

console.log(APCAcontrast(sRGBtoY([255, 151, 198, 1]), sRGBtoY([133, 45, 68, 1]))); \\ NPM package
console.log(calcAPCAContrast({ r : 255, g : 151, b : 198 }, { r : 133, g : 45, b : 68 })); \\ Custom implementation

returns

-49.23622711410499
-49.24

[Myndex]

Hi @TaigaYamada Oh good, all looks good now.

Yes, 123 to 234 will return 0 on apca-w3, this is intentional as LC under ~8 are clamped to zero in that code version. The next version (probably later today) will have a test html page that exercises that using #123 and 444 and the returns are:

    #123 vs #444  •   8.32326136957393
    #234 vs #444  •  -7.526878460278154

Thank you!

Andy