You've been sent here because you've designed a site which has text over the top of an image
Tags: a11y, design
Published: 2022-04-22 16:56:42

---
title: You've been sent here because you've designed a site which has text over the top of an image
published: true
description: A judgement-free plea to designers everywhere to either stop doing this, or work around the issues it causes.
tags: Accessibility, Design
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7svmjytdrqwc9tkwb2as.jpg
---

<small>Image by [Syed Hasan Mehdi](https://www.pexels.com/@syed-hasan-mehdi-270838)</small>

Can I just say before we get started - I *love* your shoes. They go so well with your outfit. But that's not what we're here to talk about.

You've made a design where some text goes over an image. You submitted it to your web developer and they've got a bit grumpy about it. You've explained to them that there *is* sufficient colour-contrast between the text and the image and they've sent you here.

It's OK. We're not here to judge you. But let me explain why your developer is even more of a sourpuss than usual.

## Developers don't believe in devices

Your web developer doesn't make websites for big old Mac screens, MacBook Pros, iPads and iPhones. They make sites which work at every possible width between very big and very small. Even if a particular screen width doesn't exist right now, they worry that it *might* at some point in the future.

So the question isn't <q>Does this look OK on my MacBook Pro and my iPhone?</q>, it's <q>Does this break at any point?</q>.

Let me show you an example.

{% codepen https://codepen.io/ross-angus/pen/RwxvaoP %}

## Counterpoint: just choose a better image

You're probably thinking right now that the solution is simple - just make sure that the right image is always chosen, so there's enough colour-contrast between the text and the part of the image where the text sits.

The thing is, you're not always going to be available to choose images for this site. Neither is your web developer. Realistically, the person making this decision is likely to be a content author.

Content authors have enough to worry about, without becoming experts in accessibility and colour contrast. We should just assume that they're going to choose badly. In fact, this is the image I'd like you to imagine they will select:

{% codepen https://codepen.io/ross-angus/pen/dyJaXBd %}

OK, let's take a bit of a break. Thanks for reading this far. This is going pretty well, huh? I'm proud of you for getting this far. As a wee treat, here's a picture of Jony Ive. Look at his perfect head.
Look at it.
*Look at it*:

![The British-American designer Jony Ive and his perfect head and face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jzo31wlp2sv8hsr1aym.jpg)

<small>Photo by [Marcus Dawes](http://www.marcusdawes.com)</small>

Feeling better? *Good*. Let's continue.

## How to fix this

Let's assume your content authors are deranged chess fans (are there any other kinds?) How can we work around their terrible background image choice?

### 1. Use a background tint or gradient

{% codepen https://codepen.io/ross-angus/pen/bGazwpX %}

That's the same background image in the examples above, but with a tint behind it, allowing the text to always be visible.

### 2. Highlight the heading text in some way

{% codepen https://codepen.io/ross-angus/pen/gOoqweV %}

You might recognise this technique from those subtitled films your friends keep dragging you out to see.

### 3. I dunno, perhaps put the text somewhere else?

{% codepen https://codepen.io/ross-angus/pen/abExwQz %}

If the client asks you why, you could say that it really gives the images space to breath. Client's *love* that kind of chat.

## Hang on, I thought the colour contrast rules weren't even that accurate?

OK, sure, there's some chat out there that the algorithm used to decide if any two colours work well with each other doesn't take into account every variety of colour blindness. Or that [humans often find white text on a coloured background easier to read than black](https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/). Or that some colours which pass are an aesthetic *nightmare*. But ask yourself, what's the alternative? We ignore accessibility completely? We run usability testing for every new piece of content on the site?

Our tools might be crude, but that didn't stop that shorts guy from making a [sweet, sweet guest house](https://www.youtube.com/watch?v=Ka2Eu6LxAKo).