Color Alone, Color Contrast, Color Conflicts
Non-text contrast
UI components and graphical objects that are needed to communicate information or functionality have a contrast ratio of at least 3:1
Non-text contrast clarifications
- Text in UI components and graphics remains text
- logos still exempt
- Does not always require component boundaries to meet the contrast minimums
- Does not always compare the contrast between the component or graphic to its background
- Does not require different states of the same component to contrast
- ...unless they're next to each other
So when do I check for contrast?
- What is required to identify the component and its state
- The part or parts of the graphic that are important to understand the content
Let's look at examples for Non-text Contrast