Using the APCA in a demo

[abdulmhamid]

Hello there, thank you for all the work that you do in the color space.

I and my partner at Protean Studio are currently putting together a demo of the APCA as a general resource and I want to be sure that we are accurate and provide appropriate attribution. The goal of the demo is to show how color combinations score on the WCAG 3.0 scale with a live version of the lookup table and some samples; we are using the method in APCAonly.98e_d12e.js as a base with the updated constants.

How would you like us to provide attributions to you and the others involved in the research? To be clear, we have no intention to monetize this work.

Please let me know if there is any information that you would like us to highlight and if you have any reservations about this project.

Thanks, Abdul

[Myndex]

Hi Abdul @abdulmhamid sorry for the delayed response.

CODE

The most current JS code is: https://www.myndex.com/APCA/JS/DEV98G_SAPCsRGB.js

With the lookup tables in the index file here: https://www.myndex.com/APCA/

This is also the best & simplest example of the concepts.

And thank you for reaching out, I encourage getting this information out there as it pertains to developing web-based content. Please let me know if you have additional questions regarding implementation or usage.

I have some interim notes also available here: https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup

ATTRIBUTION

Short form:

The APCA was invented by Andrew Somers.

Additional forms or descriptors:

SAPC & APCA were invented / developed by Andrew Somers, Senior Color Science Researcher at Myndex Technologies as part of the ongoing PerceptEx™ Perception Research Project.

SAPC: S-LUV Advanced Perceptual Color — an appearance model for self-illuminated displays

APCA: Advanced Perceptual Contrast Algorithm — a method for determining contrast to guide web-based design.

APCA is derived from the SAPC model. APCA is a method for prediction pf suprathreshold visual contrast of text on displays. APCA results are intended to provide design guidance for best readability of web-based content.

APCA DISCLAIMER

The following disclaimer should accompany examples of the APCA code or math:

APCA is intended solely for web-based content per the W3 WCAG 3.0 standards, and the web-content version is licensed to the W3 per their cooperative agreement. Use for other-than web-based-content is restricted and/or prohibited. APCA is a public beta, under active development. Prior written authorization is required for the use of SAPC or APCA in the context of, or in applications for, transportation, aerospace, medical, military, or where human safety is involved.

---

Please let me know if I can help you further.

Thank You,

Andrew Somers Color Science Research Myndex Technologies

[abdulmhamid]

Hi Andrew,

Thanks for getting back to me. I currently have a working implementation of the algorithm that I've been comparing to https://www.myndex.com/APCA/ and https://www.myndex.com/SAPC/ (for the additional precision).

In the current state, I have a live updating Lookup Table that uses the calculated contrast value and we have some designs in place for sample text and other functionality. We show ratings on the table by updating the background colors and providing 0-4 indicators under the static number of scored cells and keep other decorators (e.g not for body text). The visual treatment of this table is different from the one in the links above and a key is provided to aid the user.

I plan on adding optimizations (e.g color error handling, debouncing for perf when using a color input, etc.), tests, and all text content over the next couple of weeks. I can add a link here when we have a more complete version put together if you would like.

This information and the work around it has been incredibly helpful. Please let me know if you have any questions about the approach we are taking.

Thank you, Abdul

[abdulmhamid]

Hi Andrew,

We've made some progress on this. We are still tuning some things, most notably the verbiage and a treatment for font-weight 100, but we think it is in a state to share to a small group of people: https://proteanstudio.github.io/contrast-demo/. We will host it elsewhere when it is more complete.

Please let me know if you have any suggestions.

Best, Abdul

[alexkrolick]

@abdulmhamid very nice visuals on that page!

[abdulmhamid]

We're migrating it now and finalizing some details. Thanks again for the work that you've done here. We'll be on the lookout for any changes.

Best, Abdul