Comment by mediumsmart

Comment by mediumsmart 2 months ago

13 replies

>But, on a large project, with a large team, carefully managing such details can become a really hard task to get right. Suddenly a dark button has unreadable black text, and users can’t figure out what to do.

Cant someone take a look at the buttons before the large project ships? Alternatively make it mandatory to never have black text on a dark button and tell every team member including the large ones.

Interesting to read about the perceptual contrast vs mathematical - I did not know that. Going to integrate that into my workflow.

Merad 2 months ago

> Cant someone take a look at the buttons before the large project ships?

They can, of course, but this is how you end up with pre-release regression testing cycles that are weeks or even months long. A "large project" might easily have thousands of buttons (or more!), many of which are only seen when certain settings are enabled, certain options are chosen during a complex workflow, etc.

johnisgood 2 months ago

You may want to read about APCA, as you can have perceptual contrast calculations using the APCA algorithm.

  • refulgentis 2 months ago

    You can have them with WCAG2, the stock APCA example hides the ball significantly and leads to a lot of incorrect conclusions in the article (tl;dr: black has more contrast by either measure, its just that APCA says you don't need as much contrast, so you can use white and have sufficient contrast)

    • johnisgood 2 months 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 2 months 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.

    • csande17 2 months ago

      > black has more contrast by either measure

      No it doesn't? The screenshot of the calculator in the blog post very clearly shows that white has a greater contrast according to APCA. (If the negative numbers are confusing, you can also put the colors into a BridgePCA calculator like https://www.color-contrast.dev/?txtColor=FFFFFF&bgColor=317C... to see WCAG-2-style "contrast ratio" metrics computed using APCA.)

      The point of APCA is to make the contrast calculation more perceptually accurate, not just lower the threshold.

      • refulgentis 2 months ago

        > The point of APCA is to make the contrast calculation more perceptually accurate, not just lower the threshold.

        If you're unlucky enough to be familiar with the math, it is trivial to show it lowers the threshold at luminances, no matter the luminance (widely accepted Y or L*, or APCA's own luminance calc)

        Re: the idea I think the point of APCA is to lower contrast threshold - you're entirely correct that this is a side effect of the main goal - to model contrast more accurately.

        There is no such thing as non-perceptual contrast, perceptual contrast is a tell stuff is being regurgitated.

        We're a bit far afield when we're doing APCA => BCPA => claims actually contrast ratio is 2.4 => look at actual contrast ratio, and its...5.39.

        2.4 is supposed to be unreadable, which clearly isn't the case here.

        So what's going on?

        The wrong text size is being used on the BCPA site, it's being calculated as if it's 12 pt and it's 36 pt in the article.

    • mediumsmart 2 months ago

      I thought the white looks sharper but is not really. I would darken the blue a bit to be happy about it.