[HN Gopher] Why some GitHub labels are illegible
___________________________________________________________________
Why some GitHub labels are illegible
Author : robinhouston
Score : 113 points
Date : 2023-03-13 12:18 UTC (1 days ago)
(HTM) web link (firsching.ch)
(TXT) w3m dump (firsching.ch)
| frosted-flakes wrote:
| The proposed color-contrast() function in the CSS Color Module
| Level 6[1] will make solving this problem a lot easier. Rather
| than doing some messy, complicated calculations on individual
| color component values, this new function will allow you to pass
| in a base color, an optional target contrast, and a list of
| possible foreground colors (defaulting to white, black). The
| function will choose the first option that meets the target
| contrast, or the highest contrast if no target contrast is
| supplied.
|
| For example: contrast-color( wheat tbd-
| bg wcag2(aa), bisque, darkgoldenrod, olive, sienna,
| darkgreen, maroon )
|
| will return "darkgreen".
|
| - "wcag2(aa)" means level AA of the WCAG2.1 luminance contrast
| algorithm, which computes to "4.5".
|
| - "tbd-bg/tbd-fg" sets whether it is determining the background
| or the text color.
|
| This proposal is still in the experimental phase, and not all
| parts of the spec are finalized (such as the tbd-bg or tbd-fg
| keywords, or even the name of the function itself).
|
| [1]: https://w3c.github.io/csswg-drafts/css-
| color-6/#colorcontras...
| pyrolistical wrote:
| Seems like something that could be calculated and baked server
| side
| frosted-flakes wrote:
| If it's a static colour, sure. But if it's set by the user
| with a colour picker, that doesn't really work.
| ok_dad wrote:
| For accessibility, it's better to do this client side, so
| clients can adjust it themselves to be more contrasting or
| whatever.
| pyrolistical wrote:
| that's cool. use both. calculate a good default contrast
| server side, use proposal to allow client side to override
| default
| madeofpalk wrote:
| except the server doesn't know if the client prefers light or
| dark mode
| ipython wrote:
| The "almost unreadable" tags near the bottom of this page
| reminded me of the Visual Contrast Test, which is said to be an
| indicator of mold issues in the body: https://www.vcstest.com/
|
| For example I couldn't tell the text at all in any of the four
| tags, including the "hard to read" or "quite unreadable".
| ntrz wrote:
| Wouldn't the results of that online visual contrast test depend
| on your monitor's color calibration, etc? Or is it designed in
| some way that avoids that affecting the results? I'd hate to
| think my body was infested with mold when I'm actually just
| using a crappy 10-year-old monitor.
|
| Edit: I see from the FAQs there's some kind of display
| calibration portion at the start of the test; should have read
| the website more carefully before asking!
| doix wrote:
| > For example I couldn't tell the text at all in any of the
| four tags, including the "hard to read" or "quite unreadable".
|
| For what it's worth, I couldn't tell the difference either. All
| of them were completely incomprehensible.
| CapstanRoller wrote:
| What is a "mold issue"?
| ipython wrote:
| From the above website (I'm not advocating that it's right
| just this is the claim):
|
| > What can cause a contrast sensitivity deficit? > Many
| things can affect the ability to perceive contrast. These
| include nutritional deficiencies, the consumption of alcohol,
| drug/medication use, and exposure to endogenous or exogenous
| neurotoxins and/or biotoxins, including volatile organic
| compounds (VOCs), venom from animal or insect stings or
| bites, some species of mold and the mycotoxins and microbial
| VOCs they produce, cyanobacteria, dinoflagellates
| (particularly Pfiesteria and Ciguatera), apicomplexans,
| parasites, heavy metals like mercury and lead, and the
| pathogens responsible for Lyme disease and its common co-
| infections. For more information, see our Research resources.
| zamadatix wrote:
| Site note: on mobile it's easy to get a bit trapped trying to
| drag and scroll because you end up spinning the 2 diagrams
| instead
| pier25 wrote:
| Oh wow I didn't know max() existed in CSS.
|
| And it has decent support:
|
| https://caniuse.com/css-math-functions
| agumonkey wrote:
| I expected to learn more about visual contrast / ux / ergonomics,
| but he's a topology math guy. Unexpected and delicious.
| cowsup wrote:
| "Never make the text color of labels grey,"
|
| Honestly surprised GitHub did this.
|
| I've worked with software where a user picks a color for
| something that renders text atop it. Never once did I think to
| allow for an in-between color.
| hinkley wrote:
| The problem is that everyone says this but then nobody defines
| 'grey'.
|
| It's been a while since I've done UX but I remember a couple of
| rules of thumb involving projectors (if you work on project
| management tools it is a certainty that your tool will be used
| in anger on a projector, and shitty UI in an emotionally
| charged room is a toxic cocktail).
|
| Anything greater than #eee is indistinguishable from white, and
| anything less than #222 is indistinguishable from black.
|
| In the days before font weights actually worked, you could do
| three font weights by mixing #222, #444, and bold.
|
| So that's a third of the greyscale range that isn't grey, at
| least, and it also misses other mostly-grey colors, and a bunch
| of shades of blue. Which I think is a long way of saying it's
| not grey that's the problem, it's low-contrast that's the
| problem. While grey is heavily represented in that set of
| colors, it's not all of them, and it might not even be half of
| them.
| Dylan16807 wrote:
| That's not the problem here, where they clearly defined the
| goal colors as 000 and FFF, but the math fails sometimes.
| thewataccount wrote:
| I've also found in the dark mode that the background colors of
| those labels are transparent and I think modified a bit (I'm not
| sure how to tell) to lower the contrast.
|
| Basically they have this muted pastel look which I know is the
| stylish thing, but it means there aren't really more then half a
| dozen distinguishable label colors if that, because the contrast
| is hindered so much by whatever they've done to it.
| tobr wrote:
| You can't make a conditional using < and ?: in CSS, can you?
| That's why they are using a very sharp black/white gradient,
| which unfortunately creates a gray in some cases. Apparently the
| contrast is not sharp enough.
| dan-robertson wrote:
| Yeah I think it doesn't exist.
|
| In theory a solution would be something like:
| clamp(0,(var(--perceived-lightness) - var(--threshold)) *
| Infinity, 1)
|
| But most browsers don't support Infinity. I assume that GitHub
| can find a suitably large number to put there though. (Maybe
| I'm wrong though because of precision issues elsewhere).
|
| Another potential solution would be with sign but this function
| is also largely unsupported
| zX41ZdbW wrote:
| I'm using the same algorithm to color logs in ClickHouse:
| https://github.com/ClickHouse/ClickHouse/blob/82a6d75050513b...
|
| It also ignores Gamma, but at least it is described in the
| comments in the code.
|
| Nevertheless, I enjoy the colors every time I launch clickhouse-
| server.
___________________________________________________________________
(page generated 2023-03-14 23:01 UTC)