Comment by johnisgood

Comment by johnisgood a day ago

I know about WCAG, too. You can also just implement a function that detects whether or not a color is dark or not. It is a general purpose function, e.g. my "isDark" function is: "func() < 0.5" (func() is omitted, but it is an algorithm). You can have "isLight", too, by doing "> 0.5". There are many ways to do this. You can just simply convert a hex color to RGB, then compute the luminance of the color, and then compare the luminance to a threshold (e.g. 0.5) to classify it as dark or light. The luminance function (WCAG luminance formula) converts RGB values to the range 0-1, applies gamma correction, and calculates luminance using the weighted sum of the gamma-corrected RGB values.

> APCA says you don't need as much contrast

You can always specify the threshold if you want, e.g. "apcaContrast(color)) >= $targetContrast" after adjusting, depending on what you want to do.

It really is easy, just make sure you have enough color space.

refulgentis a day ago

The WCAG luminance formula (relative luminance in color science terms) has perceptual mid gray at 0.18, not 0.5.

re: just change APCA contrast target, that's separate from the Not Even Wrong stuff in the article. I didn't mean to imply APCA is wrong to say you need less contrast, but rather, that the article is wrong to conclude white has more contrast.

Reply View 3 replies

johnisgood a day ago

Well, I used 0.5 as a convenient and intuitive midpoint of the 0-1 luminance range, but this of course is a simplification and doesn't align with human perception (edit: it is aligned), it was more of an example if anything.
You are right, 0.18 is indeed perceptually closer to "middle gray" because the eye responds more sensitively to darker tones, so yeah, using a threshold closer to 0.18 makes more sense if we want to identify whether a color "feels" light or dark.
That said, 0.5 is a mathematical midpoint, but as I said, not aligned with how humans perceive brightness (edit: it is aligned).
Ultimately one could use 0.18-0.3 as threshold.

Reply View | 2 replies
- anoncareer0212 a day ago
  
  > midpoint of the 0-1 luminance range
  There are two physical quantities for luminance, relative, and perceptual, so that passed along a nugget for those not as wise as you who might not know that :) As you know and have mentioned, using 0.5 with the luminance calculation you mentioned, for relative luminance, would be in error (I hate being pedantic, but it's important for some parties, a11y is a de facto legal requirement for a lot of work, and 0.5 would be spot on for ensuring WCAG 2 text contrast as long as used with perceptual luminance, L*)
  > doesn't align with human perception
  It is 100% aligned with how humans perceive brightness, in fact, it's a stable work product dating back to the early 1900s.
  > Ultimately one could use 0.18-0.3 as threshold
  Perceptual luminance and relative luminance have precise mathematical definitions, one can be calculated in terms of the other.
  If you need to hit contrast K with background color C, you won't be able to treat this as variable. What you pass along about it being variable is valuable, of course, in that, given K and C, output has a range, i.e. if contrast algo says you need +40 L* for your text to hit APCA/WCAG whatever, and your C has 50 L*, your palette is everything from 90 L* to 100 L* and 0 L* to 10 L*.
  
  Reply View | 1 reply
  
  johnisgood a day ago
  
  So 0.5 is correct after all?! I thought I was completely off with 0.5 and I thought it does not align with human perception because I thought I was wrong. Ouch. In my defense, it has been a while. :D
  BTW, would this relatively simple way to determine if the color is dark work?
  $luminance = 0.299 * $r + 0.587 * $g + 0.114 * $b; return $luminance < $threshold;
  Where $threshold is 128, I think? IIRC 128 is a common threshold from what I remember, in this case.
  
  Reply View | 0 replies