3 ms·

It's funny, because I've never really thought hard about this, but I made a similar decision on my personal site. My site has a "dark mode" style theme - dark

It's funny, because I've never really thought hard about this, but I made a similar decision on my personal site. My site has a "dark mode" style theme - dark background and "white" text. When I was initially designing the theme, I opted for a slightly-less-white text color, and as I've spent more time on it, I ended up bumping that color to be closer to pure white. (I'm using Tailwind, so this change amounted to "text-neutral-400" -> "text-neutral-300".) I think I did this because the "more white" color seemed... sharper (very insightful, I know)? Like it was "an assault on the eye" to have the color be so bright. As I continued working on the site, I decided, in short, that that was stupid, and that I should have more contrast. This was a good reminder for me that some of my pages need that styling updated, but it works out well for demonstrating the difference: This page has the old, less contrasting color for the body text (text-neutral-400): https://epiccoleman.com/posts/2023-03-07-how-i-built-this-site.html https://epiccoleman.com/posts/2023-03-07-how-i-built-this-si... This page has the new, "whiter" color (text-neutral-300): https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifths.html https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth... After skimming through these again as I linked them in this post, I think I could even bump it up to be even closer to white. I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. Anyway, not to ramble, but I guess my point is - design is hard! It's not easy to take into account all the myriad different factors that need to be considered to make designs that look aesthetically pleasing while maintaining readability at various brightnesses and screen sizes and so on and so forth. Edit: One other consideration - I wanted some color contrast between elements like text, headings, and the post date - so that's another thing I was trying to take into account. For example, if you want your headings to be a bit brighter than your text, you're left using (for example) text-neutral-200 for headings and text-neutral-300 for text. Again, as I continued tweaking, I realized that the size difference between headings and text does enough work establishing contrast that this was unnecessary - but it's just one more factor in a long list of things a designer has to think about to make things look right.

DiabloD3 3y ago
> I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. This part of your problem: if you're doing any design work, understand the specification you're designing for. This goes for any photographer, print designer, or web dev. sRGB, bt709, rec2020, and SDR content in rec2100 contexts define the brightness of white as 100 nits, and is generally considered acceptable to be between 100 and 120 (as you often need to offset for ambient lighting to maintain perceptual white). Your perception of both luma and chroma contrast, but also your perception of color itself, changes over the range of brightness your eye can perceive; the organic gamma curve of your eye also changes. Example: sRGB gamma and bt1886 EOTF are intended to be used with content that has a 2.4 gamma and a near-D65 whitepoint at around 100 nits; the same content at "theater darkness" (48 nits) will be encoded with a warmer/yellower white point, at 2.6 gamma, to maintain perceptual similarity. And why is this? The rods (low light vision) and cones (bright light and colors vision) in your eye have different organic gamma curves (incl. each of the three cones have different curves in-of themselves), and the rods do not respond to all visible light equally and have a broad "color" of their own and rods continue to function and influence perception in bright light situations. You can argue, "but Diablo, most people do not calibrate their displays", which is absolutely true; most displays, however, are manufactured with defaults that mimic the intended use of sRGB and bt709 content, and users, left to their own devices, generally will choose a brightness that approximates 100 nits plus an appropriate offset for ambient. However, even for your own personal website, buy a colorimeter, whip out the DisplayCal software, set your profile to "Video (D65, BT1886)" (not "sRGB" due to modern content being mastered entirely for displays manufactured in the past 15 years; BT1886 handles perceptional similarity and better in dark values than sRGB's weirdly defined ramp), and then enjoy being able to author content for a wide range of displays.

DiabloD3 3y ago

> I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. This part of your problem: if you're doing any design work, understand the specification you're designing for. This goes for any photographer, print designer, or web dev. sRGB, bt709, rec2020, and SDR content in rec2100 contexts define the brightness of white as 100 nits, and is generally considered acceptable to be between 100 and 120 (as you often need to offset for ambient lighting to maintain perceptual white). Your perception of both luma and chroma contrast, but also your perception of color itself, changes over the range of brightness your eye can perceive; the organic gamma curve of your eye also changes. Example: sRGB gamma and bt1886 EOTF are intended to be used with content that has a 2.4 gamma and a near-D65 whitepoint at around 100 nits; the same content at "theater darkness" (48 nits) will be encoded with a warmer/yellower white point, at 2.6 gamma, to maintain perceptual similarity. And why is this? The rods (low light vision) and cones (bright light and colors vision) in your eye have different organic gamma curves (incl. each of the three cones have different curves in-of themselves), and the rods do not respond to all visible light equally and have a broad "color" of their own and rods continue to function and influence perception in bright light situations. You can argue, "but Diablo, most people do not calibrate their displays", which is absolutely true; most displays, however, are manufactured with defaults that mimic the intended use of sRGB and bt709 content, and users, left to their own devices, generally will choose a brightness that approximates 100 nits plus an appropriate offset for ambient. However, even for your own personal website, buy a colorimeter, whip out the DisplayCal software, set your profile to "Video (D65, BT1886)" (not "sRGB" due to modern content being mastered entirely for displays manufactured in the past 15 years; BT1886 handles perceptional similarity and better in dark values than sRGB's weirdly defined ramp), and then enjoy being able to author content for a wide range of displays.