24

I am trying to improve an existing web site, and this is what I am starting with:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

I find that this color combination is hard to read. Others disagree, but we have agreed that it depends a lot on contrast, brightness, and other display properties (even the viewing angle):

enter image description here

I have already experimented quite a bit with -webkit-text-stroke, text-shadow (see code above), but as I improve things on one display, it gets worse on another.

What else can I try to make this more readable on a variety of displays, while maintaining the overall color scheme?

Improve this question
11
  • 22
    Feel free to show this comment to your client. I have many years of design experience, and I can assure you that the "others" in your question above, who think that is readable, are completely wrong :) The entire scheme should be changed because it is broken beyond repair.
    – mayersdesign
    Feb 4, 2019 at 13:16
  • 15
    I have over 30 years experience as a designer... I could not possibly agree more with the comment from @mayersdesign above. that color scheme should be immediately rejected.
    – Scott
    Feb 4, 2019 at 16:34
  • 6
    First, you should understand the purpose of your color scheme. In a color scheme for UI, it makes sense to use neutral colors as the primary colors, any accentual colors should be thrown in sparingly. Think about YouTube for example, what color comes to mind? Red and black, but take a look at the actual YouTube webpage, its 98% white and light grey. Red is used merely as an accent.
    – Dylan
    Feb 4, 2019 at 16:59
  • Thanks everyone (including the answerers)! I just double-checked SE to look at what I had expected to be 1 or 2 comments since this morning, and now this. I learnt a lot and received some convincing arguments - thank you!
    – bers
    Feb 4, 2019 at 22:05
  • 1
    1995 called. They want their color scheme back.
    – Mazura
    Feb 7, 2019 at 7:22

8 Answers 8

Reset to default
55

Change the client's mind.

There is nothing that can fix the fact that red text on a blue background is an extremely poor choice for legibility because the contrast is too low, and because specifically red and blue work poorly as contrasting colours.

This website webaim.org shows that the contrast between your two colours is a pitiful 1.52:1

Contrast is important for legibility

Text contrast is one of the more important aspects of text legibility. Luckily for us the Web Content Accessibility Guidelines (WCAG) 2.0 addresses text contrast specifically, and provides guidelines that although aimed at providing web accessibility to people with disabilities, also offer sound advice in general.

WCAG level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

So your clients' website is in direct contradiction of published professional guidelines. It is also in contradiction of aesthetic taste (in my professional opinion)

You can still use elements of red and blue in a design if that is required. But laying "content-size" red text over a blue background is simply going to turn away a large percentage of the visitors to your site. In my opinion you have a professional responsibility to persuade your client not to use it.

Hopefully the provided links might help make your case in a more robust way than simply arguing that you find it hard to read. It is in fact provably hard to read.

Chromostereopsis

If that wasn't persuasive enough try this - Chromostereopsis is (briefly!) an optical illusion that causes depth-of-field problems for viewers. It's unpleasant!

Improve this answer
2
  • 11
    To clarify, the contrast ratios in the W3C document are minimums. The don't say the ratio should be between 4.5:1 or 7:1; they say it should be at least one of those, depending on which level of accessibility you're targeting.
    – Adrian McCarthy
    Feb 4, 2019 at 17:19
  • 1
    Very good point, I have updated the answer to include more details, especially this one.
    – mayersdesign
    Feb 4, 2019 at 19:27
8

Though by no means perfect (or even good), adding a white (or other) outline to the text can help with readability:

enter image description here

This might be useful if your client insists on keeping the colours.

Improve this answer
2
  • To be fair, that only works with 36pt type.
    – user8356
    Feb 8, 2019 at 20:15
  • Yes, great concept. Not meant as sarcasm. And the more you apply it, the better we can read the text. So take the white outlines all the way to the edge of the screen... Wink, wink.
    – Martin Zaske
    Feb 8, 2019 at 21:12
8

You can't. Those shades of red and blue are both dark, saturated colors, they practically vibrate against each other, and that text will make people's eyes bleed. Any developer or designer who doesn't care about text legibility should be run out of town on a ruby rail.

Try making the red A LOT lighter. It will look pink but it will be more readable. Or use white or pale yellow on that background. Dark backgrounds are notoriously hard on legibility. You can have the same general color -- a greenish blue -- but make it much lighter. But bright red text is never easy to read either, so I would just scrap that color scheme for text.

Improve this answer
7

As has been pointed out, that's horrible color contrast. It's also a a bad palette for colorblind people (with red-blue colorblindness, the contrast ratio drops to something damn close to 1:1, which is completely unreadable).

Your best bet here is going to be to convince the client that they should not be mixing colored text and backgrounds. Either color the text, or the background, not both. Try loading a mock-up into a tool that lets you simulate colorblind perceptions (you can find a couple of decent options online), and show the result to your client, that should significantly help in convincing them.

If that isn't an option, other things you can try to improve readability include (note that none of these solve the colorblindness issue, they only help with the contrast or general readability:

  • Use a mono-spaced font. Sounds stupid, but this actually does help most people read text easier. Obviously not Courier New, but Bitstream Vera Sans Mono, (or even something like Droid Sans Mono) should still look decent, and will be somewhat more readable.
  • Make the font weight, and probably the size a bit too. Bigger, bolder text is easier to read, independent of the contrast.
  • Swap the color scheme (that is, make it dark blue text on a bright red background). It sounds simple, but it's generally easier for most people to ready dark blue on bright red than the other way around.
  • Add a high-contrast narrow drop shadow to the text with an offset. What you want here isn't a blend into the background, it's a hard edge that provides good contrast. Offsetting the shadow can help with this too, especially a simple diagonal offset. I'd also go with black here instead of white (you want to accentuate the text, not the background, so go for high contrast against the text). Overall, something along the lines of text-shadow: 2px 2px 4px black; is probably a decent starting place.
  • Lighten the red significantly. Right now, you're using rgb(255,0,0). I'd try with something like rgb(255,204,204) (or possibly even lighter) first, and adjust from there.
  • Darken the blue. Something closer to rgb(25,51,77) is about the same hue, but should be dark enough to make the text more readable.

One more option which also helps some with the colorblindness issue:

  • Desaturate the blue background. WHile not the best option (it does skew the color scheme somewhat), this should help the readability the most out of any of the other things I've listed, because it will actively boost the contrast. I'd try about 30% lower saturation (that's rgb(82,102,122)) as a starting point.
Improve this answer
6

If you have already tried text shadow, I think the only possibility keeping the same colors is making a text span

enter image description here

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Styles

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}
Improve this answer
5
5

You need to have a high enough contrast ratio between background and text (object in foreground) for it to be readable, with a minimal contrast ration of 4.5:1. https://www.oss-usa.com/color-check-ada-image-compliance shows that your background and foreground are too close together to be readable.

Sometimes the client has to be told that color scheme cannot be fully preserved and needs to be revised in order to meet readability requirements. Obviously, reversing the text to a light color would give the sufficient contrast against dark background.

Improve this answer
3

"How do you make the text more readable?" In short, you don't! The colour combination does not meet web accessibility guidelines and should not be used. A different foreground or background colour should be used. No matter who your assumed target audience is, you should always aim to cater for people with visual impairments, and this is an easy fix.

Contrast ratios for your colour combinations can be seen here... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

Improve this answer
2

(Not enough points to comment)

You can try adding a stroke to the text. I’m using the term “stroke” in the photoshop sense, basically the color of the border/outline of the text to serve as the contrast. Black/white should be fine (especially if you play with the stroke thickness), but I imagine certain shades of red/blue might work too.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.