I'm developing a web application which is basically using 2(3) colors:

  • Magenta
  • White
  • Grey-scales

The app is a register for local artists and therofre, the users can rate them.

Currently I'm only displaying the reached stars as grey full/half stars.

enter image description here

Now I saw it with some sample rows and it looked like they haven't got a star yet (intuitive: grey = bad).

Do you think I should display all 5 grey stars a background and highlight the achieved ones in magenta?

The theme is overall flat and sterile, so will this be too intrusive?

enter image description here

Because I fear, the bottom of a row will visually dominate the rest, as there are now the rows with the tags and the rating stars.

  • 1
    Definitely two colors since the Magenta stands out well from the lighter colors (white, grey). In my opinion, there is not enough contrast between an inactive star and an active star, making the inactive stars carry too much visual weight. Consider using a lighter shade of grey (or magenta) for inactive, or as others suggested a star outline (stroke no fill). Commented Jun 28, 2016 at 16:15
  • 3
    I have a small red/green problem and I have problems to distinguish between the "red" and grey :-) So the colors chosen are bad for me. Commented Jun 28, 2016 at 20:51
  • @FabianBlechschmidt Thanks for the Hint, I've actually never thougth about this earlier. So the images look grayscaled for you or how can I understand the situation of yours?
    – pguetschow
    Commented Jun 29, 2016 at 6:33
  • 1
    I see the difference, but it hurts physically - not bad or anything, but it costs concentration to see and this hurts in the head :D might be too less sleep too. What I want to say: You don't want the customer to invest concentration on this, therefore change the color. Commented Jun 29, 2016 at 7:26
  • Okay. So the example from the accepted answer would be ok for you?
    – pguetschow
    Commented Jun 29, 2016 at 7:29

7 Answers 7


First i believe you are well prepared to use only star rating system. As there are other ways around to compare products or profile (artists in your case).

Side Note: YouTube switched from a star-based system to the binary thumbs-up\thumbs-down, their ratings shot up many-fold. It could be same in your case, Up-votes/Down-votes would be fine i guess. For more... Link 1 & Link 2

Coming to actual point. Considering your app is more on grey-scale based, magenta for star will surely draw more attention than rest.


Talking about Star Rating system, you could possibly do only one thing. That is on normal state(not achieved ones according to you) you could have grey(or whatever your grey shade) border to a star.

Which on active state(achieved ones according to you) you could fill them with grey(or whatever your grey shade) color.

A rough example:

enter image description here

Grey Instead of Black Colour

Update: Development side Solution

I presume that you might be using font-awesome for this stars you do either of two workarounds:

  1. Could change the class if embedded via html. As Font-Awesome provides two types of star(classes) one with color filled and other with just border.

  2. Could change the provided Unicode if done with CSS

These changes would be on hover/active/focus states.

I think this is what you need if you go with my Answer.

  • Thanks for your reply. I'm aware of the binary system, but I think it's visually better with stars (as most of rating apps stick to this system). I will try out your attempt :)
    – pguetschow
    Commented Jun 28, 2016 at 11:32
  • @TechTreeDev Happy to help!
    – divy3993
    Commented Jun 28, 2016 at 11:34
  • Sure, Yes am with you lets see, if we can find any better solution. I will be more happy to know. :)
    – divy3993
    Commented Jun 28, 2016 at 11:52

Try using outlines but personally for your case here i feel two colors is better than one. It shows some sort of visual hierarchy when it comes to a user making a decision.

  • 1
    Simply using two colors can be dangerous if not done with awareness to color-blind users which make up a potential significant portion of users (especially males). Commented Jun 28, 2016 at 19:06

I would suggest using multi colored star ratings because in the first example where it is single star, I had an initial assumption that the last star is badly formatted or the interface is buggy/not finished. Actually it was half a star but I interpreted it wrongly. That may lead to confusion and decreased credibility for the site.

Since most of the websites, in my opinion, use multi colored star ratings you should stick to that because otherwise you will break the consistency usability heuristic. It should be familiar to users in order to process the information faster.

About your concern that the lower area of the page will attract more attention because it is more colored, you could just use lower contrast colors for the star ratings or make them ~50% transperent. Other alternative is to use light grey and grey colors to denote the star ratings.

  • Yes i agree with you about multi colored star ratings, but why to bring two shades of grey, when you can have development side solution which is for 100% going to be used anyways for showing two different states of stars.
    – divy3993
    Commented Jun 28, 2016 at 13:11
  • Just sharing my views.
    – divy3993
    Commented Jun 28, 2016 at 13:15
  • Just added this as a variant on how to lower the contrast of the star ratings in order to decrease the attention on the ratings as this is secondary task, and the primary task is viewing the product info. Commented Jun 28, 2016 at 14:10

I think the rating outlines work well but I would consider moving that Stars up higher to the 3rd line under the geographic location. Seems like important information.


For the stars i mostly agree with Divy's outline idea, however instead of grey for black for the outline I'd go with the magenta. I'd also agree that with with both of those being magenta the bottom will dominate the rest of the content, so to counter this i would change the artist's name to magenta as well. This should create a nice looking container for the rest of the content without drawing too much attention to any one part while still highlighting what most users will find as the most important information.


The main reason why it's important to show all five stars is because it would not be clear what the star limit is otherwise. (If I'm on a page with 3 stars, I could think that that's the top mark.)

I'd also suggest going with outlined stars or you could use two shades of gray, one very light.


A feature-rich star rating widget is always best to visualize the rating in your scenario.

Also it should support fractional rating shown by partially filling the stars, and also it will be best if the rating widget itself can be used as an input field to retrieve rating not collected yet. You can see such a control in action here.

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.