Using dark backgrounds in user interface design | UX Design Company
June 27, 2020
More and more, user interfaces on desktops, mobile devices and kiosks are using darker colored backgrounds. Understanding the reasons goes beyond aesthetics, however. Studies have been conducted to analyze how the combination of text and background color affects readability, aesthetics, and behavioral intention in people.
UI systems using dark backgrounds has its advantages. Eye fatigue is reduces, darker displays may work better in rooms that are not lit well, and certain text can be highlighted and emphasized better against darker backgrounds. The disadvantages are very real as well. Fonts that are too small or too thin become harder to read, screens with dark background can sometimes be more difficult to view in brightly-lit rooms, and darker colors may conflict with client branding. The good news is that the disadvantages can be overcome with a good knowledge of color theory and screen testing.
Some basic tips for using lighter text on dark backgrounds:
- Dark backgrounds absorb some light away from other elements on the screen so the empty space between screen elements becomes more important.
- Paragraph text is often harder to read on dark backgrounds. If your UI requires paragraph text on a dark background, using a gray tint on the text will help with readability. It lessens the stress on users’ eyes since gray text doesn’t reflect as much light.
- Testing different dark backgrounds and font colors is a must, especially on the monitor or device on which it will be displayed.
- Sans-serif fonts on dark backgrounds may be more legible, enhancing the readability of the text.
- While text with a grey tint works well with paragraph text, white text on a dark background works best with titles, labels and headings that appear on the screen. This is text that users will scan instead of read. White text on dark backgrounds is an effective way to grab users’ attention.