Lea Verou

For the record, I have such a screen: a Samsung SyncMaster B2030, about 6 years old. Several of Now UI's widgets (form placeholders, disabled input labels, tab labels on white background) are nearly unreadable on this screen.

I actually checked (using [1]) the contrast ratio of some of these widgets, and they work out to very low numbers:

- Form placeholders - #ddd on #fff - contrast ratio 1.4:1

- Labels of disabled checkboxes - #9a9a9a on #fff - ratio 2.8:1

- Tab labels - #b8b8b8 on #fff - 2.0:1

This is far lower than the W3C's recommended minimum ratio of 4.5:1 [2] for text smaller than 24px. And since the font weight is often lower than normal, the perceived contrast ratio is even lower than the figures above suggest. I think the contrast needs major improvements for decent UX.

PS: http://contrastrebellion.com/

[1]: http://leaverou.github.io/contrast-ratio/#%23dddddd-on-white

[2]: https://www.w3.org/TR/WCAG/#visual-audio-contrast

Right, but to be pedantic, the OP's original statement was ambiguous.

"more thant[sic] #333 on white"... You could interpret this many ways.

A) You could interpret "#333 on white" to refer to the contrast ratio of "#333/#fff", which according to this calculator [1] is 12.6. In this case "more" is referring to a higher contrast ratio. "#000 on #fff" would fit - even though "#000" is less than "#333" - because the contrast ratio of the two colors is 21.

B) You could interpret the statement as "(more than #333) on #fff", e.g. increasing the numerical value of "#333". Something like "#444 on #fff" - which actually has a lower contrast ratio of 9.7 - fits, because "#444" is more than "#333".

This is dumb, I'm just pointing out that it can be important to be precise with your language.

1: http://leaverou.github.io/contrast-ratio/#%23333-on-%23fff

It's a little unsporting to whack Google over the head with it's own (very recently) released design guidelines[1], but hey, Google is a corporation and so basically has the feelings of a psychopath, and compassion and empathy is wasted on it, right? :)

Of course the OP is correct when he says those contrast ratios (nice tool[2] for calculating that, BTW) are way too low.

[1] http://www.google.com/design/spec/material-design/introduction.html

[2] http://leaverou.github.io/contrast-ratio/#%23389088-on-%23007166

Improve the contrast! The site is not very legible. At first I thought this was some kind of bad joke.

The site title overlaps with "Signup/Signin" when the browser window is too small.

The webfont in use looks horrible on Windows.

Edit: I recommend reading up on WCAG 2.0 (http://www.w3.org/TR/WCAG20/), this is a helpful tool: http://leaverou.github.io/contrast-ratio/