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