Color Contrast

Learn how we're using artificial intelligence for this rule!

Ensures that each text element has a minimum 4.5:1 contrast ratio with its background and that large text has a minimum 3.0:1 contrast ratio.

Impact

Issues detected by this rule impact people with color blindness and low vision. Low color contrast between a text element and its background may prevent some or all information from being read.

Confirmation

If you have access to the color palette of your app:

1. Add each color to the Deque Color Palette Contrast Checker.
2. For each text color with its background, ensure that the color contrast ratio is 4.5:1 or higher (or 3.0:1 for large text).

If you do not have access to the color palette of your app:

1. Open your app in a Simulator.
2. Using a color picker --
   1. Get the truest color of each text element.
   2. Get the truest color of each distinct background.
3. Input each color into the Deque Color Palette Contrast Checker.
4. For each text color with its background, ensure that the color contrast ratio is 4.5:1 or higher (or 3.0:1 for Large Text).

How to Fix

Use the Deque Color Palette to find colors with a higher contrast ratio.