Use Low Color Contrast for User Interface Constraints

by on 09/10/10 at 3:59 pm

Low color contrast has always been the devil when it comes to web design. The problem with low color contrast is that it makes text and other objects hard for users see. Because of this it’s usually advised to use high color contrast on your website. However, there are instances where low color contrasts can benefit the user.

Constraints in user interface design limit the possible actions a user can do with a control. This makes designs easier to use and reduces user error during the interaction. When you’re using user interface controls that have constraints, a touch of low color contrast can communicate these constraints effectively. Here are a few cases where constraints are useful and necessary.

The first is with paginations.

Use Low Color Contrast for User Interface Constraints

When a user is on page one of website, the “previous” link should display as inactive. By using low color contrast on the “previous” link, it signals to users that the link is off. This means clicking on the link doesn’t take the user anywhere. This forces users to navigate forward, not backward, which is what you want when the user is on page one of a website.

The second is with carousels.

Use Low Color Contrast for User Interface Constraints

With carousels, you also want users to first navigate forward. However, when the list of items end, the carousel should constrain the user to navigate back. A common mistake with carousels is not including a scrolling constraint. This creates a never-ending scroll that infinitely loops causing confusion with users because they don’t know where they are in the carousel. Users need to know where the items in a carousel start and end. This way they can go back to an item if they need to, or stop when they have finished viewing all the items.

The third is with multi-page stepping.

Use Low Color Contrast for User Interface ConstraintsThe constraints used with multi-page stepping lets users know which step in the process they are on and which steps are left. This helps guide the user so that they can complete a multiple page form easily and accurately. The low color contrast used on the preceding steps communicate to users that they must complete the step they are on before they can move to the next step.

Using low color contrast for constraints is a great technique that can help your users interact with your design more effectively. This is the only time where it’s acceptable to have low color contrast on your website. Keep this in mind when designing, and you’ll be able to navigate your users to a good user interface experience.


Use Low Color Contrast for User Interface Constraints Use Low Color Contrast for User Interface Constraints

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

2 Responses to “Use Low Color Contrast for User Interface Constraints”

  1. Adam Kochanowicz

    Sep 11th, 2010

    Thank you for mentioning the infinite carousel. If the designer wishes to give their user the option to jump back to the first item, there are less confusing ways to do this than to distort the concept of the list having a beginning and end. For instance, iOS does this by making the thin title bar at the top double tappable.

  2. Rinat

    Sep 24th, 2010

    Thank you for this post. I found the part about carousels the most informative for me. Now I understand exactly WHY there should be an end for a carousel.

Leave a Comment