Skip to main content
Myndex's user avatar
Myndex's user avatar
Myndex's user avatar
Myndex
  • Member for 5 years, 8 months
  • Last seen more than 1 year ago
About

Somers' Law:

"All technology becomes obsolete eventually"


    regex = /^(?!hard)(does)(.*)$/gi

Translation: regex is not hard and does it all.


sRGB Coefficients

I see these values (.299,0.587,0.114) for coefficients around a lot, indicating for converting sRGB to luminance or gray... But these are incorrect!

             // 'El Wrongo • No Bueno!
   doNOTlet gray = red * 0.299 + green * 0.587 + blue * 0.114  // Nnnoooooooo

They relate to the obsolete NTSC broadcast system, and aren't for sRGB.

The current default standard is sRGB, which uses HDTV (Rec709) primaries. ALSO you need to linearize first!!!!

Here is a one-line conversion to grayscale: Convert 0-255 sRGB to 0.0-1.0, apply 2.2 exponent, multiply by coefficient, sum, apply reverse exponent, multiply by 255, clamp.

             // ANDY'S DOWN AND DIRTY GRAYSCALE™
            // sR sG sB are 0-255 sRGB values, ** works with recent browsers.
           // For purists: Yea this is NOT the IEC piecewise, but it's fast and simple, hence 'down and dirty'

  let gray = Math.min(255,((sR/255.0)**2.2*0.2126+(sG/255.0)**2.2*0.7152+(sB/255.0)**2.2*0.0722)**0.4545*255); 

The above is not the piecewise transform, it's intended as a "simple & fast" one line, sRGB to Gray 0-255. You can make it a string or sRGB(gray) number as:

                // gray to string
   let sGrayStr = '#' + gray + gray + gray;

                // gray to number 
   let sGrayNum = gray << 16 | gray << 8 | gray ;


APCA npm Package

One result of my last few years of research into human visual perception has been the creation of the Accessible Perceptual Contrast Algorithm for WCAG_3.

While research continues, the public beta APCA npm package is now available: apca-w3

Install:

     npm i apca-w3

Usage:

And the API is trivially simple: send it two colors, it returns a signed number of the Lc value (lightness contrast). Positive is dark text on light BG, negative is light text on dark. what

     Lc = APCAcontrast( sRGBtoY( textColor ), sRGBtoY( backgroundColor ) );

Implementation notes:

Color sent to the linearizing function sRGBtoY() is a simple rgba array as in [255,255,255,1.0]

There is also a parsing function colorParsley() that can take a 3 or 6 character hex string #fff or a3b3d4 (hash # is optional but not required), a named CSS color (such as aquamarine), as rgb(99,122,14), or as a number 0x123456 or 15213412. Text color first, background color second — do not swap colors, as use case affects results. light text on a dark background returns a negative value.

For questions and comments please visit the main APCA repo discussion area.

Thank you!

Andy

Badges
This user doesn’t have any gold badges yet.
This user doesn’t have any silver badges yet.
5
bronze badges
5
Score
3
Posts
75
Posts %
3
Score
2
Posts
50
Posts %
3
Score
1
Posts
25
Posts %
3
Score
1
Posts
25
Posts %
1
Score
1
Posts
25
Posts %
1
Score
1
Posts
25
Posts %
Top posts