Initials Avatar Generator

A name in, a readable avatar out.

Shape

A name in, a readable avatar out.

How to use it

  1. Enter a name. The initials and the colour both come from it.
  2. Pick a shape and size. Circle or square, at whatever pixel size you need.
  3. Download the SVG. Or set your own background colour first, if it has to match a brand.

When you would use this

An initials avatar stands in where someone has not uploaded a picture, and there are two ways to get it wrong. The first is the colour. Picking a random hex gives a set where some avatars glare and others sink, because a random colour has a random lightness. This builds the background in a perceptual colour space at a fixed lightness, so every avatar in a list carries the same visual weight. The second is legibility, which is where the naive version fails outright. Always using white initials looks fine on most colours and drops to 3.4 to 1 on mid greens, which fails WCAG AA. The lightness here was chosen by sweeping every hue and measuring, and the worst case is 5.15 to 1. If you supply your own background the initials switch to whichever of black or white actually reads on it. Initials are taken as first and last, so Ada Lovelace is AL rather than AD. A single word gives a single letter. Characters outside Latin script are handled properly rather than being split in half, which is what naive string indexing does to anything above the basic plane.

Questions

Will the same name always give the same colour?
Yes. The colour is derived from the name itself, so a person keeps the same avatar across a page, across a session and across a rebuild. Nothing is stored to make that work.
Are the initials always readable?
Yes, and it is measured rather than assumed. Generated backgrounds sit at a fixed perceptual lightness where the worst case across every hue is 5.15 to 1, comfortably past WCAG AA. If you set your own background, the initials switch between black and white to whichever actually reads on it.
How does it handle one word names, or names not in Latin script?
One word gives one letter, since two letters from a single word reads as a mistake. Names in other scripts get their first character, which is the honest answer where there is no first and last to take.