Better visibility: white text on dark background

dear all,

do you think that in this case the white text is difficult to read?

if so, how would you improve it?
thank you in advance,

From a set of younger eyes, I can see it just fine and have no problems. I don’t have any eye issues though.

You can try a color contrast check tool.

I’m not a fan of “black” sites.

I have 2 contrast problem areas

The white on not-so-dark portions of the header and the grey on black in the footer.

I can make it out, but I have to work at it.

1 Like

@Mittineague, I have problem with the header. I want to keep photo and have some text on it.
I have already turned it darker. Should I do something else?

Thank you for the footer remark, I’ll make text lighter.

I wouldn’t make the background image darker, hows this look to you? (of course you could play with it, but for an idea)

.av-subheading.av_custom_color {
    opacity: 0.8;
    background-color: hsla(50, 33%, 25%, 0.75;

I understand it’s a trend and I’m not making comment to whether or not your should do it however You have two problems with a large image background:

  1. Your image needs to be quite large in the first place

  2. Even if you do make it large the chances are you are not going to want an image 5000px wide so it will have to scale anyway which will result in artifacts/pixalation.

You are using text on the image that will not not clear when juxtaposed to the the heading text that sits on top of it. To counter this (and to make it seem more like a background texture) why not add a blur to the image? This will help create depth, hide the pixalation when scaled and at the same time offer a less distracting background.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.