I'm currently setting up a small html front end for the result of our automatic software build. We develop on three platforms ( windows, macos and linux ), so I thought of just displaying the icon of that platform with a background color representing the status.

Like this ( each row is preceded by additional information, like date, which I didn't include )


However when viewing this from afar it seems like the central green rectangle extends further upwards.

sample from afar

How can alter this design to avoid this effect?

  • 3
    this is a really bad design for colorblind people. but yes red and green arent equally lumnious to people with standard vision.
    – joojaa
    Commented Feb 15, 2023 at 15:51
  • Using borders is one way to solve this. Although I might suggest changing the design approach. Maybe something like the badges commonly used on repos would be better, one badge for each platform. Commented Feb 15, 2023 at 16:15

1 Answer 1


I think the best approach would be to separate the icons slightly:

green and red with borders

If you use a low contrast separator, such as your current background colour, then you will need quite a wide separator, but if you go for something higher contrast, such as white, then the separators can be quite narrow.

Alternatively, you could adapt the colour scheme to something tonal, rather than with such contrasting colours. Maybe something like this:

alt colour sheme

Of course, another option would be to just leave it as it is. It might look slightly odd to some people's eyes, but it serves the purpose of communicating the information that you need it to communicate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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