This content originally appeared on DEV Community and was authored by Ross Angus
Image by Syed Hasan Mehdi
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 Does this look OK on my MacBook Pro and my iPhone?
, it's Does this break at any point?
.
Let me show you an example.
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:
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:
Photo by Marcus Dawes
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
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
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?
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. 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.
This content originally appeared on DEV Community and was authored by Ross Angus
Ross Angus | Sciencx (2022-04-22T16:56:42+00:00) You’ve been sent here because you’ve designed a site which has text over the top of an image. Retrieved from https://www.scien.cx/2022/04/22/youve-been-sent-here-because-youve-designed-a-site-which-has-text-over-the-top-of-an-image/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.