It's not all that uncommon for people to be red/green color blind; basically, they can't (readily or at all, depending on the severity of their condition) tell the difference between red and green. So using specifically red and green to indicate opposites is a quite poor choice; and in general, IIRC WCAG discourages using color as an only signal of anything.

Thanks for bringing this up! How about the Wong or Tol color pallet then? In addition shading could be used, I will edit the post to illustrate.

The accessible palettes make an improvement in how distinguishable the colours are (more people will be able to tell them apart) but they do not help with how identifiable the colours are. Many people are already conditioned to see green as good and red as bad, but people who see the accessible palette as, for example, bluish and brownish, will have to learn from scratch which one of those means good, and even then that knowledge is site specific, not a generally applicable rule, as different sites will use different accessible versions of near-red and near-green.

In addition to this, different cultures use colours in different ways, so people who can easily identify red and green will not all associate them with the same meaning.

For this reason, an accessible colour palette is an important start, but is not sufficient alone. As Canina mentions, using colour as the only indicator is not enough. There should also be another indicator such as shape or pattern to supplement it.

Also worth bearing in mind that having some of the info available on hover makes it difficult or impossible to access on a mobile device. That's already a problem with the existing state though, not specific to your suggested improvement.

In the picture that I added to the post I suggest that besides colors there would be shading used: 100% votes up would mean the whole box is shaded, the less % of the total of the votes is up (resp. base this on Wilson score if you will), then the smaller is the shaded part. So in case of the down-votes dominating only the very bottom would be shaded (by magenta color) and the rest of the box would be white.

Ah I see now. Interesting. A separate accessibility issue is the contrast problem of putting the colours behind the text - but that could easily be avoided by having the same colour and shading to the side of the text instead of behind.

Could it be like in the picture I just added at the end of the post?

I like that. (Bear in mind these are just my opinions - I have no more authority than any other voter here.) The only problem I can foresee is when the community grows and there are more votes, some of these may become more than 2 digits and not fit in the circle...

Added version 3 to address the issue you mentioned.

The graphic design here doesn't make the shading very obvious, in my opinion. In particular, I think a blurred edge or gradient fill is counterproductive - if the intent was to convey the level of certainty in the Score (i.e., something related to the number of votes informing it), it definitely fails at that task IMO.

It's also visually distracting to show the number on top of this variably-sized, possibly-gradient-filled, region of colour. The number distracts from interpreting the colour block's hue and size; adding a separate shape behind the number makes the number more readable, but the colour block even harder to interpret.

In my design, I attempt to address these problems by showing the number separately and using a pie-shaped wedge for the colour block (so that there's a clear reference for "100% filled"). I also think that if a single number is shown, it should be a sum of up and down votes, not a difference (and explain why in my answer).