Colouring-in Team

In my last post I talked about what it means to say that text is legible. If you haven't read it, you might want to take a look before you dive into this one, as some of the maths follows on.

It's pretty obvious that contrast can and does have a significant impact on legibility, and therefore also readability, and not enough of it can make for an unpleasant user experience. To counter this problem there are strict guidelines set out by W3C. If you work in web-based media you'll be familiar with the Web Content Accessibility Guidelines (WCAG), which define minimum contrast values for text in both AA and AAA accessibility standards. WCAG 2.0 level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. And the guidelines also state that once contrast reaches 7:1, legibility is unaffected beyond this point. And if that all seems a bit impenetrable, there are many online contrast checking tools available that allow you to test your proposed text foreground and background colours to see if they meet the guidelines.

What is contrast?

In simple terms, contrast in vision is the ability of the eye to distinguish between differing colour and brightness. The values listed above are the ratio of the 'luminance' between the foreground and background colours (though not necessarily in that order). You can think of luminance in this context as a measure of the intensity of light as perceived by the human eye. Some wavelengths (i.e. colours) of light have more luminance than others, peaking in the green-yellow part of the spectrum.

The process by which contrast ratios are calculated probably isn't for the mathematically faint-hearted, but I'll set it out anyway. Feel free to skip to the next heading if it all looks like Greek to you. It probably is.

The first step is to work out the relative luminance of the foreground and background colours in question. To do that we use these formulas:

if R_sRGB <= 0.03928 then R = R_sRGB / 12.92 else R = ((R_sRGB + 0.055) / 1.055)^2.4

if G_sRGB <= 0.03928 then G = G_sRGB / 12.92 else G = ((G_sRGB + 0.055) / 1.055)^2.4

if B_sRGB <= 0.03928 then B = B_sRGB / 12.92 else B = ((B_sRGB + 0.055) / 1.055)^2.4

...where...

R_sRGB = R_8bit / 255

G_sRGB = G_8bit / 255

B_sRGB = B_8bit / 255

You can think of the SRGB values as proportions of red, green and blue. Thus, if your text colour was specified as #800000, that's a red value of 80 in hex, or 128 as a decimal, so the SRGB value for red would be 128/255 = 0.5.

We can now calculate luminance by combining the R, G and B values above in the following way:

L = (0.2126 x R) + (0.7152 x G) + (0.0722 x B)

Note that to acquire a luminance value we are essentially adding up the red, green and blue values, adjusted by constants in accordance with how much of an impact those wavelengths of light have on luminance. Thus the green value has a far bigger impact on the final luminance value than the blue value.

Finally, having calculated L for both the foreground (text) colour and the background colour, we can work out the contrast ratio between the two quite simply, as follows:

Contrast ratio = (L₁ + 0.05) / (L₂ + 0.05)

Where L₁ is the most luminous and L₂ the least luminous of the two colours.

OK, so that's the scary maths-bit over...

So why am I interested in this? Well, at present if we designers want our websites to be AA or AAA compliant, they must meet with the contrast guidelines described above. But in real life, of course things are rarely as simple as a binary rule: "THIS text is legible, THAT text isn't..."

Text on the web that is illegible or at least hard-to-read due to the choice of colours is nothing new. Katie Sherwin, writing on the Nielsen-Norman Group blog, has some interesting things to say about the use of low-contrast text on the web.

What I'm suggesting here is that it is possible to have hard-to-read text that meets the WCAG rules, and easy-to-read text that doesn't. For example...

As far as I can tell, this text passes the AA level guidelines, with a contrast ratio of about 4.5:1.... The question is, is it easy to read? I suspect that most people would find this paragraph harder to read than the next one. I'm deliberately droning on and on here, just to make sure there is a nice long block of text to really ram home the point I'm trying to make. Fortunately for you, the next box just says...

bicycle.

So, in case it wasn't already clear, the top box should pass AA guidelines, but the text in the bottom box fails both AA and AAA.

Now, to be clear, this isn't due to lack of care on the part of the clever people who make up the WCAG. In fact the guidelines go to some lengths to explain the choice of contrast-ratios used as cut-off points, and they are clearly the result of considerable thought and research. My point is really that, as soon as you introduce any sort of binary rule into design, it immediately creates space for applications of that rule that seem outside of what was intended, such as the text above.

