Often my user fill two password fields in a form.

two passwords form

The computation of the two fields generates a unique sha1 (ex: dba59b52c4d483e17cad109e7...).

  • I use the generated sha1 to generate something (with some other information).
  • I do not display the sha1 to my user.
  • If the user completes the form with the same two password, the sha1 is always the same.
  • I do not store the sha1 for my user.

To allow my users to discern that the computation of both password is the usual(1) computation, I used the first 6 characters of the sha1 to build a color and I display it to my user.

color uniqueness

The user feedback is not very good :

  • certain colors are associated with errors or warnings (red, orange, etc)
  • I use a limited number of color for color-blind, and often users have identical colors for two different sha1

How to facilitate the perception of the uniqueness of my sha1 ?

If I use pattern or geometric shapes, where should I put it ?

(1) The repetition of filling the form with the same information makes the computation usual.

2 Answers 2


So I would consider a bar that extends out as the uniqueness of the sha1 increases. So, as the user types their password they notice the bars that extend out from 2-4-6 bars(shown in the image below). This allows the user to understand that the sha1 being entered is increasing in uniqueness. Here the colors don't hold as much as an importance just because of the multiple bars.

If I were to have just one big rectangle(like the one in yours) then you would have to take into consideration the color blind users. But when you break it up into smaller bars that just increase in number as the uniqueness increases, then you would not have to worry too much about the user not being able to differentiate color.

If this method doesn't seem good enough, you could add only text "too short", "medium", "strong", being colored red, orange, green respectively.

enter image description here

  • While i like this, turning it into 3 rectangles would make more sense, and adding "weak password" etc would be favorable since its not clear what is wrong with your "red rectangle password" May 29, 2016 at 6:21
  • I'm not sure this makes sense for the question asked. This isn't a password strength indicator, but a display that your password is like a password you've typed previously. There's no gradient, per se, nor is the previously entered password known to anyone but the user. (As far as I've understood.)
    – Veedrac
    May 30, 2016 at 3:46
  • @Veedrac you're right, this is not a password strengh indicator. Your understanding is perfect May 30, 2016 at 6:28
  • @guillaumevincent oh damn! I assumed it was for the passwords to match at first and then got confused, so sorry! I generally prefer adding only one password entry box and a toggle button to the right that says "SHOW" to reveal the characters of the passwords, rather than having the user perform an additional task. May 30, 2016 at 7:56

You might be better off doing the simplest thing: write "checksum: XXX".

                         │ ● ● ● ● ● ● ● ● ●            │
                         │ ● ● ● ● ● ● ●                │
                                        checksum: 836 ⓘ

I would add some restrictions, though:

  • The "checksum" text should not be visible until there is content in a password field, possibly both.

  • The checksum should grow as the password grows, capped at 3(-ish) characters. This helps illuminate the purpose of the checksum. I'd cap it at n/2 digits for n characters in the password field.

The advantage of the technical wording is that it sounds like a power-user option. If deemphasized, people are unlikely to pay much attention to it if they're unfamiliar with the term, which prevents it from getting in the way when they're first using the system. After they've recognized it a few times it's likely to be much more obvious that it's like a CVV2 number on credit cards (especially because it's 3 digits).

This is likely to be a bad thing if you're targeting technology-averse users, though.

  • 2
    Possibly it would be useful to add an 'i' (for info) button next to 'checksum' so that curious users could look up some information on what it is for.
    – PhillipW
    May 30, 2016 at 14:51
  • @PhillipW Indeed; that seems pretty necessary. I've added it to the diagram.
    – Veedrac
    May 30, 2016 at 16:01
  • Why not turn that around: show a label with human/non tech-savvy readable text ("This is a very unique password") and an 'i' next to it with more information, including technical details for the more technical literate. This way you might avoid having regular users worry about the importance of terms like a checksum, for example (as in: this says checksum. Did I do something wrong? Clicks the 'i' feverishly.) May 30, 2016 at 16:11
  • @GinovandeStaaij The value isn't a measure of uniqueness, but a hash of the passwords. I've not managed to think of a "human-readable" version of the text yet.
    – Veedrac
    May 30, 2016 at 16:33
  • @Veedrac: yes, thank you. I understand. My comment was meant to keep the explanation as simple and understandable as possible. I personally needed to look up both hash and checksum to understand what they mean, so I would expect others like me to perhaps experience the same. May 30, 2016 at 17:34

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.