Make the text black

[decadent]

Just do it.
I'm your textbook poor eyesight user. Don't make my eyes suffer.

[therebelrobot]

@decadent, most design changes are most likely not going to be merged because we decided to focus design updates into the new converged site. If any WG members think otherwise, lemme know.

@nodejs/website this raises a good question though: what concessions should be made for accessibility in the new site? IMO, there is a point where style takes precedent over readability, take for example the gray text vs the black text here on Github. Maybe a good option would be to lighten the background? Or provide an easy to find accessible version of the site somewhere?

[therebelrobot]

Also, the gray text gives emphasis on the black links, which if all text was black, the focus points would be lost save for the underlining. From a design aspect, that would be a bad move.

[robertkowalski]

i don't really have strong opinions on dark/light but maybe it would be awesome to provide a website with a dynamic dark/light option (button) or even better with a lot more helpers for accessibility (aria and friends for screenreaders etc)

[robertkowalski]

(as an answer to @therebelrobot's first question)

[decadent]

Let me add an explanation since it seems to be needed.
It's been quoted a billion times by usability-conscious designers: black text on white background gives the best readability—that is, even users with good eyesight are more comfortable with it and can read it faster. By lowering text-to-background contrast, you're putting strain on your readers' eyes, the older the user and worse the vision, the more strain, with a range of degrees in between.
Readability is a design feature. If your design fails to present information to users, it's a bad design.

Besides being a readability parameter, contrast is also a design tool. You use it to emphasize or deemphasize things. Body text is not an obscure detail of your site so don't deemphasize it.
For good design, you take good body style and add your features to it, not the other way around.

You don't need a separate 'accessible' version, at least for the black text, because vast majority of users, including me (for example), would benefit from high text-to-background contrast in the 'normal' design version. I can't say for the elderly (yet) but users with moderate eyesight loss don't have problems with grey menus or footers or a couple of paragraphs of grey text, they have problems with screenfuls of body text set in low contrast colors.
(I assume (not sure though) that users who need a real 'accessible' site would as well turn styles off altogether—because so many sites out there don't have any 'accessible' options at all, and I honestly don't believe those users just stay locked out and wait for designers' favor. But I may be mistaken on this.)

Github doesn't use #666 body text. I didn't even notice it's not black until I looked at the styles (granted, my display is not calibrated, as are most users' displays—that's a long-standing paradox between designers' and users' worldviews).
#666 text is not a slight color change, it's just nonsense that's been baffling me for a long time on trying-to-look-hipster sites out there. If your design calls for #666 body text, you're doing something wrong.

Do I need to quote sources for what seemed like common knowledge by now?
Or just take a look at https://ia.net/ or http://www.smashingmagazine.com/ or http://alistapart.com/ or http://www.nngroup.com/.

Also, the gray text gives emphasis on the black links, which if all text was black, the focus points would be lost save for the underlining

That problem has been solved at some time around the days of HTML 1.0. Just make links other color than black. Preferably blue for easy recognition but it's not mandatory.

Also I wouldn't think that you want to put a special emphasis on links in a page full of text. If links are your main feature then just make a list of links. Normally you want to make links easily discernible but not make them jump out from the page, which is what unusually high link-to-text contrast does.

It's especially a shame that a site for web design folks sets such an example.
But then again, if you're a techie, please don't think that playing around with CSS would somehow bring you to good design. I've made that mistake myself before. You need to build it from the text to overall style, or at least keep both in mind.

[bnb]

@decadent We understand design principles just as much as you do - you don't need to take such a negative postion. Insulting the WG members and developers isn't a good way to make a change happen.

As @therebelrobot said in his first comment, design changes are most likely not going to be accepted into this repo anymore, as it is soon to be deprecated.

[bnb]

@robertkowalski Is the new site going to be using jQuery or not? I can probably write up a script that can change night/day settings either way - I'm a novice programmer, so I'd like to give it a shot and hopefully learn something.

[Fishrock123]

I wouldn't be opposed to it if it helps people, does someone want to get a screenshot of what it might look like? Otherwise I'll try to at some point.

[Fishrock123]

I would prefer to not use jQuery, does nodejs.org use it?

All we need to to attach a click and store a boolean, and have it modify the classListof the body (easiest to assign an id to it and to get via document.getElementById('body')).

[bnb]

@Fishrock123 Just looked at the main page of nodejs.org, and there's no jQuery includes. They do, however, use Typekit - we could probably leverage that to our advantage.

[fhemberger]

We don't really need a light/dark theme switch. People with visual impairment usually have their own custom user stylesheet adapted to their needs or use the operating system's high contrast/text sizing or screen magnifier functions. We just have to make sure, that the overall website provides enough contrast.

You can use tools like Colour Contrast Checker or WAVE for general a11y checks.

Here is the report for the current io.js website: http://wave.webaim.org/report#/https%3A%2F%2Fiojs.org%2Fen%2Findex.html (a text color of #565656 would pass even strict WCAG 2.0 AAA contrast requirements)

[bnb]

@fhemberger Thanks for the test link.

With the light/dark switcher, I don't think it was to help visually impaired; rather, it was just a nice, simple to implement feature for the site.

[Fishrock123]

I would rather not have to worry about 2 styles.

I think we should at least darken the regular text. The op reported it, and I'm not an expert on it.

[therebelrobot]

As far as the new site design is concerned, was the consensus that it was gonna be designed by a design agency, managed through the marketing group? If so, this discussion for that would be a moot point, as we wouldn't even be handling the color choices in the end, just build.

As for the io.js site, I still reiterate my original position: design changes should be saved for and merged into the new one, and more or less just maintain this repo as-is so far as design is concerned.

[therebelrobot]

But yes, I agree with @Fishrock123 that 2 stylesheets would be too encumbering, and with @fhemberger that if accessibility is needed, we should build it so it can be accessed by normal accessibility tools, and let them do their jobs, rather than rebuilding it all in ourselves.

[fhemberger]

I optimized the legibility in d663160, I think we can close this for now. General a11y related discussions are probably better placed in https://github.com/nodejs/new.nodejs.org.

[bnb]

+1. Closing.