12 ms·

Dear web developers: set the font color, too

180 points by luuio 8y ago

mtmail 8y ago
As a lazy web developer (it's not my main job) I just hope there are tools who mark those in a checklist. E.g. Google Lighthouse Accessibility Audit. https://developers.google.com/web/tools/chrome-devtools/accessibility/reference https://developers.google.com/web/tools/chrome-devtools/acce...
droobles 8y ago
Definitely agree accessibility is important going into 2019. Different users are going to be viewing a site with more screen readers, dark theme, and other alternative viewing options, very much like we saw with mobilegeddon and the advent of responsive design. I've seen the argument that this hurts the "intended web experience", but this can be solved by keeping up with modern CSS practices and crafting the experience with screen readers in mind. Good stuff, thank you for sharing.
- deleted 8y ago
  [deleted]
- nickbee 8y ago
  How does HN stack up in terms of accessibility? Anyone using a screen reader with HN? What do you wish was different?
  - Pfhreak 8y ago
    I struggle with how low contrast it is. I skip 'Ask HN' style posts because they are too hard to read.
    - krapp 8y ago
      > I skip 'Ask HN' style posts because they are too hard to read. That's done on purpose to discourage people from posting (or reading) them too often. PG was afraid letting people write text posts would lead to "blogging."
      - joshstrange 8y ago
        Can we get a source on this? Not disputing but I had never heard that before and it's interesting.
        krapp 8y ago
        https://news.ycombinator.com/item?id=468471 https://news.ycombinator.com/item?id=468471
        alistairSH 8y ago
        Wow, that's a ridiculously user-hostile approach to the problem.
        nickbee 8y ago
        HN was designed for a small audience, and it intentionally did things to discourage growth. The goal was to preserve the community for longer.
        alistairSH 8y ago
        I understand the reason. That doesn't make it any less hostile to users with poor eye-sight.
        krapp 8y ago
        If Hacker News wanted to discourage growth, they should have made the forum private and invite only. There was never any real chance of this forum going mainstream, not because it was too ugly and awkward but because it didn't have any mainstream appeal. Negative reinforcements like making the text purposely difficult to read mostly just punish existing users.
        nickbee 8y ago
        Are you sure HN isn't mainstream? It's up to 19 million items.
    - Noumenon72 8y ago
      I suggest highlighting the text to read in reverse video.
  - jolmg 8y ago
    I wish the nesting of replies were visible in elinks. I just see one post after another in a linear fashion. I can't tell which post is a reply to which. That nesting is visible on w3m, though, so that's neat. Still, I can't seem to be able to collapse thread branches because it requires javascript. That's a shame. I wonder if w3m would recognize something like: .collapse:checked + .content-and-replies-container { display: none; }
- jameslk 8y ago
  I agree we need to give accessibility more priority and we likely will once the discrimination lawsuits start rolling in. But this isn't an accessibility issue. Nowhere in WCAG 2 will you find anything that explicitly outlines both color and background color need to defined in stylesheets. This is for users who prefer dark themes who are overriding styles of websites incorrectly. It is a failing of the user's browser/OS for not explicitly overriding both background and color at the same time or neither. If every developer had to add in a color for the edge case that someone is overriding styles globally, then we'd be bloating stylesheets with extra unnecessary bytes.
  - luuio 8y ago
    You got it backward. The custom CSS of the website is overriding the system styles in this case. Let's take font-family for example. Just because you're setting the font for your input[text] tags doesn't mean the browser will also automatically set the font for other elements to match the style. If you want the website to have uniform look, then you'll need to set the font-family for other elements, too.
    - jameslk 8y ago
      This is really just the old debate of whether to use a reset css in disguise. It has nothing to do with accessibility.
  - alistairSH 8y ago
    Nowhere in WCAG 2 will you find anything that explicitly outlines both color and background color need to defined in stylesheets. WCAG doesn't specify implementation, but WCAG 1.4.3 does require a minimum contrast ratio[0]. If the site allows black text on a black background, it will fail that requirement. 0 - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...
mikewhy 8y ago
Sure it's not an issue with whatever is doing that (hacky) dark mode CSS? Looking at the google example, they are setting the font color. It just doesn't look good when dark-mode CSS doesn't take the existing colors into account.
- lucideer 8y ago
  > Looking at the google example, they are setting the font color In most examples, they're setting the background colour without corresponding font colour. In the Google example, they're making the opposite mistake. One should set both or none.
- luuio 8y ago
  The dark mode is actually coming from the GNOME system colors, not browser plugin. From inspecting the CSS in the developer console, the cases in the screenshot either set the background color without setting the text color, or vice versa.
  - deckar01 8y ago
    I have a dark theme enabled on xfce, and this is not a problem for me in chromium. The inputs in native apps are dark, but they are the default light color in web pages on chromium.
    - robrtsql 8y ago
      Really? I might have to switch then.. I use Firefox and GNOME, and enabling one of the dark themes causes most forms on the web to become unusable because of this very issue.
      - lol768 8y ago
        There's nothing special about Chrome's implementation here. You can override the widget GTK theme in Firefox by setting the "widget.content.gtk-theme-override" configuration option to something like "Adwaita" or "Arc".
ccnafr 8y ago
Never though about this before, but, dark themes have only recently become widespread, so I'm not necessarily faulting web devs on this.
- chrisseaton 8y ago
  It's not about dark themes - I don't think it was ever right to set one colour without the other as I don't believe (may be wrong) that the CSS or HTML standard ever said anything about default colours?
- lucideer 8y ago
  Dark themes are just exposing these bugs in sites. They're still bugs, dark theme or not—this only occurs when a developer explicitly sets the BG/FG colour without setting a corresponding FG/BG colour—which would always be an oversight/accident. This doesn't occur if a developer does nothing.
- sneakernets 8y ago
  It's always been there, just called something like "High Contrast" or "Plasma".
- chriswarbo 8y ago
  > dark themes have only recently become widespread Have they? I've been having this problem for around 15 years :( Nice to see it brought up somewhere so prominent though!
- jolmg 8y ago
  I'm pretty sure dark (or at least custom) themes came before the web.
- jeroenhd 8y ago
  I've seen people that had their default background colours to dark green since the Windows 95 era. This is not a new trend. It's just not as common anymore as it used to be back when you as a user could specify easily how you want your system to look.
no_protocol 8y ago
What has happened to the concept of "User Defined CSS"? Is it totally gone? Did Chrome kill it? Browsers should be making this a prominent and first-class feature. Users should be able to quickly and easily set their default styles for various elements and choose at what precedence level they apply.
- deleted 8y ago
  [deleted]
- krapp 8y ago
  Browsers have supported user defined CSS defaults since forever, and plugins like Stylish have been around for a while. The practice of users customizing their CSS isn't prevalent because modern sites are incredibly complex and the average user doesn't want (or know how) to spend the time necessary to reverse engineer a site's layout and rewrite its CSS - there is no "quick and easy" way to do that for any but the simplest sites. Just consider how often professional developers complain about CSS, and they get paid to put up with it.
  - no_protocol 8y ago
    > Browsers have supported user defined CSS defaults since forever, and plugins like Stylish have been around for a while. It looks like Chrome removed these several years ago: https://news.ycombinator.com/item?id=7329855 https://news.ycombinator.com/item?id=7329855 Plugins are a thing but why should you need a plugin for something that is a core part of the CSS specification? https://www.w3.org/TR/CSS2/cascade.html#cascade https://www.w3.org/TR/CSS2/cascade.html#cascade > the average user This is (mostly) about accessibility. Even if the average user does not need it, some do. And those that do would be quite glad to have it easily. > there is no "quick and easy" way to do that for any but the simplest sites Just because user stylesheets have been ignored for many years doesn't mean they shouldn't be acknowledged. Design your site with them in mind.
- paublyrne 8y ago
  Not disagreeing, but why is this a good thing? Apart from that it's fun, are users really expected to be able to improve their browsing experiences with custom CSS?
TheCoreh 8y ago
Due to how widespread assumptions about "system" form field colors are throught the web, the proper thing for browsers to do is probably to _not_ apply a dark theme to form fields, at least by default. Maybe instead allow a CSS opt-in to support dark themes. This seems to be what Apple is doing with Safari, and I feel like it's what provides the best user experience out of the box. (Even for pages that don't make this styling mistake, a single dark input field on a full light page is not a satisfactory dark mode experience)
- jolmg 8y ago
  I agree that that is the simplest solution, and I've even configured Firefox as such[1], but I kind of wish I could have ONE place to control styling of everything. That is, I kind of wish web developers couldn't control colors and such, so people could have consistent styling in their whole system. That's a pipe dream though. Websites tend to be hosted by people that want a brand to protect, and as adoption of computers increase people on average don't want to invest time in learning how to use and configure their systems. Maybe I should consider seriously switching to elinks or w3m for my style-consistent browsing. [1] https://news.ycombinator.com/item?id=19056752 https://news.ycombinator.com/item?id=19056752
