Text color on tag/button

Hi there,

I have a small tag/button which displays a shop opening time.

Currently I have it with dark blue text on a green background like this:

image

This seems to pass the contrast ratio, but not sure if it looks better/easier to read in white text, like this:

image

I would like to ask what people think of these options and which they prefer?

Any advice or feedback would be great, thanks!

I think I prefer the white text and find it easier to read, in the setting of the post, with the white background of the rest of the page.

Unfortunately, however appealling the white may look to those with good vision, it doesn’t get around the fact that it fails the contrast test for accessibility.

I prefer the white as the darker one doesn’t look right, but as mentioned the darker passes the contrast ratio

If you want to use white text, then you’ll need to darken the green background until it reaches the required contrast level.

1 Like

For me, the second one “White text” is easier to read as compared to the dark blue one.
However, as @TechnoBear has suggested you need to darken the background green
color a bit more.

1 Like