Now, designers clearly can't user-test each piece of text we want to use to see if it the contrast works well enough, and a hard-and-fast rule is a pretty safe alternative. But what if, instead, we try to look at the effect contrast has on legibility, and apply it on a case-by-case basis to mathematically assess how legible and how readable a piece of text will be, across devices. Can we construct a formula that would warn you that the red box above might be hard to read, but reassure you that the text below it is likely to be just fine?

Modelling contrast

We know that contrast effects legibility. Therefore it is logical to suggest that, in most cases, a reduction in contrast can be countered with an increase in text size. Consider the text you are reading right now:

If I suddenly make it slightly lighter, it becomes harder to read, right?

But if also make it bigger, it's not so much of a problem.

Now imagine a graph where we plot the size a character needs to be to maintain it's level of legibility against its contrast with its background. Thinking about how this model might look, we can see we already have two known points on the graph.

Firstly, according to WCAG, once contrast reaches 1:7 there is no further improvement in legibility. We express 1:7 as 1 divided by 7, or 0.143, so this gives us the start of our graph. To the left of this point (i.e. where contrast is better) it should level out.

Secondly, we might reasonably say that if the size of text has to increase each time contrast decreases, then the other end of the graph must tend towards infinity. To put it another way, once contrast has a ratio of 1:1 (for instance white on white or black on black), the text would have to be infinitely large i.e. it can never be legible at that contrast ratio.

In between I will assume (for want of information to the contrary) that the relationship is a smooth curve. Thinking about these few characteristics, we end up with a graph that looks a bit like this:

The next logical step is to try and find a mathematical function that will produce a curve that looks like this, so that we can predict the necessary change in text height for any given contrast ratio. To me, that looks a little like a 1 / 1-x function, though if anyone reading is a proper mathematician (or knows one), I would welcome any alternative suggestions. The best-guess function I have at present is...

Putting it into practice

Having come up with a function that might model the effects of contrast on legibility, it seems sensible to try it out. I have created a sort of legibility testing tool to do this. Feel free to try it out and have a play, although be aware that it is all rather Beta, and probably as likely to break as to work. The font detection relies on Flash, and also won't work if you're using any sort of 'private browsing' mode. It also takes a few seconds to work, so have patience.

Stupidly, I borrowed the font-detection AND the nifty size-calculation scripts from somewhere, and can't remember where. If they're yours please let me know so I can give credit where it's due!

What is it all for?

This tool is designed to combine all of the legibility-related calculations from this blog post and the previous one, and allow a designer to choose any locally-installed font, specify the size, colours, and intended device on which it will be displayed, and see just how legible it might be.

The point of all this is twofold:

1. To enable designers to make better decisions about typography, for a more readable web experience.
2. To free designers from the constraints of hard-and-fast contrast rules, so that where branding or aesthetics require type to appear outside of the suggested cut-off points, a judgement call can be made with confidence.

Next steps

The plan is to test the theory. I've written some testing software that should enable me to test real eyeballs under controlled conditions, and see if the relationship between text size and contrast really does look like this. It may be a little while before a large-scale test can happen (though with help from my awesome colleagues at Zone it shouldn't be too long, I hope), but early signs are good. Here is a chart of results from testing myself and a couple of others in not-very-controlled conditions...

If you found this useful or interesting, or if you know anything about this topic and you don't mind sharing, please add a comment below. Thanks for reading.

References and Links

WebAIM: Color Contrast Checker

Contrast Rebellion

Contrast Sensitivity Testing

Wikipedia entry: Luminosity function

Conference Paper: Human Computer Interaction, Legibility and Contrast

What minimum text size should be used on the web?

If you work in digital design you probably have some sort of answer in mind. Maybe you have a preferred size for readability, and a lower limit you won't drop below. Perhaps you remember the WCAG guidelines. Whatever your answer, the next question is probably more tricky: why?

With the range of screen sizes and resolutions currently available, not to mention the variation in the way we use devices, it is becoming increasingly hard to know exactly what is a sensible minimum, or a comfortable size for reading. In this post I will attempt to explain what 'legibility' means, technically, and how this can help you make better decisions about text size.

“Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without a purpose.” - Emil Ruder

How good is your eyesight?

One way of describing the sharpness of eyesight is with the 'Snelllen scale'. As I understand it, this is actually somewhat old-fashioned these days, but for the purposes of this explanation it is ideal. You're probably already familiar with this measurement: normal eyesight is described as "twenty-twenty" (20/20).

So what does that mean? On the right is a Snellen Chart, a method of measuring visual acuity developed in 1862 by Dutch ophthalmologist Herman Snellen. A descendant of this chart is still used today. The smallest line of characters that a person with so-called 'normal' vision can read at a distance of 20 feet is the 20/20 line. If a person is said to have 20/40 vision, they can just about read at 20 feet what can normally be read at 40 feet. And likewise if you were lucky enough to have 20/10 vision it would mean you could read at 20 feet what others could only read at 10 feet.

Technically, whether or not something is legible is all down to the angle the character being viewed makes with the eye. That is, it is the perceived size that is crucial, not the physical size. Small-print on the back of a form held a few inches from your face may be easier to read than giant words on a billboard a few hundred metres away. You can visualise it like this:

It is a simple matter of either trigonometry or common-sense to demonstrate that the relationship between the distance and the character-height is linear, meaning that you can maintain the same angle at twice the distance by doubling the character-height.

It's all about angles

Going back to that definition of normal eyesight, the angle those characters on the 20/20 line make with the eye at a distance of 20 feet is 5 minutes of arc, a minute of arc being one sixtieth of a degree.

The characters that form the chart are actually very interesting. They are known as 'optotypes', and they have some important characteristics. Firstly, the width of the lines is the same as the the width of the spaces. Secondly, the width and height of each character is five times that line-width.

What this means in practice is that when a person is able to discern an optotype that makes an angle of 5 minutes of arc with their eye, that in turn means they can "resolve a spatial pattern separated by a visual angle of one minute of arc". If that sounds confusing, look at the capital E. To read it you must be able to differentiate three horizontal bars and two spaces: five elements in total.

Note that although these definitions reference distance vision, the actual measurement of visual performance is not related to a particular prescription for lenses. Factors beyond myopia or hyperopia can affect a person's ability to resolve a sharp image, including astigmatism, problems with the shape of the eyeball or cornea, and even neural problems. It is, however, a measurement only concerned with central vision, and not peripheral vision.

Some vision trivia...

• About 35% of adults have natural 20/20 vision, rising to about 75% with the use of corrective lenses or surgery. [source: UIHealthcare.org]
  
• Many people have better than 20/20 vision. In 1999 Tiger Woods had laser eye surgery, which is said to have given him 20/15 vision. After the surgery he won seven of his next ten events. [source: Independent.co.uk]
• Here in the UK, the DVLA require you to read a 79mm number-plate character at a distance of 20 metres in order to obtain a driving licence. This equates to just 20/54 vision.
• There is a separate DVLA requirement for visual acuity of 'decimal 0.5' (after correctives). This is just 20/40 vision, and may go some way to explaining the quality of driving here in Bristol.

Easy to read?

There is a crucial difference between text being legible and actually being easy to read. To say that something is legible is simply to say that the reader can discern what the characters are. But for something to be easy-to-read it must be larger. And of course there are other typographic factors that I shan't cover here, such as line-length, leading, typeface and so forth. There are many excellent blog posts on this subject.

