Do people know what it means when there is a coloured bar that shows up below their password as they type? The users that will be using this form will be from all over the world and most likely different demographics.

Password Strength indicator without text

Will anybody be confused by what this is? Do I need to add text/an explanation as they type? Will just a tooltip do?

  • Is there a reason you don't want to add text to the visual indicator?
    – Mark Bubel
    Commented Mar 25, 2014 at 18:42
  • It might become more intuitive if you add a colour gradient from red via yellow to green and maybe add a padlock and/or shield symbol somewhere. Commented Mar 25, 2014 at 18:48
  • 1
    @MarkBubel I would rather avoid adding text because it would have to be translated.
    – alanj
    Commented Mar 25, 2014 at 18:49
  • @TheUser1024 I do have it showing red for bad password and there is a gradient to green for the strongest password. The screen shot is just an example.
    – alanj
    Commented Mar 25, 2014 at 18:51
  • @alanj: I think you could vastly benefit from defining your target audience more precisely. I personally know people who would be confused by this or rather "would not even notice it" (i guess), they are from "all over the world" and belong to "different" demographics. That does not really answer your question though. It only answers "will anybody be confused by this?" :-) Commented Mar 25, 2014 at 19:03

2 Answers 2


There are three concerns here.

  • Relying on color alone is an accessibility violation as someone with monochromatic vision will struggle to figure out the level of color and understand if his password is weak or strong. To quote the WCAG site

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

  • Your labels will help screenreaders provide additional inputs to their users : To quote this article

So having an indicator progress bar is awesome, but for folks who are using screen readers, they’re completely useless unless you label them. Also, color coding your indicator is fun, but if your site or product is used internationally, keep in mind that colors vary widely in meaning. Give your indicator some easily understood labels. We went with Very Weak, Weak, Fair, Strong, & Very Strong, and they seem to get the job done.

  • Symbolism of color : Since you are using this form for users from around the world,you need to remember colors have different meanings worldwide and what might a suitable color scheme might not work somewhere else and hence relying on color alone will not serve the purpose.

Here are some examples of how password indicators can be styled

enter image description here

enter image description here

  • 2
    "Relying on color alone is an accessibility violation" that answered my question right there.
    – alanj
    Commented Mar 25, 2014 at 19:09

The best experience is with text where you tell the user what's happening.

Google does their strength indicator with text: gmail strength indicator

Another example I've seen is with suggested or required criteria to force the user to generate a more secure password: password example

If you are debating about whether or not it's a good idea to use text or not, here's a great article: http://edwardsanchez.me/blog/13589712

Part of it depends on how tech savvy your users are and if they are able to recognize what the colour bar means. Without knowing who your audience is, all of our answers will be a shot in the dark but Google has a pretty widespread reach, so I feel that's a more appropriate example.

EDIT: I'm sure that Google has all the translations you need for this if you just use the language setting on the password page.

  • The popup in the second example given here is quite far away (visual angle-wise) from where you are typing and looking. The first one is likewise not quite where the user is looking. It's probably better to have anything you want people to notice sit hard left on the page, so it's closer to the label and where the user is actually typing. Commented Jun 3, 2014 at 10:00

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.