Enhancement: use better contrast algorithm
davidscotson opened this issue · 1 comments
The current code uses as algoritm to calculate whether foreground text in black or white is better for a background of the highlighted color.
There's a newer algorithm for this being developed wy the W3C for the new WCAG3 accessability standards, and it seems much more accurate. They have a js version on their github:
Hello, I'm the inventor of the new contrast method for WCAG 3, APCA (Advanced Perceptual Contrast Algorithm) I just saw this post and wanted to chime in.
If you have software that flips the text from black to white, based on a particular background color, I have a repo here that discusses this use case specifically:
https://github.com/Myndex/fancyfontflipping
And here's a CodePen demo
https://codepen.io/myndex/pen/GRyxrrm
Two points:
- The "flip point" is about luminance
$0.37 Y$ $0.41 Y$ , which may be counter intuitive — intuition might say it should be the same as the classic mid grey of 18%, but in the research for APCA we discovered that middle contrast for text is about 37% to 41% luminance, aka$0.41 Y$ , or about #a4a4a4 to #ababab.
2.The point of mid contrast is also not enough for either black or white text, unless the font is large and bold enough. The code linked above increases font size through the midrange.
Thank you,
Andy