apca-w3

           

           

APCA for W3 & WCAG_3

apca-w3

The APCA version in this repositiory is licensed to the W3/AGWG per the collaborative agreement.

Advanced Perceptual Contrast Algorithm

CHANGE:

colorParsley() is now in its own package and must be imported separately.

Current Version: 0.1.0 G (w3) beta

APCA is a contrast assessment method for predicting the perceived contrast between sRGB colors on a computer monitor. It has been developed as an assessment method for W3 Silver/WCAG3 accessibility standards relating to content for computer displays and mobile devices, with a focus on readability and understandability.

QuickStart

Install

    npm i apca-w3

Import

    import { APCAcontrast, sRGBtoY, displayP3toY, colorParsley } from 'apca-w3';

Usage:

PARSE: If you need to parse a color string or 24bit number, use the colorParsley() function:

    let rgbaArray = colorParsley('aliceblue');

CONVERT TO Ys Send rgba INT array [123,123,123,1.0] to sRGBtoY() — this is a slightly different luminance Y that the IEC oiecewise.

    let Ys = sRGBtoY([123,123,123,1.0]);

FIND Lc CONTRAST First color must be text, second color must be the background.

    let textColor = [17,17,17,1.0];
    let backgroundColor = [232,230,221,1.0];
    
    let contrastLc = APCAcontrast( sRGBtoY( textColor ), sRGBtoY( backgroundColor ) );

String Theory

The following are the available input types for colorParsley(), HSL is not implemented at the moment. All are automatically recognized:

INPUT as STRINGS:

• No Alpha

  • '#abc' or 'abc' (interpreted as 'aabbcc')
  • '#abcdef' or 'abcdef' (hash is ignored)
  • 'rgb(123, 45, 67)'
  • 'aquamarine' or 'magenta' (full CSS4 named colors list)

• With Alpha (alpha is NOT presently calculated, and assumed as fully opaque)

  • '#abcf' or 'abcf' (interpreted as 'aabbccff')
  • '#123456ff' or '123456ff' (hash is ignored)
  • 'rgba(123, 45, 67,1.0)'

INPUT as NUMBER:

• As hex
  • 0xabcdef
• As integer
  • 11259375

No alpha parsing for numbers in part as there are big and little endian issues that need to be resolved.

Parsing Removal

The function is called "colorParsley()" because what is that useless leafy thing the restaurant puts on the plate? Well, most mature software already has good parsing, and you may want to minimize the file leaving all that "parsley" at the restaurant.

In the src folder .js file, there is a /*/ type code toggle, see the comments just before the parsing fucntions. you can disable the entire set of parsing functions before minimizing if you like to go lean and clean.

This changes the import you need to use to:

             // import with parsing off/removed:
    import { APCAcontrast, sRGBtoY, displayP3toY } from 'apca-w3';

EXTRAS

Additional documentation, including a plain language walkthrough, LaTeX math, and more are available at the SAPC repo.

Current APCA Constants ( 0.0.98G 4g - W3 )

These constants are for use with the web standard sRGB colorspace.

 // 0.98G-4g-W3 constants (W3 license only):
    
  Exponents =  { mainTRC: 2.4,       normBG: 0.56,       normTXT: 0.57,     revTXT: 0.62,     revBG: 0.65, };
  
  ColorSpace = { sRco: 0.2126729,    sGco: 0.7151522,    sBco: 0.0721750, };
    
  Clamps =     { blkThrs: 0.022,     blkClmp: 1.414,     loClip: 0.1,     deltaYmin: 0.0005, };
        
  Scalers =    { scaleBoW: 1.14,     loBoWoffset: 0.027, 
                 scaleWoB: 1.14,     loWoBoffset: 0.027, };	

LIVE VERSION

There is a working version with examples and reference material on the APCA site

APCA is the Advanced Perceptual Contrast Algorithm

THE REVOLUTION WILL BE READABLE™