- For example: Apple’s typography guidelines suggest that developers aim for a 7:1 contrast ratio. But what ratio, you might ask, is the text used to state the guideline? It’s 5.5:1.
Google’s guidelines suggest an identical preferred ratio of 7:1. But then they recommend 54 percent opacity for display and caption type, a style guideline that translates to a ratio of 4.6:1.
When this all started I had to start highlighting the paragraph I was reading to get through it, now some sites have blocked the ability to highlight and others don't use standard colors for it.
This isn't a fool-proof fix, but I would encourage you to try using Stylish extension (Chrome version, Firefox version, Opera version). You can find a global-scope styles that change every website you visit (here is one of my favourite ones, it forces a high white-on-black contrast) or click on the Stylish icon on a particular website and follow a link Find more styles to this site that will direct you to the Userstyles repository.
It's a bit rough around the edges and can get annoying, but it transforms websites that look like shit into something you can actually read. If you would happen to need some help, feel free to ask!
Oh god don't get me started. Another terrible thing about these thin fonts is that they are often woefully incomplete with regards to character sets. If your type looks beautiful but the letter á is rendered in Arial then this ruins the effect. Unfortunately this means that unless the designers are able to exercise total control over which characters appear on the page, this is going to happen at some point.
From what I've read designers for web sites tend to have very high DPI monitors with high quality colour reproduction - so on their screens it is legible - and it seems they are so bad at their craft that they assume that is enough.
What about the rest of the computer users who don't have the latest technology? What about those people with vision problems?
Another point that is often brought up is studies that say high contrast (think black on white) is too harsh and causes eye strain. There doesn't seem to be a consensus on that though. If it is true the answer is to adjust the contrast slightly to prevent the strain not to reduce the contrast to the absolute minimum with slightly lighter gray on slightly darker gray background.
Luckily Firefox has reader view.
- So why are designers resorting to lighter and lighter text? When I asked designers why gray type has become so popular, many pointed me to the Typography Handbook, a reference guide to web design. The handbook warns against too much contrast. It recommends developers build using a very dark gray (#333) instead of pitch black (#000).
The theory espoused by designers is that black text on a white background can strain the eyes. Opting for a softer shade of black text, instead, makes a page more comfortable to read. Adam Schwartz, author of “The Magic of CSS,” reiterates the argument:
The sharp contrast of black on white can create visual artifacts or increase eye strain. (The opposite is also true. This is fairly subjective, but still worth noting.)
Let me call out the shibboleth here: Schwartz himself admits the conclusion is subjective.
Text on 'clean' is #222. It always has been. It is only slightly different than #000, but I do find it easier to read. Text on the printed page is rarely as black as #000.
Of course, I know you use dark. But you should be grateful that there it is #ccc and not #fff.
I agree with you - and kleinbl00's point that it not set in stone anyway.
I can't see much difference between #000/333 on #fff. #333 on #ccc is a ratio of 7.9 - which is still readable to me but anything less would start to be difficult.
It's when they go even further that things start to get unreadable (again for me) and I've seen plenty of sites where the contrast is far below that.
Both Apple and Google's documents are guidelines though, not rules. The quote from Apple's guidelines even says: "Strive for a minimum contrast ratio of 4.5:1" - that's way below 7.9 and the smaller text is subjectively starting to strain my eyes. That's just a short time scanning the page - the problem is compound when you have to read for longer - particularly with small text.
Designer following Apple's guidelines are basically told to curb their creative genius and forced to struggle to get UP to that level of contrast - not use it as an absolute minimum.
There's a sheep mentality about all this too. Every stupid Silicon Valley startup needs to have the same faded pale-coloured website. It has to look fun too, fluffy, lightweight, like they're not doing boring old business. No-one dare step out of line. None of it is designed for actual grown-ups with their stupid sensible ideas and blurry eyes. Sometimes I hate the world of tech.