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

APCA Contrast Calculator is broken #118

Closed kazerniel closed 3 months ago

kazerniel commented 3 months ago

Does this relate to a web app or tool (i.e. you're an end user) OR is this about code or code integration (you're a developer). end user of https://www.myndex.com/APCA/

Describe the bug web app is broken, the UI is empty

To Reproduce Steps so we can reproduce the behavior: Visit https://www.myndex.com/APCA/

Screenshots image

System or device information (please complete the following):

Additional context It broke sometime in the last 1-2 weeks.

electrovir commented 3 months ago

Is the source code for this page available somewhere? I tried to find it to test which commit broke it (and to run the non-broken version locally) but I can't find it anywhere. I assume it's private then.

Myndex commented 3 months ago

Hi @kazerniel and @electrovir

It is working fine for us on MacOS, in Safari (16.6.1 (16615.3.12.11.5, 16615)), as well as Chrome (125.0.6422.113) and the latest Firefox (126.0 64-bit) on MacOS. No issues, no errors.

"...I tried to find it to test which commit broke it ..."

The page as served has not changed in any way since June 2023, and the main JS script hasn't changed since May 2022, literally two years ago.

Soooo.... can you look in the JS console of the browser and see if there are any errors? I don't have a Windows 10 machine within reach at the moment.

Was there a recent Windows update? Is the issue also in Opera and Edge?

"...Is the source code for this page available somewhere?..."

It's plain vanilla JS, not compiled, easy to view with plenty of comments, using the Browser's dev tools.

Thanks for bringing this to our attention, we'll look into it further. A console log if you get a chance would be extremely helpful.

Thank you!

electrovir commented 3 months ago

macOS 14.5 here

All three browsers experience the same behavior:

  1. Type in a color
  2. INVALID COLOR is shown while mid-typing
  3. INVALID COLOR never goes away
  4. the page never updates in any way beyond updating the color swatch

(I'd also note that there are scrollbars in a weird place.)

safari

I tried with #000000, 000000, and black. None work.

I see the following logs:

Each of those is repeated multiple times.

Myndex commented 3 months ago

Hi @electrovir

Thank you—this is puzzling.

testContrast(), sliderPickerTXT(), and sliderPicker() are function calls, defined in a script after the </body> tag. This implies that the whole page is not loading, or that a dependent script is not loading.

Can you look at sources by type, and see that these JS scripts are loaded?

List of loaded scripts in the APCA tool

Do you have any blockers?

I was able to reproduce by going through a VPN that for some reason was preventing the Google analytics script from loading.

I'll assume that is the fail, but OMG not loading an async script should not bring down the whole page...! (Thanks Google....)

Working on a fix... Open to ideas...

electrovir commented 3 months ago

Ah! That explains it. My firewall blocks Google tag manager 😁

I’ve fixed a similar situation before by sticking the script into an iframe. That wasn’t for Google tag manager though, so I don’t have insight into whether an iframe would mess the script up.

Myndex commented 3 months ago

Hi @electrovir @kazerniel

Well, it wasn't tag manager... it was something else ~ yukky ~, that has to do with this page developing a greater popularity that I anticipated for what was intended as a non-production demonstrator... LOL!

Should be fixed now, and THANK YOU BOTH so very much for bringing this to my attention. The very narrow specific failure mode here meant that we would not have noticed it on our local network.

We are working on an upgrade, and intend to deploy on production servers in the near future—this just puts some fire under my butt to complete that sooner than later.

Thank you again!