Creating accessible assets: Color and contrast

Color and contrast play a key role in how users perceive and interact with your content. To meet accessibility standards, it’s important to ensure sufficient contrast between text and background, avoid relying on color alone to convey meaning, and choose palettes that support readability for all users. This article guides you through best practices for using color and contrast to create inclusive, accessible web experiences.

Requirements

• Small text (under 18pt regular font (24 CSS pixels) or 14pt bold font (19 CSS pixels)) must have a contrast ratio of at least 4.5:1 with the background.
• Large text (at or over 18pt or 14pt bold) must have a contrast ratio of at least 3:1 with the background.
• The contrast rule also applies to images of text, although it’s best to avoid using images for text.
• The contrast of UI controls and non-text elements (like toggle, checkbox etc.) to the background must be 3:1. 
• The contrast of all visual focus indicators (e.g., hovers over a button) against the background must be 3:1.
• The graphical objects like a standalone icon, a graph, or an image have a minimum contrast of 3:1 between the item and its background. 
• Any information shown through color needs a text alternative that a program can understand.
• Always provide a visible alternative, like text or an image, for any information conveyed by color.

Examples

	DO: A darker outline marks the user’s current step in the flow. Looking at this view’s greyscale, such a solution would allow a color-blind person to acquire information about where they are in the process.
	DO: Chart data can be distinguished from each other by adding shapes to the lines. Looking at this view’s greyscale, such a solution would allow a color-blind person to acquire information about the data.
	DO: Text should be on a background with a 4.5:1 contrast ratio. DON’T: Don’t use background color for the text below a 4.5:1 ratio.