Low color contrast has always been a common problem in web design. The problem with low color contrast is that it makes text and buttons hard for users see. It’s best to use high color contrast on buttons and text. However, there are instances where low color contrasts can benefit users.
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.
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.
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.
The 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.
Book
Affiliate
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.
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.