How do I make this color combination more readable?

by

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?

Answer

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!

Attribution
Source : Link , Question Author : bers , Answer Author : Community

Leave a Comment