Choosing colour for online typography

Four simple rules to follow to ensure your type online is always legible, accessible…. and beautiful

Andrew Burton
Sep 29, 2014 · 5 min read

It is often easy for inexperienced designers to get carried away with the plethora of colours available to them. Who hasn’t been tempted to use a flamingo pink that looks resplendent on your 27" iMac display?! The fact of the matter is though, that colour really matters, the world of web typography isn’t a wild-west free for all. There are certain rules that should always be followed to make sure your site works. If you neglect legibility you’re neglecting your users, and if you’re neglecting them, and you know it, well I don’t know what else to say to you…. So here are four rules to ensure you don’t!

Don’t neglect contrast

This is the most essential piece of advice regarding typography colour. Contrast is the difference in luminance and/or colour that makes an object distinguishable, just as it is in the offline world, this is what defines one object from another. If you have red text on a pink BG it quite simply is not as visible and legible as it would be on white BG, and when your vision is impaired this is exponentially more pronounced.

Ok this might be fine for your crafted portfolio site that no one visits, but if you’re wanting to put anything online that is accessible to a larger sweep of the population it is worth baring these stats in mind.

  1. At age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.
  2. Nearly 9% of Americans are visually impaired, meaning their vision cannot be completely corrected with lenses.
  3. Over 10% of people are colourblind in someway, this reduces their ability to distinguish between two similar colours ie contrast

Luckily theres help at hand to tell us guys with 20/20 vision what isn’t legible to a potential 30% of your user base, sites such WebAim and snook can quickly tell you if your passing the widely accepted WCAG 2.0 guidelines on accessible websites. Visiting these sites should be a first port of call when picking a colour to determine whether they pass the WCAGs A, AA, and AAA categories.

So do you need to adhere to all categories? Strictly speaking, no, the AAA category is admitted by the WCAG to be beyond reasonable adherence by most sites, but if you don’t want to neglect your user-base I would recommend adhering to them whenever you can.

It is also worth noting the size differentiations mentioned by their guidelines. As along with contrast, size is what differentiates separate elements online. Obviously as text size is magnified the subtleties in contrast changes are greatly enhanced, making the type more visible and legible. In their guidelines the limit where small text becomes large text can be defined as 14px bold or 18px regular and above. So it goes that a colour that fails their AA ratings, might pass if their relative sizes are increased on your website. With this rationale it is still possible to use colours that would fail the AAA definition of an accessible contrast ratio (4.5:1) if used at a larger size than 18px. For example for use in headers or on splash pages.

Un-mathematical attempt by myself to extend the WCAG guidelines for larger (or smaller fonts)

Don’t use black

This is closely related to the above point, although while I was focusing on a low contrast difference on the above point, the opposite is true here. Too much contrast (between pure black type and a white BG) causes eye strain and is harder to read for those with dyslexia. Obviously in small instances such as headers and UI elements this strain can be negligible. But for body copy it is a big no no to use pure black (#000000) or similar.

So what to do about this? Choose a dark grey that is at least 80% of the darkness of pure black. For example Medium goes for RGBA o,0,0,0.8, equivalent to a hex of #313131, IOS and google uses #222222 while my personal favourite is a #444444. Soft enough to not be aaggressive eyesight eradicator but hard enough to pass all accessibility requirements with ease.

In fact don’t use any “unnatural greys”

This is a controversial point and admittedly subjective one that has been hypothesized many times before on the web. But essentially centres on the belief that straight greys without hues eg. ones that are picked exclusively from the left hand side of the colour picker are ‘unnatural’ and lack the depth and richness of a grey with an element of blue for example.

This is obviously more pronounced in large blocks of colour (ie. on backgrounds as opposed to just type) but it can still be deployed as a discernible extra element of your brand, or as way to extend a feeling or depth to your site that a pure grey couldn’t within your type.

For example facebook use a navy blue of #141823 for their timeline type, while twitter use #141823 to further support their blue blue blue styles. This might not be enough evidence to switch you away from using the OCD friendly numbers available on the left hand side of your palette but it’s an additional consideration that could make your designs pop that extra more.

Facebooks timelines font colour. A dark and rich navy blue that reflects their brand

Don’t use white text

First of its extremely frustrating to copy some text from a website into your email or word processor just to be rewarded with an unreadable screen as it renders as white on white.

Second of all; it has been proved that colour themes that use white or light text on a dark background are far inferior in the readability stakes compared to dark text on light backgrounds. This is due to the iris being being less focused when reading off dark screens as it is open wider to let in more light.

So there you have it, follow these simple rules for your body typography and your website should be accessibility and usability friendly (…and maybe beautiful)

For colour contrasts that no doubt fail WCAG guidelines, follow me on dribbble.
For more of my musings,
follow me on twitter.

    Andrew Burton

    Written by

    London based designer currently working on my own startup

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade