The color contrast overlay evaluates difficulties that users might encounter when they view items on a website due to a lack of contrast between the foreground text and the background color. The overlay shows violations of WCAG2.0 standards and determines where the contrast issue is located.
Depending on the number or location of the severity icons, it can be difficult to analyze data. You can click and drag any severity icon to a new location on the screen. An indicator line ties the severity icon to the object.
A contrast ratio of 4.5 or greater is necessary to avoid being pinpointed as a violation by the Color Contrast overlay.
Severity icon | Definition |
---|---|
Violation | |
Potential violation | |
Recommendation |
Procedure
Use this procedure to apply a color contrast overlay to a snapshot.
- In the Snapshot gallery, select a snapshot.
- Select the Color Contrast overlay.
- Select the view that you want to use.
- Optional: Select the Zoom factor that you want to use.
- To analyze color contract issues:
- Select a severity icon.
Information about the violation displays.
- To display violation details, click Show Details.
- To analyze the colors, click Analyze Colors.
The color analysis displays.
- Move the cursor within the Color Contrast Analyzer to preview different foreground and background color options.
The Pass/Fail indicator changes based on the colors you test.
- Select the options to auto correct the foreground or background color.
- To remove any changes you made, click Reset Preview.
- Select a severity icon.