stevebmark 8y ago
...what? Set the default color in your dumbass hacker theme too. This has nothing to do with accessibility, which is obvious because the author thinks a gray background with lower contrast for text reading is better.
- untog 8y ago
  By "dumbass hacker theme" you mean "the dark theme that ships with MacOS", right?
  - deleted 8y ago
    [deleted]
  - stevebmark 8y ago
    Do you think mojave dark mode changes the colors of inputs on web browsers??
- function_seven 8y ago
  Agree with the low contrast complaint, but the OP article is right. The web developers have assumed what the text field colors will be. So when they override one color (either FG or BG), they need to set the other one as well, and not assume that it will match what's on their own screen.
- gmueckl 8y ago
  This is not the problem. The parts of a HTML form control that are not defined through CSS are taken from the system default theme by the browser. Usually this is white on black, but this is NOT guaranteed (e.g. high contrast schemes for vision impaired users). Web designers tend to use these default schemes when writing the CSS for a web site. So they write only the attributes they need to make it work on their setup. So if the textbox background or text color is already what they want, they don't define it. This the browser takes the non-matching system color instead- precisely because it was set in a "dumbass" scheme (I resent this term).
exploderwhale 8y ago
Or you could entirely avoid this issue by using multi-font themes with different weights, decorations, and ligatures.
- iainmerrick 8y ago
  What does that have to do with color and backgroundColor?
  - exploderwhale 8y ago
    How does it not? The article even states: "Don't set the colors at all, let the browser use the system default color". If a developer wants to express some intent maybe utilizing something else other than color would resolve some of these issues. If I can develop without color a user can read without color https://github.com/maio/eink-emacs https://github.com/maio/eink-emacs
    - iainmerrick 8y ago
      The article even states: "Don't set the colors at all, let the browser use the system default color". That’s just one of three options. Setting “both the background color AND font color” is another. Also, the third option might give you a hint that the author’s tongue is in their cheek.
mrspeaker 8y ago
I hit this same same issue too. I tried to eliminate white backgrounds, because I find it tiring on my eyes and a bit painful. These sites made it too annoying to change the defaults, so I ended up giving up (and just always having my screen brightness near minimum). But before I gave up I started collecting sites that either set background-color and not font color, or set color but not background-color: https://gist.github.com/mrspeaker/1846b6b0e12c76f7eeb2 https://gist.github.com/mrspeaker/1846b6b0e12c76f7eeb2. There's a useless list for you!
- deleted 8y ago
  [deleted]
