About this design

Visual accessibility

This design aims to show how a site can look great, but still demonstrate plenty of visual affordance. Notably with ubiquitous text underlining — for interactive text. And with colour — to denote interactive state.

Text underlining

Underlined text is one of the oldest conventions of the web. Hyperlinks are what set apart the world wide web from other visual mediums.

As web browser technology and web design evolved, we grew excited by the ability to ‘clean up’ our designs. To a lot of us, removing the underlines from text links was a great way to reduce visual clutter. Everyone knows how to work links now, right?!

And in 2014, Google set a precedent for this.

https://cdn3.sbnation.com/assets/4131801/googlelinks1_560.jpg

But, as our approach to UX and visual accessibility continues to mature, we’re facing the reality that we often don’t provide enough visual affordance.

Like many, I believe that colour alone isn’t enough to differentiate linked text from regular text.

Using contrastive font weight — to differentiate between regular and interactive text — can help. But other, non-linked text — such as headings and bold phrases — may share a similar stronger weight. So this can still leave ambiguity.

Underlined text is classic, robust and explicit. Why fight against browser defaults? Why not align with a powerful convention? Why undermine the potential for engagement and conversion on a superficial whim?

My approach

On this website I’ve used underlining to denote interactive text, almost ubiquitously.

The only exceptions are when prompting text is part of a wider — also interactive — component, such as a button or a ‘card’. These components offer their own conventions for visual affordance, so underlined text would only serve to overcomplicate — and possibly confuse the interaction.

Interactive colour

Whatever happened to different colours denoting interactive state?

This is another browser default, that helps to show our relationship with a link.

links

Blue was often the ubiquitous colour for hyperlinks. Purple would show that you’ve visited a certain link before. The colour could change on hover. And another could even be used to show that something is in the process of being clicked.

But again, many designers and developers choose to override this traditional approach. Restrictions of brand palette, or sufficient visual contrast of available colours, is often the barrier here.

My approach

I’ve prepared two sets of interactive colour. Covering the traditional four interactive states. One set for use against my light backgrounds and another set for use against dark backgrounds.

And to ensure sufficient visual contrast, between text colour and background colour, I’ve made sure that each colour achieves a WCAG ‘AA’ rating or higher.

colours

Spatial system

This website uses a spatial system, of my own design.

It uses a modular scale, and in this case a ratio of 1.618 (the golden ratio no less!), to produce a set of numbers.

rdd-ratio

These numbers then get used everywhere! As em and rem units, these numbers control:

  • All vertical rhythm
  • Type hierarchy
  • Block, grid and section spacing

Starting mobile-first, numbers are taken from further up the scale, as increasing screen size allows for larger and more relaxed sizing and spacing.