This browser is not actively supported anymore. For the best passle experience, we strongly recommend you upgrade your browser.

UX & Design Tips

| less than a minute read

It really is time to move away from the low contrast text

It's good to see that the low contrast text is slowly dying out in web design... For a few good reasons. 

This short video from Nielsen Normal Group explains really well why we should avoid using low contrast text or navigation elements, even though it was a trendy thing only a short while ago. In short, it's not a good idea because:

  • it makes it harder to see and read,
  • it is not accessible,
  • it makes mobile use even more difficult,
  • it reduces discoverability,
  • it increases users' cognitive strain.

The recent trend of minimalism, popular in 2020-2021, was partly the reason we saw this happen a lot. Sometimes designers were faced with a lot of content to fit on the page. Their way to make it look less busy and more minimalist was to decrease the contrast between the background and other elements, such as text or navigational elements.

If you are not sure if your text is visible and legible enough, you can use one of the accessibility tools available online, such as a Chrome extension Colour Contrast Checker or a browser-based WCAG Color Contrast Checker. Also, if your website features many instances of 'text over a background image', the article Ensure High Contrast for Text Over Images could help you make sure it's done right.

Yes, low contrast text does look minimal, the same way a blurred photo on Instagram can look retro. But you wouldn’t blur your website even if it were fashionable. Don’t lower your contrast, either. The trend is most rampant among sites that want to present a high-end, elite, or sophisticated image. When a trend sweeps through the web like low-contrast text has, what’s likely happening is that companies see other big brands doing it and assume that it has been tested and vetted as a good practice. That is not always the case.

Tags

ux, low contrast, accessibility, web design, ui design, ux design, typography, colour contrast checker, accessibility tools