6 ms·
I have a design background and have written a lot of CSS, and I have opinions so just interpret this all as a personal preference if you want. * It's basic flo
by efields 5y ago
I have a design background and have written a lot of CSS, and I have opinions so just interpret this all as a personal preference if you want.
* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?
* Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember.
* Shadows are really never black and your CSS shadows will look better if you don't default to black. Toggle 'tint shadows' on the _excellent_ css shadow palette generator: https://www.joshwcomeau.com/shadow-palette/ https://www.joshwcomeau.com/shadow-palette/. Play with background colors, you'll see.
* Your design will never please everyone, especially anything close to a majority on certain tech news aggregators.
- fatbird 5y agoA colleague who's a CSS wizard was working on a site where a defined colour in SCSS was "black" and it was #333333. He added a darker black at #222222, and then didn't call it "dark_black" and I've never forgiven him.
- efields 5y agoWhat a missed opportunity.
- brianwawok 5y agoCould have been blackblack or blacker. Leaves room for the next level to be blackblackblack or blackest.
- tim333 5y agoBlackadder maybe.
- IggleSniggle 5y ago1) darker_blackblackest vs 2) darkest_blackblack, vote for the one closer to #000, GO!
- frandroid 5y agoThere's VantaBlack for that...
- IggleSniggle 5y agoThat face when somebody decides it’s easier to reassign the VantaBlack var from #000 to #111, and later somebody needs a different #000
- wizzwizz4 5y agoInb4: “We can't use #000000 because we don't have a license for VantaBlack.”
- cobbal 5y agoblacker_than_the_blackest_black_times_infinity
- jawilson2 5y agoHow does a software engineer pass up the opportunity to reference either Spinal Tap or Douglas Adams?
- jraph 5y agoif the white is blinding, isn't it because your screen is too bright? If you force me a reduced contrast, I can't adjust. If you give me black on white, I can always set my screen at a comfortable level for me. With reduced contrast, you also might force me to increase the brightness of my non OLED screen, which will use draw more power from my battery.
- efields 5y agoMaybe not blinding but not pleasant. Keeping brightness in check is something I do often but I doubt many people do — notice how bright everyones devices are in public next time you're in a restaurant or theater. I'm with you that you want high contrast, but you also want balance. I think the #000 on #FFF of this textarea I'm in works because the leading is tight, the kerning is appropriate… its information dense. The NYT website is information dense. If I squint and I see a grayish blob I feel like good decisions were made. If I still see mostly white then there's work to be done.
- Sohcahtoa82 5y agoI've always been of the opinion that if you find a completely white screen to be blinding or even painful, then you either need to turn down your brightness or add additional ambient light to your room, or both.
- andrei_says_ 5y agoMost of the apps text editors etc. I use are in dark mode. So yes, my screen brightness is set to above 50%. When I switch to a white-background page I get instantly blinded.
- jraph 5y agoYou might like an extension such as Dark Background with Light Text. Another tool that might help: zooming texts so you don't need them so bright in dark mode. It might help reduce eye fatigue too.
- hcarvalhoalves 5y agoThis. People use 100% screen brightness then try to compensate w/ low contrast colours. I see a lot of colleagues messing with low-contrast color themes for their editors. I use the default Emacs one (black on white), but my screen brightness is always at around 20-30%. I've learned the rule is to set your screen brightness _as if_ it were a piece of paper being illuminated by the ambient light.
- dredmorbius 5y agoDevice-specific limitations and concerns should be addressed on-device rather than globally. If a device's white is excessive then have that device correct for it. Attempting to treat special or exceptional cases as a general rule, or even the current primary modality leave you with such disasters as presuming all devices will have some fixed maximum display size (320, or 640, or 800, or 1024, or ... pixels), or refresh rates, or palettes ("Web-safe" colours, anyone), etc., etc. We're working in a digital medium. The domain we can control is the content itself --- text, the source images, audio, etc. All of those are going to be interpreted and mediated by the devices and tools through which they're accessed. NB: In my far-more ambitous youth, I'd have said "people can choose their own preferences. While I'd very much prefer that that capability be preserved, in the overwhelming majority of cases, people stick with defaults and won't change even the most basic of settings.* This is why both content and UI/UX designers and device manufacturers should ensure that 1) defaults are sane and that 2) automatic adjustments occur and are well-suited to circumstances. Pixel-perfect presentation is a persistant pox on publishing predicated on ... the Web. (I ran out of Ps....) I've railed against it for decades.
- wizzwizz4 5y ago> (I ran out of Ps....) Predicated on poorly-picked presumptions. (On the web.)
- dredmorbius 5y agoPatently perfect!!!
- userbinator 5y agoThe default brightness of a monitor is optimised for looking good in a brightly-lit showroom (and also for stressing the backlight enough to ensure it fails just outside of warranty, but I digress...), not for comfortable reading in an average room. I started with brightness and contrast set to 0 on a pair of LCDs over a decade ago, and they've only gone up to around 20 after all this time to compensate for wear.
- ddingus 5y agoI much prefer managing my own contrast levels. Always have. The product of all these attempts to do things for people results in a mess. It's one of those, "if only everyone would..." scenarios. Fact is they just won't. All that said, leaving some room makes sense. That's likely in the median of the mess and not contributing to it all that much. macOS doesn't suck at all. It's the device performance being exemplary and people not realizing what that means that sucks.
- krisoft 5y ago> Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare? What kind of fear mongering is this? :D If I ever feel we should have made something less dark I will just change it. It's not like I signed a deal with the devil which locks me into that particular colour choice. I understand if you ask a similarly worded question about some choice in a database schema, but colours on a UI? Fleeting like a butterfly.
- lumens 5y agoConsider the following: if your design expertise was as significant as your database expertise, perhaps your view of the downstream implications of decisions in each would be more alike than not.
- efields 5y agoPrecisely. They're "just colors"? "Just integers"?
- bigbillheck 5y agoDon't hardcode integers either if you can help it.
- rytill 5y agoDownstream implications are less important in some fields than others. Can you present an argument for your case that downstream implications in design are about as important as they are in databases instead of appeal to imaginary authority?
- dsizzle 5y agoThis site uses white (on the sides). Does that bother you? Seems fine to me.
- dredmorbius 5y agoMy preferred custom CSS for HN swaps the page background and text-area colours. Give me black-on-white for text. (It's also annoying on e-ink, as you might expect.)
- tshaddox 5y ago> Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare? Assuming you have a well-managed CSS architecture, you could use black for the darkest thing on your site now and change it later if it absolutely becomes necessary! I don't quite follow the logic of not using pure black now because you might need it in the future, since that same argument will apply just as much at that future time! Besides, there are only 256 shades of neutral gray (black #000000 to white #FFFFFF), so even if your "black" background is #333333 one could still argue "Are you 100% sure there won't be more than 50 darker shades of grey on your site you'll ever need to declare?"
- kitsunesoba 5y ago> * Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember. I always thought the grey window backgrounds used by the Classic Mac OS Platinum appearance were great for this. Bright enough to not be dingy and depressing like the more middle-greys used by Win9x, but dark enough to not be blinding, and also dark enough to use actual black for text to maintain high contrast ratios. Platinum was designed at the height of CRTs, which were considerably brighter and higher contrast compared to the LCDs that followed them — even run of the mill budget CRTs outperformed the average early LCD, and consumer LCDs didn’t really catch up for a good 10-15 years after CRTs went out of style (in some aspects, LCDs are still playing catch-up). I wonder how much the hardware was responsible for shaping screen content design trends.
- layer8 5y ago> A large window of Mail.app in light mode is pretty blinding. Honestly, if that is the case then the display is set much too bright.
- dylan604 5y ago>* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare? That's kind of like in BASIC incrementing line numbers by 10 instead of one so you can more easily add lines that you will eventually realize are needed to be shoehorned in.
- GekkePrutser 5y ago> * Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember. Yes this is why I love dark modes these days. So many apps totally overdo it with the white. MacOS indeed but also pretty much all Google apps and sites are light gray on white. It's too blinding and I can't reduce my screen brightness as I'm already at 0% during the day. Screen manufacturers are now optimising for high brightness that stands out in the shop but ignore low levels. And so I reduce my contast as the only option but it reduces colour depth too much. Dark modes are not a perfect option either because they make the apps that don't support it be ultra bright in comparison. But either way it starts with misguided design principles from Apple and Google IMO. The old Grey window fabric of windows 2000 was boring but it really balanced things out.