- LoSboccacc 8y ago
  there's a contrast/brightness button on most hardware, why have low contrast websites by design? just tune your monitor! it will then work for websites, games and everything else. it will also allow you to handle contrast reducing it at night and tuning up when the monitor is struck with some glare, without having to change the css! imagine the convenience! software developer: using hammers for everything since 1842
  - mrspeaker 8y ago
    I don't want low contrast, I just wanted to swap my browser default foreground/background colors (low brightness is just my hacky workaround). The "bug" on these sites is that if devs set a default background-color they should also set a default font color: either set neither properties, or set both. Setting one means the default of the browser will be used. Most of the time it's background=white, foreground=black, so no one notices, but it means the option is gone for people who do want to modify them.
    - LoSboccacc 8y ago
      > I don't want low contrast > I tried to eliminate white backgrounds, because I find it tiring on my eyes and a bit painful. yes, yes that's exactly what you want. besides you can tune both gamma and tone both in software and hardware on most platforms; this isn't rocket science people had the ability to tune the monitors to their liking since television had colors
mercora 8y ago
I am not sure if web developers are to blame here. It would probably be way more consistent to define default colors based on a standard instead of some local settings. However, if you change the colors you should make sure to do so for all related ones to avoid this. For Linux you can setup Firefox to use a different theme for content widgets which can fix assumptions developers have about the default colors. I've configured it in the about:config page like this: widget.content.gtk-theme-override;Adwaita:light
kalleboo 8y ago
Browsers on macOS appear to be smart enough to not pass through the system dark theme to web content. I'm seeing white forms in Safari and Firefox (Chrome doesn't seem to support dark theming at all). As much as I'm a proponent of OS-native UX, CSS styling of form controls on the web has been a crapfest ever since IE(?) introduced it way back when. Whenever CSS touches a web form control it should just go completely custom-rendered. If you want to impose a dark theme on web content, you should use an intelligent browser extension that does things like verify text contrast.
- saagarjha 8y ago
  > Browsers on macOS appear to be smart enough to not pass through the system dark theme to web content. There two main reasons here: * Browsers don't support dark themes themselves. * Browsers don't support @media(prefers-color-scheme).
  - kalleboo 8y ago
    Both Safari and Firefox support the macOS Mojave dark theme
