I need to display battery with 3 colors: green, orange (or yellow?) and red.

This device's battery (like iPad, iPhone etc..) with a battery life of up to two days.

enter image description here

What percentage range to use for each color?

When the user want to see red color? or orange or green?

  • This is just going to be personal preference really, there is no correct answer here, but as you have 3 colours then what is wrong with 0-33, 33-66, 66-100?
    – JonW
    Apr 30, 2013 at 13:05
  • 3
    @JonW Do you want to see orange color when your battery on 66%?
    – user80042
    Apr 30, 2013 at 13:08
  • Please dont just change colour, also change something else about it. Some people will struggle to differentiate between some colours.
    – user25512
    May 1, 2013 at 16:13
  • 1
    @RhysW I also change the fill height inside the battery.
    – user80042
    May 2, 2013 at 5:38

3 Answers 3


The colour indicator is used as a priority status:
Red = urgent.
Orange = weak warning.
Green = good.

The priority depends on the application and the consequences of a low charge. For something like my kindle where the battery lasts for a month or more at a time, 10% isn't yet an urgent battery level. But for a backup UPS in a hospital, a charge level below 80% may be urgent.

For a mobile phone, I would tend to use:
50-100% = green
20-49% = orange
5-19% = red
0-4% = flashing red

However, this should not apply to every device regardless of its application area or consequences of failure.

  • I edit my question, this is device's battery like iPad.
    – user80042
    Apr 30, 2013 at 13:19

I would suggest (for laptop atleast) keeping it as follows:

  • Green 40-100%
  • Yellow/Orange 20-39%
  • Red 1-19%

The reason being, I have read many articles which suggest keeping your laptop charged between 40-80% to increase the battery's life. One such article.

I know some manufacturers which go for a wider green band:

  • Green 20-100%
  • Orange 8-19%
  • Red 1-7%

Edit: Just read the question's edit. In case of mobile devices I personally, would go for the wide green band.

The reason being, for a mobile device you do not want the user to feel like he needs to recharge his battery very often, so the wider green band reinforces this by virtue of visually signaling that it is ok to go on with your usage. Also, the recharging time of mobiles (not tablets necessarily) is quite short which allows the user to wiggle some more juice before pluggin in (and using).


Given that the life of the battery is so long, I don't think that there is a value of displaying a middle display.

Orange tells the user that there's something that they probably want to address, but they don't need to do it immediately. Red tells the user that there is an imminent problem that they need to address soon. With a 2-day battery life, if you use a linear scale, your device is going to show orange a lot of the time, even though there could be up to a day of battery life life.

Apple addresses this in their battery-powered devices (both laptops and mobile devices) by only using red. On iOS devices, it changes to red and throws a warning dialog at 20%, and throws another warning dialog at 10%. In the first case, the red tells me that I've probably got an hour of battery life left, which gives me sufficient time to finish what I'm doing and get a power cable. In the second case, the warning dialog tells me that my phone would like to be plugged in right now. I believe the warning dialog for batteries comes at different points on laptops depending on their battery life; the battery icon for my retina MBP (which generally has an 8+ hour battery life) turns red at 10%, which is still an hour of usage.

I'll also note that iOS and Mac show more information in their very simple battery icon than you're showing here in this icon. The battery icon is pretty flat, but that means that it's very easy to glance at it and have a reasonable estimate of how much battery I have left. It's easy to see if it's mostly full, about 75% full, about half full, and about 25% left. You're relying on text (which takes up a lot of space) to do something that the icon could do for you, if you simplified its design by removing its 3D nature and its drop-shadow. With a simpler icon, you could convey much of the information that you're currently conveying by text, and thus use less space without a loss of information.

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.