Accessibility

Color contrast in a design will determine how legible those colors are when used next to each other or on top of each other.

Text color contrast

Ensure proper color contrast is crucial for people with low vision or color blindness who may have trouble reading otherwise.

Make sure that all text has enough contrast against its background will enhance the legibility of text.

Text Contrast Do
Text Contrast Dont

Requirements

Since links can be used inline with other text, link color has additional requirements in order to make the link identifiable not just from the background but also from the surrounding text color.

Link Text

Requirements

Non-text color contrast

Elements like text and graphics that are needed to understand the functionality of a component need to be easily perceivable by all users. This is also important for any visual information that can help determine a component's state, such as when it's focused or active.

Not adhering to proper contrast in controls make them more difficult to distinguish for people with moderately low vision.

Non-Text

 

 

Requirements

Don’t rely on color alone to convey information

Color-blind users will not be able to differentiate between some colors and non-sighted users won’t understand the sentiment at all. It’s important to provide additional context to explain visual elements such as borders, icons, and underlines and ensure that text content clearly conveys the intended message and state.

 

Include icons and to reinforce meaning

Include icons and to reinforce meaning

Don't rely on color alone to convey information

Don't rely on color alone to convey information

Requirements