jameslk 8y ago
I don't understand this article. The author is using something that manipulates the style of inputs to make them dark with light fonts... but only if the input isn't explicitly styled with either background-color or color. If they're going to be doing such hackery, just style both at the same time. Use JavaScript or something to ensure both are styled. This really isn't the developer's concern.
- giancarlostoro 8y ago
  From the article: > Though, that might be a problem for some users, especially those with a default dark theme on their systems. It's a real issue, every time I set a dark theme, web pages become affected because the defaults get changed. I think the issue should be fixed by the browser vendor really. Eventually I get frustrated enough to just disable it altogether.
  - jameslk 8y ago
    > I think the issue should be fixed by the browser vendor really. Yes, I agree. Or whoever built the dark theme. They should be checking whether inputs have been overrided with styles for both background/color or none.
    - giancarlostoro 8y ago
      Funnily enough I think this is specific to Linux, I've not encountered this issue under Windows, and I don't think macOS has a dark mode.
      - cfcosta 8y ago
        It does, since Mojave.
        deathanatos 8y ago
        It does, but Chrome ignores it. I have no idea about FF, since I have developer FF, and it had dark mode before OS X did. (So, I presume it also "ignores" it, since it was dark when the system wasn't.) But AFAIK, FF dark mode doesn't apply to the controls within the page, only the browser chrome.
alias_neo 8y ago
This is a real issue for me at times. I have a dark theme set in Gnome, because I want dark system windows, but lots of sites don't bother setting their colours properly, so if I open the Web UI for my Ubiquiti Router, or one of my switches, and try to select a drop-down, the background of it is dark, like my system theme, and the text is dark, so I can't see what I'm choosing. Other times, like if I'm entering text into the Name field for ports on my switch (Ubiquiti) the background is white, the text is white and so I can't see what I've entered until I select all. These aren't such a big issue so much as an irritation, but, lets same I'm trying to login to something, at times I can't see the username/email I've entered until I highlight, not such an issue for passwords because we do this blindly anyway most of the time. I'd prefer if Firefox wasn't using my system UI elements at all, but even toggling the hidden config doesn't seem to make any difference there.
- _trampeltier 8y ago
  Would be cool, if websites would ask, if you like bright or dark website.
  - michaelmrose 8y ago
    Do you want a pop up every time you browse a page?
    - jayd16 8y ago
      They can throw it in the popup that tells me about cookies.
      - michaelmrose 8y ago
        How about a global setting that the user can set once which is what we have now.
    - alias_neo 8y ago
      Something like the Docker solution would be fine; https://docs.docker.com/engine/reference/builder/ https://docs.docker.com/engine/reference/builder/ (Note, the right hand bar and thus the toggle isn't visible on mobile or narrow windows) There is a toggle, between day/night mode in the right hand bar on the page, it lets you toggle between the dark and light themes with a click.
aboutruby 8y ago
Apple introduced Dark Mode expecting all major websites to maintain some CSS just for a small percentage of macOS users. I don't think it's going to happen (and it's not happening)
- SquareWheel 8y ago
  This comment intrigued me, so I did some digging. Looks like "prefers-color-scheme" is currently being considered by both Chrome[1] and Firefox[2]. A can-I-use page was just created for it[3]. I'm excited by this one! Think I'll add dark mode support to my simple blog right now. [1] https://bugs.chromium.org/p/chromium/issues/detail?id=889087 https://bugs.chromium.org/p/chromium/issues/detail?id=889087 [2] https://bugzilla.mozilla.org/show_bug.cgi?id=1494034 https://bugzilla.mozilla.org/show_bug.cgi?id=1494034 [3] https://caniuse.com/#feat=prefers-color-scheme https://caniuse.com/#feat=prefers-color-scheme
  - chriswarbo 8y ago
    Wow, what an awful thing to standardise! Are there equivalents for high/low-contrast? Red themes, blue themes, multicolour themes, etc.? Why layer something like this on top of an override system, when devs can choose to just not override those things? As an example, the only CSS colours I use on chriswarbo.net are either semi-transparent, or mid-grey (which work on light and dark themes, although I might revisit that since it would presumably not work on default-grey systems like AmigaOS).
    - SquareWheel 8y ago
      I would say it's because light mode and dark mode are being inherited from system settings. Windows, Android, and iOS all have a concept of dark mode. The browser can pass these settings along (or allow an override).
    - kevin_thibedeau 8y ago
      How else should a site query for the user preference? Everyone is operating in the blind right now.
jmull 8y ago
I'm curious: what is environment for these tests? I want to reproduce to understand what's going on better. (For what it's worth, in 10 sec of testing Safari and Chrome on MacOS dark mode don't seem to have this issue... the font and background colors seem to still default to dark on white.)
- jolmg 8y ago
  It happens to me on Linux. I have GTK and QT configured with dark themes. To overcome this, I have to configure Firefox with a default styling in ~/.mozilla/firefox/*/chrome/userContent.css: input, button { -moz-appearance: none !important; background-color: white; color: black; } textarea { -moz-appearance: none !important; background-color: white; color: black; } select { -moz-appearance: none !important; background-color: white; color: black; } Now that I look at it, I wonder why I didn't join all 3. Whatever.
  - saghm 8y ago
    Thanks for this! I've been dealing with this issue for a while now and somehow didn't think to use CSS to fix it (despite having a number of custom stylesheets for various sites).
    - jolmg 8y ago
      I think it still needs some work. A couple of months ago I opened a webpage with documentation. It had a table of contents in the sidebar, and it was invisible. White on white. It was because these were simply links, and not input field elements. Perhaps the solution is as simple as assigning these rules to html or body instead of these elements, and letting it cascade. There might also be stylesheets online meant to normalize styling across web browsers that one could use.
      - saghm 8y ago
        Yeah, I'm definitely in the process of tweaking it; I'd rather still have the inputs be dark with white text, but messing with things like buttons can make some sites have some glaring differences. I think the main insight I got from this is that I can at least use CSS to tweak this sort of thing; beforehand, I was just opening up Gnome Tweak Tool and changing the theme whenever I needed to do something like comments on a Google doc, and this is a much better solution. Thanks again!
superfamicom 8y ago
For as long as I can recall, the CSS linting tools I have used always warn when defining one and not the other, so it just became a habit for me.
janpot 8y ago
Another one of those "dear web developer" blogs... I think it would make more sense to direct your condescendence to the people who actually define the products and those that decide on the priorities.
rancyber 8y ago
This is the browser's fault for violating the HTML spec. As per the specification, the default font color is complete black and the default background color is complete white. To my knowledge the only browser that does not honor this is Firefox[1], and it is an eighteen year old bug which they refuse to fix. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=70315 https://bugzilla.mozilla.org/show_bug.cgi?id=70315
- luuio 8y ago
  I looked through the bug report and couldn't find the specification you're referencing. Do you have a link to it by any chance?
  - bilkow 8y ago
    Just found it! https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 https://html.spec.whatwg.org/multipage/rendering.html#phrasi... "The initial value for the 'color' property is expected to be black. The initial value for the 'background-color' property is expected to be 'transparent'. The canvas's background is expected to be white."
    - luuio 8y ago
      If I read it correctly, what you just quoted is within the context of the <ruby> element.
      - bilkow 8y ago
        I'm not really sure, but the thematic break element (<hr>) after the last paragraph mentioning ruby makes me believe its not.
- bilkow 8y ago
  It seems that chrome and chromium may also ignore the spec, as https://news.ycombinator.com/item?id=19056637 https://news.ycombinator.com/item?id=19056637 says. Hopefully prefers-color-scheme[0] will take over soon. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
paulie_a 8y ago
I really don't get why front end devs/UI people are so crazy about fonts. It doesn't add to the experience. Personally I set up an override in my browser. it's a mono, a sans and a serif, sizes 8-14 or so. All black. The internet is readable again.
anonytrary 8y ago
Pretty tangential, but with AMOLED screens, I really hope society starts embracing a dark-mode default for interfaces. There is no reason to use light-mode with modern screens. It's taxing on the eyes, probably not good for kids and teens who are using screens 4 hours a day and it doesn't seem to offer benefits over dark-mode in terms of accessibility. It's nice to see more and more websites and operating systems providing dark theme toggles, but I hope one day that light-mode becomes a thing of the past.
- goatlover 8y ago
  I prefer reading black text on white screens, thank you very much. Code in an editor is different because syntax highlighting is better on black.
  - recursive 8y ago
    I prefer syntax highlighting on a white background, thank you very much.
- saagarjha 8y ago
  > There is no reason to use light-mode with modern screens. It's taxing on the eyes, probably not good for kids and teens who are using screens 4 hours a day and it doesn't seem to offer benefits over dark-mode in terms of accessibility. Aside from the fact that many people prefer it?
- wiseleo 8y ago
  Hmm... no. Google Maps alternates between light and dark based on ambient light. That's the optional behavior I want for all apps. I use the Android feature to invert all colors at times.
  - anonytrary 8y ago
    Inverting colors is not the right solution yet as it affects colors for everything, including things that you don't mean to invert. Browsing Twitter? All of the videos and images are now inverted. Anything that is nice enough to be in dark mode now appears super bright. Inversion would be better if it was "smart" and applied to interfaces, not content.
zorronimous 8y ago
Of You want to mix system colors with your own you can calc the contrast too! (How i leave as an exercise for the reader)
efnx 8y ago
> Add yet another /* TODO */ in your codebase and call it a day. JK :-). Then you could track it with http://srcoftruth.com/ http://srcoftruth.com/
deleted 8y ago
[deleted]
supr4 8y ago
I didn't think about this in that case. Thanks for the article. I especially like using this color in my forms: https://hexcol.com/color/f9f9f9 https://hexcol.com/color/f9f9f9 and i'm doing this really often. To be honest, I think those system architects should take care of this bug more than web developers, but it's just one more line in code for us, so it's worth to think about.
navbaker 8y ago
Tangentially related question: is it up to the developer to make forms do stuff like use the number pad on a phone instead of the QWERTY keyboard when the user is asked for a zip code or telephone number? Is this not something that is just auto-baked in to modern web dev frameworks?
aug-riedinger 8y ago
How such uninteresting article can make it to the newsletter?

180 points by luuio 8y ago

As a lazy web developer (it's not my main job) I just hope there are tools who mark those in a checklist. E.g. Google Lighthouse Accessibility Audit. https://developers.google.com/web/tools/chrome-devtools/accessibility/reference https://developers.google.com/web/tools/chrome-devtools/acce...

droobles 8y ago

Definitely agree accessibility is important going into 2019. Different users are going to be viewing a site with more screen readers, dark theme, and other alternative viewing options, very much like we saw with mobilegeddon and the advent of responsive design. I've seen the argument that this hurts the "intended web experience", but this can be solved by keeping up with modern CSS practices and crafting the experience with screen readers in mind. Good stuff, thank you for sharing.

deleted 8y ago
[deleted]
nickbee 8y ago
How does HN stack up in terms of accessibility? Anyone using a screen reader with HN? What do you wish was different?
- Pfhreak 8y ago
  I struggle with how low contrast it is. I skip 'Ask HN' style posts because they are too hard to read.
  - krapp 8y ago
    > I skip 'Ask HN' style posts because they are too hard to read. That's done on purpose to discourage people from posting (or reading) them too often. PG was afraid letting people write text posts would lead to "blogging."
    - joshstrange 8y ago
      Can we get a source on this? Not disputing but I had never heard that before and it's interesting.
      - krapp 8y ago
        https://news.ycombinator.com/item?id=468471 https://news.ycombinator.com/item?id=468471
        alistairSH 8y ago
        Wow, that's a ridiculously user-hostile approach to the problem.
        nickbee 8y ago
        HN was designed for a small audience, and it intentionally did things to discourage growth. The goal was to preserve the community for longer.
        alistairSH 8y ago
        I understand the reason. That doesn't make it any less hostile to users with poor eye-sight.
        krapp 8y ago
        If Hacker News wanted to discourage growth, they should have made the forum private and invite only. There was never any real chance of this forum going mainstream, not because it was too ugly and awkward but because it didn't have any mainstream appeal. Negative reinforcements like making the text purposely difficult to read mostly just punish existing users.
        nickbee 8y ago
        Are you sure HN isn't mainstream? It's up to 19 million items.
  - Noumenon72 8y ago
    I suggest highlighting the text to read in reverse video.
- jolmg 8y ago
  I wish the nesting of replies were visible in elinks. I just see one post after another in a linear fashion. I can't tell which post is a reply to which. That nesting is visible on w3m, though, so that's neat. Still, I can't seem to be able to collapse thread branches because it requires javascript. That's a shame. I wonder if w3m would recognize something like: .collapse:checked + .content-and-replies-container { display: none; }
jameslk 8y ago
I agree we need to give accessibility more priority and we likely will once the discrimination lawsuits start rolling in. But this isn't an accessibility issue. Nowhere in WCAG 2 will you find anything that explicitly outlines both color and background color need to defined in stylesheets. This is for users who prefer dark themes who are overriding styles of websites incorrectly. It is a failing of the user's browser/OS for not explicitly overriding both background and color at the same time or neither. If every developer had to add in a color for the edge case that someone is overriding styles globally, then we'd be bloating stylesheets with extra unnecessary bytes.
- luuio 8y ago
  You got it backward. The custom CSS of the website is overriding the system styles in this case. Let's take font-family for example. Just because you're setting the font for your input[text] tags doesn't mean the browser will also automatically set the font for other elements to match the style. If you want the website to have uniform look, then you'll need to set the font-family for other elements, too.
  - jameslk 8y ago
    This is really just the old debate of whether to use a reset css in disguise. It has nothing to do with accessibility.
- alistairSH 8y ago
  Nowhere in WCAG 2 will you find anything that explicitly outlines both color and background color need to defined in stylesheets. WCAG doesn't specify implementation, but WCAG 1.4.3 does require a minimum contrast ratio[0]. If the site allows black text on a black background, it will fail that requirement. 0 - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...

mikewhy 8y ago

Sure it's not an issue with whatever is doing that (hacky) dark mode CSS? Looking at the google example, they are setting the font color. It just doesn't look good when dark-mode CSS doesn't take the existing colors into account.

lucideer 8y ago
> Looking at the google example, they are setting the font color In most examples, they're setting the background colour without corresponding font colour. In the Google example, they're making the opposite mistake. One should set both or none.
luuio 8y ago
The dark mode is actually coming from the GNOME system colors, not browser plugin. From inspecting the CSS in the developer console, the cases in the screenshot either set the background color without setting the text color, or vice versa.
- deckar01 8y ago
  I have a dark theme enabled on xfce, and this is not a problem for me in chromium. The inputs in native apps are dark, but they are the default light color in web pages on chromium.
  - robrtsql 8y ago
    Really? I might have to switch then.. I use Firefox and GNOME, and enabling one of the dark themes causes most forms on the web to become unusable because of this very issue.
    - lol768 8y ago
      There's nothing special about Chrome's implementation here. You can override the widget GTK theme in Firefox by setting the "widget.content.gtk-theme-override" configuration option to something like "Adwaita" or "Arc".

ccnafr 8y ago

Never though about this before, but, dark themes have only recently become widespread, so I'm not necessarily faulting web devs on this.

chrisseaton 8y ago
It's not about dark themes - I don't think it was ever right to set one colour without the other as I don't believe (may be wrong) that the CSS or HTML standard ever said anything about default colours?
lucideer 8y ago
Dark themes are just exposing these bugs in sites. They're still bugs, dark theme or not—this only occurs when a developer explicitly sets the BG/FG colour without setting a corresponding FG/BG colour—which would always be an oversight/accident. This doesn't occur if a developer does nothing.
sneakernets 8y ago
It's always been there, just called something like "High Contrast" or "Plasma".
chriswarbo 8y ago
> dark themes have only recently become widespread Have they? I've been having this problem for around 15 years :( Nice to see it brought up somewhere so prominent though!
jolmg 8y ago
I'm pretty sure dark (or at least custom) themes came before the web.
jeroenhd 8y ago
I've seen people that had their default background colours to dark green since the Windows 95 era. This is not a new trend. It's just not as common anymore as it used to be back when you as a user could specify easily how you want your system to look.

no_protocol 8y ago

What has happened to the concept of "User Defined CSS"? Is it totally gone? Did Chrome kill it? Browsers should be making this a prominent and first-class feature. Users should be able to quickly and easily set their default styles for various elements and choose at what precedence level they apply.

deleted 8y ago
[deleted]
krapp 8y ago
Browsers have supported user defined CSS defaults since forever, and plugins like Stylish have been around for a while. The practice of users customizing their CSS isn't prevalent because modern sites are incredibly complex and the average user doesn't want (or know how) to spend the time necessary to reverse engineer a site's layout and rewrite its CSS - there is no "quick and easy" way to do that for any but the simplest sites. Just consider how often professional developers complain about CSS, and they get paid to put up with it.
- no_protocol 8y ago
  > Browsers have supported user defined CSS defaults since forever, and plugins like Stylish have been around for a while. It looks like Chrome removed these several years ago: https://news.ycombinator.com/item?id=7329855 https://news.ycombinator.com/item?id=7329855 Plugins are a thing but why should you need a plugin for something that is a core part of the CSS specification? https://www.w3.org/TR/CSS2/cascade.html#cascade https://www.w3.org/TR/CSS2/cascade.html#cascade > the average user This is (mostly) about accessibility. Even if the average user does not need it, some do. And those that do would be quite glad to have it easily. > there is no "quick and easy" way to do that for any but the simplest sites Just because user stylesheets have been ignored for many years doesn't mean they shouldn't be acknowledged. Design your site with them in mind.
paublyrne 8y ago
Not disagreeing, but why is this a good thing? Apart from that it's fun, are users really expected to be able to improve their browsing experiences with custom CSS?

TheCoreh 8y ago

Due to how widespread assumptions about "system" form field colors are throught the web, the proper thing for browsers to do is probably to _not_ apply a dark theme to form fields, at least by default. Maybe instead allow a CSS opt-in to support dark themes. This seems to be what Apple is doing with Safari, and I feel like it's what provides the best user experience out of the box. (Even for pages that don't make this styling mistake, a single dark input field on a full light page is not a satisfactory dark mode experience)

jolmg 8y ago
I agree that that is the simplest solution, and I've even configured Firefox as such[1], but I kind of wish I could have ONE place to control styling of everything. That is, I kind of wish web developers couldn't control colors and such, so people could have consistent styling in their whole system. That's a pipe dream though. Websites tend to be hosted by people that want a brand to protect, and as adoption of computers increase people on average don't want to invest time in learning how to use and configure their systems. Maybe I should consider seriously switching to elinks or w3m for my style-consistent browsing. [1] https://news.ycombinator.com/item?id=19056752 https://news.ycombinator.com/item?id=19056752

stevebmark 8y ago

...what? Set the default color in your dumbass hacker theme too. This has nothing to do with accessibility, which is obvious because the author thinks a gray background with lower contrast for text reading is better.

untog 8y ago
By "dumbass hacker theme" you mean "the dark theme that ships with MacOS", right?
- deleted 8y ago
  [deleted]
- stevebmark 8y ago
  Do you think mojave dark mode changes the colors of inputs on web browsers??
function_seven 8y ago
Agree with the low contrast complaint, but the OP article is right. The web developers have assumed what the text field colors will be. So when they override one color (either FG or BG), they need to set the other one as well, and not assume that it will match what's on their own screen.
gmueckl 8y ago
This is not the problem. The parts of a HTML form control that are not defined through CSS are taken from the system default theme by the browser. Usually this is white on black, but this is NOT guaranteed (e.g. high contrast schemes for vision impaired users). Web designers tend to use these default schemes when writing the CSS for a web site. So they write only the attributes they need to make it work on their setup. So if the textbox background or text color is already what they want, they don't define it. This the browser takes the non-matching system color instead- precisely because it was set in a "dumbass" scheme (I resent this term).

exploderwhale 8y ago

Or you could entirely avoid this issue by using multi-font themes with different weights, decorations, and ligatures.

iainmerrick 8y ago
What does that have to do with color and backgroundColor?
- exploderwhale 8y ago
  How does it not? The article even states: "Don't set the colors at all, let the browser use the system default color". If a developer wants to express some intent maybe utilizing something else other than color would resolve some of these issues. If I can develop without color a user can read without color https://github.com/maio/eink-emacs https://github.com/maio/eink-emacs
  - iainmerrick 8y ago
    The article even states: "Don't set the colors at all, let the browser use the system default color". That’s just one of three options. Setting “both the background color AND font color” is another. Also, the third option might give you a hint that the author’s tongue is in their cheek.

mrspeaker 8y ago

I hit this same same issue too. I tried to eliminate white backgrounds, because I find it tiring on my eyes and a bit painful. These sites made it too annoying to change the defaults, so I ended up giving up (and just always having my screen brightness near minimum). But before I gave up I started collecting sites that either set background-color and not font color, or set color but not background-color: https://gist.github.com/mrspeaker/1846b6b0e12c76f7eeb2 https://gist.github.com/mrspeaker/1846b6b0e12c76f7eeb2. There's a useless list for you!

deleted 8y ago
[deleted]
LoSboccacc 8y ago
there's a contrast/brightness button on most hardware, why have low contrast websites by design? just tune your monitor! it will then work for websites, games and everything else. it will also allow you to handle contrast reducing it at night and tuning up when the monitor is struck with some glare, without having to change the css! imagine the convenience! software developer: using hammers for everything since 1842
- mrspeaker 8y ago
  I don't want low contrast, I just wanted to swap my browser default foreground/background colors (low brightness is just my hacky workaround). The "bug" on these sites is that if devs set a default background-color they should also set a default font color: either set neither properties, or set both. Setting one means the default of the browser will be used. Most of the time it's background=white, foreground=black, so no one notices, but it means the option is gone for people who do want to modify them.
  - LoSboccacc 8y ago
    > I don't want low contrast > I tried to eliminate white backgrounds, because I find it tiring on my eyes and a bit painful. yes, yes that's exactly what you want. besides you can tune both gamma and tone both in software and hardware on most platforms; this isn't rocket science people had the ability to tune the monitors to their liking since television had colors

mercora 8y ago

I am not sure if web developers are to blame here. It would probably be way more consistent to define default colors based on a standard instead of some local settings. However, if you change the colors you should make sure to do so for all related ones to avoid this. For Linux you can setup Firefox to use a different theme for content widgets which can fix assumptions developers have about the default colors. I've configured it in the about:config page like this: widget.content.gtk-theme-override;Adwaita:light

kalleboo 8y ago

Browsers on macOS appear to be smart enough to not pass through the system dark theme to web content. I'm seeing white forms in Safari and Firefox (Chrome doesn't seem to support dark theming at all). As much as I'm a proponent of OS-native UX, CSS styling of form controls on the web has been a crapfest ever since IE(?) introduced it way back when. Whenever CSS touches a web form control it should just go completely custom-rendered. If you want to impose a dark theme on web content, you should use an intelligent browser extension that does things like verify text contrast.

