Update the APC Algorithm to be compatible with RGBA colors

[SFM61319]

Hello.

I was reading the APCA (under the Code Samples tab) for two given RGB foreground and background colors, and realized that it works only for RGB colors, and not for RGBA colors.

Alpha transparency plays a major role in color contrast along with the other RGB channels (even according to AA/AAA standards). And RGBA can be called a "super-set" of RGB, since RGBA is RGB when a = 1 or a = 100%, and covering RGBA will hence automatically cover RGB colors.

Please consider updating the algorithm given in the site with the RGBA version of the algorithm (i.e., an algorithm that works for RGBA foreground and background colors too).

File to be edited: Method-font-characteristic-contrast.html

---

Also, on a side note, please:

1. Make the code in the code samples more readable and not weirdly indented (I can open a new issue just for this and submit a PR to close the said issue)
2. Maybe add syntax highlighting to the code samples to make them even more readable and understandable
3. Use proper RGBA classes with useful properties which make the contrast calculation way easier (again, I can open a new issue just for this and submit a PR for this).

/* An example for point no. 3 */

// Constants used in the site
const sRGBtrc = 2.218;	// Gamma for sRGB linearization. 2.223 could be used instead
			// 2.218 sets unity with the piecewise sRGB at #777

const Rco = 0.2126;		// sRGB Red Coefficient
const Gco = 0.7156;		// sRGB Green Coefficient
const Bco = 0.0722;		// sRGB Blue Coefficient

const scaleBoW = 161.8;	// Scaling for dark text on light (phi * 100)
const scaleWoB = 161.8;	// Scaling for light text on dark — same as BoW, but
			// this is separate for possible future use.

const normBGExp = 0.38;		// Constants for Power Curve Exponents.
const normTXTExp = 0.43;	// One pair for normal text,and one for REVERSE
const revBGExp = 0.5;		// FUTURE: These will eventually be dynamic
const revTXTExp = 0.43;		// as a function of light adaptation and context

const blkThrs = 0.02;	// Level that triggers the soft black clamp
const blkClmp = 1.75;	// Exponent for the soft black clamp curve


// Misc. useful functions
const clamp = (value, minimum=0, maximum=1) => {
  if (value < minimum) {
    return minimum;
  }

  if (value > maximum) {
    return maximum;
  }

  return value;
}

const clampColor = (value=0) => clamp(Math.round(value), 0, 255);  // RGB ranges from 0-255


// A proper RGBA class with useful properties
class RGBA {
  constructor(r=0, g=0, b=0, a=1) {
    // RGB must be between 0-255
    this._r = clampColor(r);
    this._g = clampColor(g);
    this._b = clampColor(b);

    // A must be between 0-1
    this._a = clamp(a);
  }

  get r() {
    return this._r;
  }

  set r(value) {
    this._r = clampColor(value);
  }

  get decimalR() {
    return this._r / 255;
  }

  get linearizedR() {
    return (this._r / 255) ^ sRGBtrc;
  }

  // Repeat for GB
  // Unknow for A, which is part of the whole point of this issue

  get colorArray() {
    return [
      this._r,
      this._g,
      this._b,
      this._a
    ];
  }

  get Y() {
    return (
      Math.pow(this._r/255, sRGBtrc) * Rco
    + Math.pow(this._g/255, sRGBtrc) * Gco
    + Math.pow(this._b/255, sRGBtrc) * Bco
    );
  }

  // toString to convert to CSS compatible color string
  toString() {
    return `rgba(${this._r},${this._g},${this._b},${this._a})`;
  }
}


// The main APCA contrast function
const getAPCAContrast = (fgRGBA, bgRGBA) => {
  // Algorithm to be updated to work for RGBA colors
  return colorContrastAPCA;
}

[jspellman]

Thank you for your comment. Project members are working on your comment. You may see discussion in the comment thread and we may ask for additional information as we work on it. We will mark the official response when we are finished and close the issue.

[jspellman]

I would also note that the work on color contrast has progressed considerably since we had to freeze the document before publishing. There is current information on our wiki page on Visual Contrast. The very latest information is on @Myndex 's Github repo:

[bruce-usab]

Pinging @Myndex because I remember seeing newer formulas that used RGBA. As @jspellman notes, the algorithm has been significantly refined since the version used for the first call public working draft.

[Myndex]

To All: @SFM61319 @jspellman @bruce-usab

The code cited above is obsolete code, as is the document it resides in, and it has not been in use for over a year.

I have a pending pull request to remove this material from that very early draft to avoid these kinds of confusions, as it is still linked to and appearing in search engines.

Jeanne: This underlines the importance of that pull request. This is a serious problem as that code is not correct per the current version, and it is a substantial difference, and this is not the first time this confusion has occurred. Do I need to do anything else to get that pull request merged please?

Also, Avinash just FYI, the correct place to discuss the code is at the APCA repo, at the following link, which is the only valid canonical repo for the code:

https://github.com/Myndex/SAPC-APCA

You are welcome to open an issue there, please make it relevant to version 0.98g — though to add, 0.98g is still a pre-release beta, and there are a number of features that are yet to be incorporated — this is development code, so features such as transparency, and packing things up into a neat class library and NPM package are in the future devmap, not implemented as yet.

I am sorry for the confusion regarding the obsolete code!

Thank you for your interest,

Andy

[ChrisLoiselle]

DRAFT RESPONSE: This issue will be resolved in part by the merge request on issue #213 .

The other core topics in this issue pertain to the tool and not specifically to Silver.

Issues related to tool code can be placed as issues in the GitHub repo https://github.com/Myndex/SAPC-APCA .

[Myndex]

Update regarding alpha channel support

Standard alpha channel support for text colors is available in the APCA-W3 Library, and blends the text with the background based on the alpha value prior to determining contrast.

The repo is: github.com/Myndex/apca-w3

And it is published via npm: npm i apca-w3

The APCA discussion forum is: github.com/Myndex/SAPC-APCA/discussions