How to Create Image Captions that People Can Actually Read

People often pick the wrong font-color when creating image captions, or when pairing the color of a text with the color of its background in general. Doing this can make your text almost completely illegible. At the very least, this means people will struggle to read what you wrote, and become annoyed. More likely, they will just decide to not read it.

Fortunately, this issue is something which is easy to fix. The following examples will show you which common mistakes to avoid, and which guidelines you should follow in order to make your texts and image captions readable and aesthetically pleasing.


What NOT to do

Avoid placing light-colored text on a light background:


Similarly, avoid placing dark-colored text on a dark background:


Avoid relying only on color contrasts between the text and the background to ensure readability:


Doing this generally leads to text which is annoying to read, and which can be illegible to color blind people in some cases. It can work sometimes if you know what you’re doing, but you’re almost always better off not relying on it.


What you SHOULD do

Rely primarily on a light-dark contrast. For example, you can pair a dark-colored text with a light background:


You can also pair a light-colored text with a dark background:


If readability is your main concern, or if the background color is not consistent throughout, use a white text with a black outline, which can be easily read on any background:


Summary and conclusions

  • Create a contrast in brightness between the text and the background; avoid light texts on a light background, or dark texts on a dark background.
  • In addition, don’t rely only on color contrasts between the text and the background to achieve readability.
  • Try to pair light-colored texts with dark backgrounds, and dark-colored texts with light backgrounds.
  • If readability is your main concern, the best option is to use white text with a black outline, as it is legible on all backgrounds.