saagarjha 8y ago
> Browsers on macOS appear to be smart enough to not pass through the system dark theme to web content. There two main reasons here: * Browsers don't support dark themes themselves. * Browsers don't support @media(prefers-color-scheme).
- kalleboo 8y ago
  Both Safari and Firefox support the macOS Mojave dark theme

jameslk 8y ago

I don't understand this article. The author is using something that manipulates the style of inputs to make them dark with light fonts... but only if the input isn't explicitly styled with either background-color or color. If they're going to be doing such hackery, just style both at the same time. Use JavaScript or something to ensure both are styled. This really isn't the developer's concern.

giancarlostoro 8y ago
From the article: > Though, that might be a problem for some users, especially those with a default dark theme on their systems. It's a real issue, every time I set a dark theme, web pages become affected because the defaults get changed. I think the issue should be fixed by the browser vendor really. Eventually I get frustrated enough to just disable it altogether.
- jameslk 8y ago
  > I think the issue should be fixed by the browser vendor really. Yes, I agree. Or whoever built the dark theme. They should be checking whether inputs have been overrided with styles for both background/color or none.
  - giancarlostoro 8y ago
    Funnily enough I think this is specific to Linux, I've not encountered this issue under Windows, and I don't think macOS has a dark mode.
    - cfcosta 8y ago
      It does, since Mojave.
      - deathanatos 8y ago
        It does, but Chrome ignores it. I have no idea about FF, since I have developer FF, and it had dark mode before OS X did. (So, I presume it also "ignores" it, since it was dark when the system wasn't.) But AFAIK, FF dark mode doesn't apply to the controls within the page, only the browser chrome.

alias_neo 8y ago

This is a real issue for me at times. I have a dark theme set in Gnome, because I want dark system windows, but lots of sites don't bother setting their colours properly, so if I open the Web UI for my Ubiquiti Router, or one of my switches, and try to select a drop-down, the background of it is dark, like my system theme, and the text is dark, so I can't see what I'm choosing. Other times, like if I'm entering text into the Name field for ports on my switch (Ubiquiti) the background is white, the text is white and so I can't see what I've entered until I select all. These aren't such a big issue so much as an irritation, but, lets same I'm trying to login to something, at times I can't see the username/email I've entered until I highlight, not such an issue for passwords because we do this blindly anyway most of the time. I'd prefer if Firefox wasn't using my system UI elements at all, but even toggling the hidden config doesn't seem to make any difference there.

_trampeltier 8y ago
Would be cool, if websites would ask, if you like bright or dark website.
- michaelmrose 8y ago
  Do you want a pop up every time you browse a page?
  - jayd16 8y ago
    They can throw it in the popup that tells me about cookies.
    - michaelmrose 8y ago
      How about a global setting that the user can set once which is what we have now.
  - alias_neo 8y ago
    Something like the Docker solution would be fine; https://docs.docker.com/engine/reference/builder/ https://docs.docker.com/engine/reference/builder/ (Note, the right hand bar and thus the toggle isn't visible on mobile or narrow windows) There is a toggle, between day/night mode in the right hand bar on the page, it lets you toggle between the dark and light themes with a click.

aboutruby 8y ago

Apple introduced Dark Mode expecting all major websites to maintain some CSS just for a small percentage of macOS users. I don't think it's going to happen (and it's not happening)

SquareWheel 8y ago
This comment intrigued me, so I did some digging. Looks like "prefers-color-scheme" is currently being considered by both Chrome[1] and Firefox[2]. A can-I-use page was just created for it[3]. I'm excited by this one! Think I'll add dark mode support to my simple blog right now. [1] https://bugs.chromium.org/p/chromium/issues/detail?id=889087 https://bugs.chromium.org/p/chromium/issues/detail?id=889087 [2] https://bugzilla.mozilla.org/show_bug.cgi?id=1494034 https://bugzilla.mozilla.org/show_bug.cgi?id=1494034 [3] https://caniuse.com/#feat=prefers-color-scheme https://caniuse.com/#feat=prefers-color-scheme
- chriswarbo 8y ago
  Wow, what an awful thing to standardise! Are there equivalents for high/low-contrast? Red themes, blue themes, multicolour themes, etc.? Why layer something like this on top of an override system, when devs can choose to just not override those things? As an example, the only CSS colours I use on chriswarbo.net are either semi-transparent, or mid-grey (which work on light and dark themes, although I might revisit that since it would presumably not work on default-grey systems like AmigaOS).
  - SquareWheel 8y ago
    I would say it's because light mode and dark mode are being inherited from system settings. Windows, Android, and iOS all have a concept of dark mode. The browser can pass these settings along (or allow an override).
  - kevin_thibedeau 8y ago
    How else should a site query for the user preference? Everyone is operating in the blind right now.

jmull 8y ago

I'm curious: what is environment for these tests? I want to reproduce to understand what's going on better. (For what it's worth, in 10 sec of testing Safari and Chrome on MacOS dark mode don't seem to have this issue... the font and background colors seem to still default to dark on white.)

jolmg 8y ago
It happens to me on Linux. I have GTK and QT configured with dark themes. To overcome this, I have to configure Firefox with a default styling in ~/.mozilla/firefox/*/chrome/userContent.css: input, button { -moz-appearance: none !important; background-color: white; color: black; } textarea { -moz-appearance: none !important; background-color: white; color: black; } select { -moz-appearance: none !important; background-color: white; color: black; } Now that I look at it, I wonder why I didn't join all 3. Whatever.
- saghm 8y ago
  Thanks for this! I've been dealing with this issue for a while now and somehow didn't think to use CSS to fix it (despite having a number of custom stylesheets for various sites).
  - jolmg 8y ago
    I think it still needs some work. A couple of months ago I opened a webpage with documentation. It had a table of contents in the sidebar, and it was invisible. White on white. It was because these were simply links, and not input field elements. Perhaps the solution is as simple as assigning these rules to html or body instead of these elements, and letting it cascade. There might also be stylesheets online meant to normalize styling across web browsers that one could use.
    - saghm 8y ago
      Yeah, I'm definitely in the process of tweaking it; I'd rather still have the inputs be dark with white text, but messing with things like buttons can make some sites have some glaring differences. I think the main insight I got from this is that I can at least use CSS to tweak this sort of thing; beforehand, I was just opening up Gnome Tweak Tool and changing the theme whenever I needed to do something like comments on a Google doc, and this is a much better solution. Thanks again!

superfamicom 8y ago

For as long as I can recall, the CSS linting tools I have used always warn when defining one and not the other, so it just became a habit for me.

janpot 8y ago

Another one of those "dear web developer" blogs... I think it would make more sense to direct your condescendence to the people who actually define the products and those that decide on the priorities.

rancyber 8y ago

This is the browser's fault for violating the HTML spec. As per the specification, the default font color is complete black and the default background color is complete white. To my knowledge the only browser that does not honor this is Firefox[1], and it is an eighteen year old bug which they refuse to fix. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=70315 https://bugzilla.mozilla.org/show_bug.cgi?id=70315

luuio 8y ago
I looked through the bug report and couldn't find the specification you're referencing. Do you have a link to it by any chance?
- bilkow 8y ago
  Just found it! https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 https://html.spec.whatwg.org/multipage/rendering.html#phrasi... "The initial value for the 'color' property is expected to be black. The initial value for the 'background-color' property is expected to be 'transparent'. The canvas's background is expected to be white."
  - luuio 8y ago
    If I read it correctly, what you just quoted is within the context of the <ruby> element.
    - bilkow 8y ago
      I'm not really sure, but the thematic break element (<hr>) after the last paragraph mentioning ruby makes me believe its not.
bilkow 8y ago
It seems that chrome and chromium may also ignore the spec, as https://news.ycombinator.com/item?id=19056637 https://news.ycombinator.com/item?id=19056637 says. Hopefully prefers-color-scheme[0] will take over soon. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

paulie_a 8y ago

I really don't get why front end devs/UI people are so crazy about fonts. It doesn't add to the experience. Personally I set up an override in my browser. it's a mono, a sans and a serif, sizes 8-14 or so. All black. The internet is readable again.

anonytrary 8y ago

Pretty tangential, but with AMOLED screens, I really hope society starts embracing a dark-mode default for interfaces. There is no reason to use light-mode with modern screens. It's taxing on the eyes, probably not good for kids and teens who are using screens 4 hours a day and it doesn't seem to offer benefits over dark-mode in terms of accessibility. It's nice to see more and more websites and operating systems providing dark theme toggles, but I hope one day that light-mode becomes a thing of the past.

goatlover 8y ago
I prefer reading black text on white screens, thank you very much. Code in an editor is different because syntax highlighting is better on black.
- recursive 8y ago
  I prefer syntax highlighting on a white background, thank you very much.
saagarjha 8y ago
> There is no reason to use light-mode with modern screens. It's taxing on the eyes, probably not good for kids and teens who are using screens 4 hours a day and it doesn't seem to offer benefits over dark-mode in terms of accessibility. Aside from the fact that many people prefer it?
wiseleo 8y ago
Hmm... no. Google Maps alternates between light and dark based on ambient light. That's the optional behavior I want for all apps. I use the Android feature to invert all colors at times.
- anonytrary 8y ago
  Inverting colors is not the right solution yet as it affects colors for everything, including things that you don't mean to invert. Browsing Twitter? All of the videos and images are now inverted. Anything that is nice enough to be in dark mode now appears super bright. Inversion would be better if it was "smart" and applied to interfaces, not content.

zorronimous 8y ago

Of You want to mix system colors with your own you can calc the contrast too! (How i leave as an exercise for the reader)

efnx 8y ago

> Add yet another /* TODO */ in your codebase and call it a day. JK :-). Then you could track it with http://srcoftruth.com/ http://srcoftruth.com/

deleted 8y ago

[deleted]

supr4 8y ago

I didn't think about this in that case. Thanks for the article. I especially like using this color in my forms: https://hexcol.com/color/f9f9f9 https://hexcol.com/color/f9f9f9 and i'm doing this really often. To be honest, I think those system architects should take care of this bug more than web developers, but it's just one more line in code for us, so it's worth to think about.

navbaker 8y ago

Tangentially related question: is it up to the developer to make forms do stuff like use the number pad on a phone instead of the QWERTY keyboard when the user is asked for a zip code or telephone number? Is this not something that is just auto-baked in to modern web dev frameworks?

aug-riedinger 8y ago

How such uninteresting article can make it to the newsletter?