image taken from wsbt.com

Terms & Conditions & Accessibility

Making terms look good without turning them into a CVS receipt.

I want to have a talk about every designers most annoying copy, the terms & conditions. The annoying bit of copy at the bottom of every email, that we try to hide away and make as invisible as possible. And that is the issue right there.

…we don’t design a product used by one specific group of people, but experienced by as many people as possible.

Designers tend to keep the terms at the bottom of the hierarchy. Making it small (12px or less) and by using a subtle grey. This becomes an issue for people with colorblindness and poor eyesight.

While the text is at a legible size, the grey of the font with the grey of the background doesn’t pass contrast checks. (Groupon Experience email)

How to we fix this? The best start is by looking at current designs. Are they easy to read? Do you have to squint at all, or focus too long to read them?

If the answer is yes, then think how hard they are to read by anybody with poor eyesight. Where I start is with the two general guidelines I have below. These guidelines will not be a major change for your design. Yet, they will be a big change for anybody with visual disabilities.

Two guidelines we should follow for terms & conditions:

WCAG 2.0 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1…

Small, descriptive text should be no smaller than 12px (normally around 12px–14px).

Now I know your what you are thinking. “why does it matter if the terms are small? People don’t read them.”

The issue isn’t why, it is can they read them if they wanted to. Do people with visual disabilities have the option to read the terms. As designers, we have an idea of whom our design will reach, but don’t think about groups in those groups.

Font is a little too small (10px), but the contrast does pass at least WCAG AA rating. Bringing this up to 12px would make it easier to ready, but not hurt the hierarchy of the email. (Petco Email)

There are benefits of thinking about terms copy not as a “have to”, but as part of the main communication.

First, it gives you a chance to think about heariacy . If we work from the ground up, we can think of how small text looks and than build up from there. When we build up from small-to-big, than we don’t fall into issue of ever shrinking descriptor text.

Samsungs Terms & Conditions are a good example of both legible size & contrast. Linking your full terms is a good way of making the terms available without it looking like a CVS receipt.

Second, making terms easier to read for everybody can build trust with the consumer. Making text small and out of the way can present the idea that this is non-important and hidden. By giving the consumer all the information (if they read it or not) they will have more trust.

Next time you are setting up your layout, look at the small text first and think about the legibility. Run contrast checks ( I use Chrome Developer tool) to see if it passes. Start there and let that sway your decisions about type hierarchy. Think about what needs to be on the email, and what can live on a terms page that the email can link out to. Let these “small decisions” change how you look at your next project.