Skip to main content
Version: v3

Color

Avoid using colors as the only way to convey important information.​

Many visually impaired users have difficulty distinguishing between blue and orange or red and green. In the application design process, avoid using only colors to convey information. Combine text or graphics to help visually impaired users understand.

The switch provides a tag to describe the state of the toggle control, using graphics to inform the user of the corresponding on/off status.

Design

① Regular switch style ② Switch style with labels

Choose colorblind-friendly palettes based on the requirements of visually impaired users.​

You can simulate color vision deficiency to find proper colorblind-friendly palettes. You can use the color vision deficiency (CVD) simulator to improve your design: Simulator

Design

  • Two colors that need to be distinguished must have a sufficient hue difference to ensure △Euv≥20 (ISO 9421-307).

    The color difference value is △Eab* in the CIE L*A*B* color space and △Euv* in the CIE LUV color space.

    Color toolset is used to convert RGB color to CIE L*A*B* color space and CIE LUV color space.

    Color difference calculator is used to calculate △Euv.

Design