Why do web designers have to focus on color-blind visual simulations?

Globally, about 8% of men and 0.5% of men Women suffer from different forms of colour disorder (CVD). Which means that if your website has 1,000 a day, A visitor, and perhaps dozens of them will not be able to identify your carefully chosen colours as ordinary people. The colour-blind simulator is not just an interesting visual tool, but a core component of accessibility.

1. Identification of functional colour traps

One of the frequent errors made by designers is that key messages are transmitted only through colour. For example, errors are indicated in red and successes are shown in green in a form. For red- or green-blind users, the two colours may look almost identical (usually some degree of dark yellow or grey).

Solutions: This simulator allows you to visualize whether the error hint is still identifiable. A good barrier-free design should be a dual guarantee of " Colour+ Icons/Writes " . If the colour fails, the user can still understand meaning by exclamation mark icons or the word "mistake".

2. Optimizing contrasts between UI elements

Color-blind users are not only insensitive to specific colours, but also have difficulty in identifying the colours of close light. In the Achrommatopsia model, you find that the contrast between the obvious background and the button could be mixed.

By simulation preview, you can adjust the visibility and saturation of the colour to ensure that the text and background in the interface, the button and the container remain sufficiently bright to match the colour, even if the colour is completely lost. WCAG 2.1 AAA Level Standard.

3. Visual characteristics of different colour-blind types

Red Blind (Protanopia): Long wave long light is insensitive, red looks dark and yellow, purple looks blue.
(Deuteranopia): The most common colour-blind type. Green and red are extremely low-resolution, with a large number of yellow and brown-temperature visuals.
Blue Blind (Tritanopia): It's rare. Blue and green are hard to distinguish, and yellow and pink are easily confused.
All-colored blind (Achromatopsia): A very small number of people are completely disempowered and the world is in their eyes only black, white and grey.

4. Recommendations for best practices in accessible design

Don't just rely on colour: Never use colour as the only means of communicating information.
Use texture and mode: In chart design, you use different line styles or fill patterns to distinguish data series.
High contrast: Maintains a high contrast between text and background.
Test, test, retest: An simulator is used to conduct the walk-ins at each stage of the design.