Many studies have looked at at what constitutes easily-readable text. The ANSI calls for a minimum of 16 minutes of arc, and British Standard BS EN ISO 29241-3, ("Requirements for Office Work with Visual Display Terminals”) also uses 16 minutes of arc as the boundary for easily readable text. Interestingly, the apparent radius of the sun at the horizon is also 16 minutes of arc. I expect this is just coincidence, but it is interesting that there is a commonality between human visual acuity and probably the only object that has been a constant size throughout our evolution.

Text on Digital

So what affects the legibility (and by extension, readability) of text on the web? We know that this is a question of the physical size of the text and the distance of the eye from the screen. So what we really want to ask is: what affects the physical size of text on a screen? And here a number of factors come into play. Clearly the specified text size is the major factor, but perhaps less obviously there is also the pixel density of the screen, and the typeface itself.

Pixel density

Pixel density has become a significant variable in digital design only relatively recently. If you're not sure exactly what I'm talking about, pixel density is simply the number of 'dots per inch' on a screen. To illustrate, a laptop with a 1280 x 800 pixel 13 inch screen has a much lower pixel density than a 5-inch-screened smartphone of the same resolution. For reference, a pretty standard HD resolution 24 inch PC monitor has a pixel density of about 94 pixels per inch (PPI), whereas a 'Retina' screened Macbook on the other hand has around 225ppi.

Unfortunately the complexity doesn't stop there, as it is also necessary to think about device-pixel-ratios. This is to contend with the fact that many newer mobile devices are so pixel-dense that they have to 'pretend' to have lower resolution screens in order to ensure that web pages display at a size that is readable.

Interestingly, 20/20 vision should allow a person to recognise a 1 pixel pattern on a 290ppi screen held 30cm from the face. What this means is that many of us are are already using smartphone screens that exceed the capabilities of the human eye in normal use, with density values exceeding 300ppi becoming more and more common. If you've ever worked in print design, this number might seem incredible: there are now phone screens that exceed the standard quality measure for print.

Typefaces

When we talk about the physical size of text rendered on a screen, one of the things that is commonly overlooked is the differences between typefaces. Below is the letter E, set in a variety of typefaces. But each 'E' is exactly the same font size. As you can see, some fonts produce a letter E twice the height of others.

Doing the sums

So, how can you work out if the text you've put on a website will be legible? If you know the height of your capital E in pixels, then the pixel-density of the screen multiplied by the pixel-ratio should enable you to work out the physical height of the character. We can estimate the distance of the eye from the screen if we know the most likely usage for any given type of screen (i.e. handheld, sat at a desk etc). Combining these means we now know two sides of a right-angled triangle, and so we can calculate the angle made with the eye.

If all of that seems too complicated, have a look at this diagram:

If you can remember a little of your school trigonometry, you might recall that the tangent of an angle is equal to the opposite divided by the adjacent. So....

tan δ = opposite divided by adjacent = b / 2a

To save you the trouble of doing this yourself, I've made a handy little tool to do the job for you.

About contrast

Clearly contrast of text against a background has an enormous impact on how readable it is. Understanding (and attempting to model) the impact of this will be the subject of the next post on this blog. I have written a tool which attempts to check typography for legibility both in terms of size and contrast, and I hope to share that next time, too.

Final word

Legibility is of course only one factor in making text useful and valuable. I can't really say it any better than David Carson: “Don't mistake legibility for communication”

I hesitated a bit before beginning this blog post for fear that this is actually something that other designers everywhere do all of the time, and I might end up looking like a feckless idiot tapping out egg-sucking instructions for the benefit of no one but the aesthetically deaf. However, as I can't find anyone else talking about this after a full 20 seconds of searching, here goes...

When doing the first visual design for a new website, why not start off in greyscale? That is, design for the final layout and typography, but only using shades of grey.

I first did this quite recently, as a result of inspiration failing to strike in the face of what seemed like the perfect starting point. I'd taken the client through quite a thorough UX analysis and design phase, resulting in a wireframed prototype that seems to be on the money. I had brand guidelines, a good understanding of how the UX requirements should influence the graphic design, and a good feel for what the client and end users would want to see. And yet no matter what I did, I just couldn't seem to get started.

(I don't know if anyone else finds this, but when I'm trying to come up with a new site design, I often find there is a sort of tipping point when the design takes on a life of its own. It's as if the first bit is all uphill, and then suddenly it finds its own direction and you coast down to a completed concept.)

In the end it crossed my mind that the bolder-than-bold corporate colours in the brand guidelines where too distracting, and somehow made 'good' aesthetic decisions harder to make. So I started again with just a greyscale version of the logo in the top left, and began to add the elements specified on the wireframes, but this time only using shades of grey. This seemed to make it easier to focus on the balance of the individual elements on the page, their contrast with each other, and the specifics of the typography. More impact for an individual element might mean a darker grey, or making it bigger, or even a different design. But by not having to worry if I'd picked the right colour from the brand palette I could focus purely on the clarity and balance of the composition.

The outcome was that once I started working this way I very quickly had a completed page mock-up I was happy with, albeit one best suited to hamsters. The next step was obviously to add those missing brand colours, trying out swatches and tints until the colours were talking the same language as the rest of the design.

Unfortunately I can't share the real design work, as the company is big and has put a lot of effort into a rebrand that has yet to launch. But the concept isn't exactly complex, so I doubt anyone needs to see the same design in colour and mono to get the point!

In many ways this is almost a natural progression of the very aesthetically conscientious style of wireframing that I know a lot of UX-ers prefer. I suppose design is like most problem-solving, and if you split one large problem into two smaller ones you have a better chance of getting to the right answer.

So if you find yourself facing a similar problem, and your design is all perspiration and no inspiration, have a go at taking the colour out of the equation - you might be surprised at how much it helps.

One of my favourite automotive whinges is the seemingly ever-increasing size and weight of new cars. With a few notable exceptions (the Mazda 2 and Chevrolet Corvette spring to mind), each new car is always slightly bigger and slightly heavier than the car it replaces. And as modern cars have become more similar in pace, construction and appearance, the differentiating factors (outside of brand image) have focussed almost exclusively on comfort, space, safety and refinement. I'm not necessarily talking about high-end stuff here: that tends to play by different rules. I'm talking about everything from a Ford Ka up to a BMW 5 Series.

Economies of scale as well as the implementation of strict safety legislation seem to have led to a sort of convergence in car design, and meant that manufacturers are forced to compete on what was once the minutiae of the road test review. An average group test of new cars in the motoring press today will often conclude one car superior to another thanks to a few more litres of boot space, a slightly better ride, and slightly less noise on the motorway. This sort of thing is unavoidable: manufacturers are competing within quite strictly defined boundaries: must seat five, must hit 62mph in about 10 seconds, must get 4+ NCAP stars and so on. The problem is that something has to give, and what gives is weight and size. If what it takes for your new hatch to be seen as better than the opposition is another couple of centimetres of legroom, a bit more sound-deadening, or a few more electric toys, then that's what it will undoubtedly get. And so the weight-gain continues. The consumer only validates these choices by discriminating on the basis of size and motorway quietness. If we simply accepted that we could live with less of the heavy sound-deadening, and rarely needed to carry a wardrobe home in the boot, the current car market would be a very different place indeed.

The problem manufacturers are increasingly facing is that they are now judged on the economy of their vehicles too, and weight is the enemy of economy. Pretty much any very light car, with sensible gearing and an smallish engine designed after 1960 will do 40+ miles to the gallon. Speaking as one who has owned several ropey Minis, I can promise that this is true. And they aren't economical because an overhead-valve, cast-iron A-series engine fueled by carburettors is especially efficient or advanced (it isn't), but because they only weigh about three quarters of a tonne. Fit one with a modern fuel-injected lump and the economy figures can be hilarious (in a good way).

What annoys me about the status quo is that currently economy is judged by an unrealistic government test that in no way replicates real-world conditions, and in which weight has little, if any, effect at all. This test (conducted on a rolling road), is what manufacturers are designing their cars to excel in. The inevitable result is cars being sold with staggering official economy figures, and absolutely no chance of reaching them in the real world. Autocar's recent first drive of the Fiat 500 TwinAir resulted in a distinctly unimpressive overall economy reading of 37mpg. Compare this to the official combined figure of 69mpg, and it's clear that the official economy figures are nothing if not inaccurate. Likewise a recent Auto Express group test of city cars revealed vehicles that claimed to be capable of mid-50's economy on the combined cycle, but in reality on returned low-30s.

What's more, hybrids - cars who's soleraison d'etreis to be economical - are subject to the same misleading tests, and so present similarly skewed results.

I find it disappointing that they all seem to take an engineering approach similar to the Bugatti Veyron - set a goal and then add ingredients until you get there. Thus you end up with a car like the Prius, which sports a regular petrol engine, an electric motor, and a heavy pack of batteries, not to mention all the regular safety and comfort features that customers have apparently come to expect. And therein lies the problem:everythinghas become an immovable feast. Which means you end up with a car that, whilst still only seating 4 (5 at a push), is 4.5 metres long and weights nearly a tonne and a half, and manages fuel economy figures likely to be no better in real life than a diesel engined car of similar space and performance.

There's no doubt that the Prius is an incredibly clever bit of engineering, but the current belief that everything you find in a modern car absolutely has to be there is a fallacy. To paraphrase Colin Chapman, 'just add lightness'. Essentially, the lighter you make a car, the lighter you can make the components - it becomes a self-fulfilling prophesy. Lighter cars need smaller brakes, smaller engines, lighter-weight suspension components (because the forces involved are so much lower), and so on. If manufacturers can start to sell vehicles on the basis of light weight, rather than equipment and refinement, we might actually see some genuine progress in the real-world efficiency of our vehicles.

What has caught my eye recently, and inspired this post, is the Volkswagen XL1 concept. A properly light kerb weight by modern standards - about 800kg - combined with a super-slippery shape means that this plug-in hybrid could deliver real-world economy figures of over 100mpg. I hope that the rumors of a short production run are true, even if the resultant cars are likely to be unattainably expensive. It may only have a tiny diesel twin and a 26bhp electric motor to get it moving, but thanks to that low weight, that is more than enough. Keeping the weight down also means that the battery pack can be kept small, and yet still deliver a 22 mile electric-only range. The fact that VW have created this apparently genuine hyper-economy car through reductionism is something to be applauded. Hybrids aren't really my thing, but I think the XL1 is fabulous.

Finally, this little rant would be incomplete without mentioning the Murray T25, a car that can't be built soon enough as far as I'm concerned. As you might expect from the brain behind the McLaren F1, it's a work of design genius. I truly hope that the presence of a 550kg, 3-seater city car gives other manufacturers the wake-up call they need as they prepare to turn out yet another 1500kg hatch. However, this will only happen if we, the consumer, can learn to appreciate that there are more things to the suitability of a vehicle's design than noise suppression, electric seats, and how many sets of golf clubs you can fit in the boot.

Things are looking quite busy over the coming weeks at work, which is great, given how variable the demand for creative design can be from our client base. I find it can be quite helpful, creatively, to have a stack of jobs lined up into the foreseeable future - for some reason it seems to help my mind stay in the mode it needs to be in to draw things worth seeing. Trying to be creative can feel like trying to be lucky, or trying to be well after catching a cold, so anything that helps you remain in that special place is good, as far as I'm concerned.

Thinking about this, and also the fragment I wrote about creative inspiration in an earlier post, got me wondering why inspiration can be so elusive. Douglas Adams once wrote that 'writing is easy: you just stare at a blank piece of paper until drops of blood appear on your forehead'. I often feel similarly about staring at a blank Photoshop file.

A week ago, I finished preparing a piece of oak for some interior woodwork (a mantlepiece, in fact). It was an oak sleeper from a garden centre, and looked fairly grubby and battered when we got it home. However, a day spent planing the sides revealed the most beautiful, golden-brown woodgrain, and the smoothed and cleaned piece of wood was, if I say so myself, pretty close to perfection. What I noticed was that contemplating this vast, perfectly straight and solid piece of wood was tremendously inspiring. Not in a life-affirming way, I should add. But inspiring in the sense that looking at it made me want to makethings. I don't recall what things exactly, but I definitely wanted to make them, and as soon as possible, and using that lovely bit of wood.

What I'm getting at is that the presence of some tangible raw material is an incredible encouragement tocreate, in the broadest sense of the word. And this in turn causes me to wonder if that may be why getting the ball rolling where virtual creativity is concerned can sometimes be a struggle - no raw materials. Or, at least, no raw materials in the same sense.

Faced with creative choices that are largely limited only by what can be drawn in Photoshop, perhaps one should think of the specific solutions to the requirements of the client, or the end-user, or a usability issue, as the basis for our raw materials. Of course in the end these are still as intangible as the start point (that blank Photoshop file), but they help the designer to visualise the set of solutions that may do the job, and these then become our raw materials, waiting to become something useful, or beautiful, or ideally both. In my head that sounded a lot less pretentious than it came out when I typed it.