Why does the website design go beyond the color

Source: Internet
Author: User

Color, is a powerful tool, especially for the design field.

It conveys emotions and feelings, adds a sense of being to the design, and enhances brand awareness. But we often see that users with color vision disorders suffer from navigation in colorful interfaces. Considering this part, I often suggest that designers should always keep in mind the problem of accessibility, and in the grayscale format of the Web site testing, to ensure that the color can not be normal performance of the situation will be able to achieve perfect practicality.

A user with a color vision loss may have difficulty distinguishing between certain colors. The most common color loss is red-green blindness, which is the same for people who see red and green.

Here is a list of common color blindness forms from color matters.

Image:color matters

Through this form we find that to fill out this online form, we must consider whether users with this color blindness problem can see the red error message.

Let's take a look at Avis's home page booking form. I clicked on the "Continue" button when I didn't fill out anything, and the "Please enter a location" message displayed in pure red text.

Image:avis

Here we use the Color blindness Simulator to look at the situation of the same layout through the eyes of the red color color-blind user (Colblindor).

Image:colblindor

We found that the red error message was not highlighted, and replaced by green text, which is almost completely fused to the black content of the page and is easily invisible.

Look at an example from the Budget homepage Reservation form where I clicked on the "continue as Guest" button and received an error message. In this case, the red error message appears as a red copy that obscures the label of the input box, while the actual input box has a red border outside it.

Image:budget

Below we use the Color blindness Simulator to see what the effect is with the eyes of the green color-blind user.

Image:colblinder

We found that the red was out of sight and replaced it with light green. The green copy does not have enough contrast to draw attention, and the boundary of the input box is not highlighted.

Conclusion

Do not rely solely on color to convey information on the web. On the contrary, we should combine the basic elements of text, shape, grid and space, and assign more weight to important elements.

The Home Depot account registration form uses shapes to indicate the problem on a color basis. It will appear in a square box, an exclamation point before the error message copy, and an "X" next to the relevant input box to indicate where the error occurred.

Image:home DEPOT

Through the Colblindor simulator, we'll also find that the red and green tones are gone, but the user can still tell if the operation is wrong by the shape.

Image:colblinder

So we recommend that you use Colblindor to test the page, or simply change the settings to Gray to ensure that the utility is not affected by color problems.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.