Color Contrast
Learn how we're using artificial intelligence for this rule!
Ensure the color contrast between text and its background meets WCAG 2 AA minimum ratio thresholds.
According to WCAG 2.0 1.4.3 AA, the visual presentation of text must have a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. Large text is defined as at least 18pt or 14pt bold.
About this Rule
This rule checks the color contrast of static text elements and text within interactive elements.
Impact to Users
The level of color contrast impacts how easy or hard it is to distinguish text from its background.
For people with low vision or color blindness, text that is too close in luminance (brightness) to the background can be hard to read.
Confirmation
- Do one of the following:
- Open your app in a simulator, OR
- Take a screenshot of the app on your physical device. Send the screenshot to yourself and open it on your computer.
- Use a color picker to:
- Get the truest color of the text element.
- Get the truest color of each distinct background color behind the text.
- Input each color into the Deque Color Palette Contrast Checker.
- You will find one of the following:
- Accessible: The color contrast ratio meets the required minimum for its text size.
- Inaccessible: The color contrast ratio does not meet the required minimum for its text size.
How to Fix
Use Deque's Color Contrast Analyzer to find colors that meet the required minimum based on text size.