Lea Verou

I love contrast rebellion (aside: tool to check your contrast game is http://leaverou.github.io/contrast-ratio/), but I believe the author of the website intended it to be so as to draw attention to make your code stand out. However, I agree the contrast isn't high enough

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/

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

Looks like it's Awesomplete: https://leaverou.github.io/awesomplete/

If you don't need to install stuff from npm and prefer to hack your own, here's a nice list of CSS patterns to get you started: https://leaverou.github.io/css3patterns/

If you like this, you may like Lea Verou's CSS3 Patterns Gallery library. https://leaverou.github.io/css3patterns/ (make sure you allow the cross site request of http://bytesizematters.com/bytesize.js which is hosted on another of her domains if nothing is displaying)

When you're picking colours you can use an online tool to test contrast against accessibility standards. Your inline code parts still meet the double A level of the accessibility standard for contrast. http://leaverou.github.io/contrast-ratio/#rgb%2882%2C89%2C93%29-on-rgb…

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

TL;DR Telkom does HTML injection on all unencrypted traffic of its customers, whereas the author of the linked blog uses #444444 text color on #000000 background (which gives contrast ratio 2.2 on http://leaverou.github.io/contrast-ratio/). I call it almost a draw ;) Sorry I had to be that guy. Please improve contrast on your blog.

For playing around or to accompany tools/systems without an assets pipeline, Lea Verou's prefixfree[0] works very well, it does not require a compilation/munging phase and only generates the necessary prefixes for the browser it's run into. Really quite convenient. [0] http://leaverou.github.io/prefixfree/

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

It's perfectly fine to not use only black on white. This is not a light grey in the slightest. All green: https://leaverou.github.io/contrast-ratio/#rgba%280%2C0%2C0%2C0.8-on-w…

Which part of the post used that color? The body text is #424242. http://leaverou.github.io/contrast-ratio/#%23424242-on-white

You could use Prefixfree.js to provide support for older "modern" browsers: http://leaverou.github.io/prefixfree/

I'm usually a massive fan of what you guys do, but man, I've got to say that you need to use this tool on the pricing page, in particular: http://leaverou.github.io/contrast-ratio/