Hacker News new | past | comments | ask | show | jobs | submit login
An interactive guide to color and contrast (colorandcontrast.com)
77 points by warrenm on June 23, 2023 | hide | past | favorite | 19 comments



Hard to tell if this is auto generated but I'd guess so. There's a somewhat egregious error. In the Helmholtz–Kohlrausch effect section the site states"

"The illusion where increased saturation (or chroma) of a color is perceived as an increase in the color's lightness."

But that is notably wrong. Lightness is a tonal metric (closer to white, more lightness) and is defined as such on that site as well.

In the H-K effect, emitted light of greater saturation (less lightness) is perceived as higher luminance (brighter) than emitted light of greater lightness.

A more accurate statement would be "The effect whereby colors of greater saturation than, but equal luminance to, a less saturated reference color are perceived to be of greater luminance that the reference color." (I'm sure that could be tightened up.)

A very different thing.


There is some conflation here between an art definition and the colorimetric definition. In colorimetry:

Luminance is a spectrally weighted measure of physical light, it is not a perception, and luminance is linear to physical light.

Lightness is the perception of luminance, along with darkness and brightness. In colorimetry, the term lightness is used to distinguish the perception of light (which is nonlinear to physical light) as opposed to luminance which is a linear measure of physical light.

Luminance is denoted Y (relative) or L (absolute), Perceptual lightness is L* (Lstar) or J, brightness as Q (in most models).

As you noted, the term lightness can also be used as a tonal metric (i.e. in art). However in colorimetry, the closeness to white, or achromatic, is described as less purity (less chroma or less saturation).

And for the record, the site is not auto-generated. Nate Baldwin created that site. Nate is also the developer behind Adobe Leonardo, the color palette utility.

As for the Helmholtz–Kohlrausch phenomenon, here is the official definition from the CIE - International Commission on Illumination

Change in brightness of perceived colour, produced by increasing the purity of a colour stimulus while keeping its luminance constant within the range of photopic vision

Note 1 to entry: For related colours, a change in lightness can also occur when the purity is increased while keeping the luminance factor of the colour stimulus constant.

-----

The CIE points out that the change in perceived lightness occurs with increased saturation (purity).


Sounds like you found a typo (since Wikipedia[0] lists "luminance" vs "lightness")

Why don't you message the creator (Nate Baldwin[1][2]), and bring it up?

...though since the creator referenced not only the Wikipedia article, but several others on that site, perhaps it's not a typo?

---------

[0] https://en.wikipedia.org/wiki/Helmholtz%E2%80%93Kohlrausch_e...

[1] https://colorandcontrast.com/#/references

[2] https://natebaldw.in


I really wonder what this site was made for. It’s obviously heavily GPT sourced or similar, and I’ve yet to find a page that teaches me something useful.

For example, this page: https://colorandcontrast.com/#/trichromacy

The entire text content of this page is: Color vision where all perceived hues are created by mixtures of three primary colors (e.g. red, green, & blue). Trichromacy is a photoreceptor-level understanding of color perception.

This teaches me nothing. It might as well have been in Klingon. And how does any of this form a guide to “color and contrast”? Where can I apply this?

What I don’t understand is, why do the effort of building this page, registering the .com, image searching (i assume? I hope?) the pictures and then copypasting the content from a bad AI? What’s this for?


Nate developed the site before AI like GPT were available. Color is a very difficult subject—but the site is filled with the references that it's relating to, so if you want the deeper dive, go to those multi-hundred page references.

As far as the guide to contrast, look at the navigation on the left, and go to the contrast section. The site is set up more like an encyclopedic reference as opposed to a read-from-the-top blog.


Per the Introduction[0] ...

>This website is for designers to learn about color, contrast, and how it can affect experiences of a user interface. It provides quick access to relevant information at any point in the design process.

>The content is thorough, but concise, and provides contextual insight to assist you in making educated decisions about color and contrast.

-----------

[0] https://colorandcontrast.com/#/introduction


That doesn’t address any of the points I raised.


You asked, "I really wonder what this site was made for"

I supplied what it says about itself


This may be an exercise in webpage design, a portfolio or a site-in-progress. Didn't check it all but some pages may be just simple placeholders to be filled in the future.


Nate Baldwin (the developer behind Adobe Leonardo) created the site, and did a pretty amazing job, taking an extremely complicated and nuanced topic (color) and breaking it down into small, bite-size pieces for this encyclopedic reference.


In my opinion, it is a good example of a document-type website, can you share the technology stack?


when trying to read through it - it's kind of a bad example of a website, that turns out to be unusable. unreadable, definitely. or maybe it's just this kind of format, 'bunch of separate pages, sidebar with nesting, and clicking, clicking and more clicking between pages' - is actually bad for reading through content. mostly because of constant reading flow interruption.

pages are too short, there's too little information on them, switching between pages and reading through is clunky, there's too much clicking - and not enough 'actual content' in comparison. (there's too much clicking in proportion to actual content being shown, and it ends up being an annoyance and a disappointment in 'received/perceived value from actions'.) even the individual pages - besides being alarmingly most of the time too short to even be an individual page and not a section on a larger page - pages also have a bunch of overstructured 'junk' on them: those bizarre blue (?) cards stacked at the bottom (wanna highlight something? one or two cards - fine. five, six, more? that's entirely too much), 'related topics' (that look just like a meaningless list of random links), and sources (dumped at the bottom, instead of being interspersed throughout the text, or being tucked away somewhere else). it all just looks like a bunch of visual clutter with dubious value, and even if there's actual value there, it gets diminished by having stuff be scattered like this, in a 'what should I even pay attention to' kind of way. and when all that junk in comparison is even longer than the 'page' and its actual content itself - it really gives an impression like 'what the hell is even happening here? what's the value of this'. being forced to scroll through that junk to even get to 'prev/next page' buttons, feels kinda like a betrayal of good reading experience.

it's a good example of why websites like this are so bad at being 'readable'. like, compare this mess to the experience of reading a book.


I don’t think it needs to be too strict and can be more friendly. As someone who lacks understanding of color theory, I can learn a lot from this website. In fact, each topic doesn’t have much content. I think it’s a kind of restraint, only retaining the most basic definitions and providing reference materials. In terms of UI, this website looks visually clear and has friendly navigation. Personally, I like it.



Appears to be React + React Router, built with create-react-app. I'd use Next for a site like this nowadays, though.


[flagged]


Please stop spamming threads and read the FAQ: https://news.ycombinator.com/newsfaq.html

> Can I delete my account?

> We try not to delete entire account histories because that would gut the threads the account had participated in. However, we care about protecting individual users and take care of privacy requests every day, so if we can help, please email hn@ycombinator.com. We don't want anyone to get in trouble from anything they posted to HN. [More here](https://news.ycombinator.com/item?id=23623799).


The amazing part is they only have four comments to begin with, and nothing personal in them.

Also Nocturium a ban won't affect your old comments.


[flagged]


You're not banned yet, and I still see all four legitimate comments that were there before. The only ones missing are the ones where you were spamming asking to be banned.


[flagged]


I'm not doing anything and I didn't write the FAQ—I'm just a normal user. You need to talk to the admins.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: