If the background is not a single color, such as a gradient or image, select the pixel that is most similar to the foreground color.Įxamine Accessibility Insights for Windows to determine whether the contrast ratio passes the relevant WCAG 2.1 AA success criteria.

Under Color 2, select the background color. If you know the text's hex color code, enter it in the Hex Code box.Select the color using the Color Picker box.You can also use the arrow keys to focus on the pixel and press the Enter key. Select the first Eyedropper, and select the pixel that accurately represents the text's color.Under Color 1, select the foreground color of the text (typically a horizontal or vertical portion of a character). Turn off the toggle for Auto detect contrast ratio.Also, when auto detect doesn't work on text, the contrast ratio must be tested manually. If Accessibility Insights for Windows is unable to detect the colors, or if the confidence level is low or mid, you must test the contrast ratio manually.īecause auto detect uses a heuristic intended specifically for text, the contrast ratio of UI components and graphical elements must be tested manually.(You can bring Accessibility Insights for Windows to the foreground by pressing Shift+F9). Accessibility Insights for Windows will display the same information and also indicate whether the contrast ratio passes the relevant WCAG 2.1 AA success criteria.A tooltip will display the detected contrast ratio and confidence level.To auto detect a text element's contrast ratio, use your mouse to hover over the text (or set keyboard focus on the element).Turn on the toggle for Auto detect contrast ratio.Auto detect is not recommended for use on icons or other graphical elements. (You can also press Ctrl+R).Īuto detect makes it easy to test the foreground/background contrast ratio of text elements. In the Navigation bar, select Contrast.Open Accessibility Insights for Windows.The graphical object is purely decorative.The information conveyed graphically is also conveyed through visible text.For example, logos, photos real life scenes, illustrations using realistic colors, and screenshots are exempt from the contrast requirement. A particular presentation is essential, and presenting it with sufficient contrast would undermine its meaning.You do not need to test any graphical object where: UI components whose appearance is determined by the browser and not modified by the authorĮxamine the app to identify any graphical objects (such as icons, charts, diagrams, and illustrations) that contain meaningful elements that might have low contrast against the background.Low contrast between different states (normal, focused, mouseover, selected).Part of an inactive (disabled) componentĮxamine the app to identify any UI components (controls) that might have:.You do not need to test any text that is: How to test contrast ratio Identify elements to test TextĮxamine the app you want to test and identify any instances of meaningful text that might have a low background-to-foreground color contrast. 4.499 does not meet the threshold of 4.5 for regular text. Any active (non-disabled) UI component or meaningful graphical element with a contrast ratio below 3.0 fails.Any UI component or meaningful graphical element with a contrast ratio of 3.0 or greater passes.Any text with a contrast below 3.0 fails.Īccording to WCAG 2.1 AA Success Criterion 1.4.11:.Large text (18pt or 14pt bold) with a contrast of 3.0 or greater passes.Any text with a contrast of 4.5 or greater passes.Minimum contrast requirementsĪccording to WCAG 2.0 AA Success Criterion 1.4.3: The problems can be exacerbated if the person has a color vision deficiency that lowers the perceived contrast even further. People with low vision often have difficulty reading text, identifying buttons that do not contrast with their background, or determining the state of UI components. Why contrast ratio mattersĮnsuring adequate contrast makes it easier for everyone to read text content, interpret graphical elements, identify UI components, and notice when those components change state. You can also watch a short video to learn more about the Color Contrast Analyzer. All other color combinations fall somewhere in between. Identical colors have the lowest possible contrast ratio, 1:1. Black and white have the highest possible contrast ratio, 21:1. In general, higher contrast ratios make text and graphics easier to perceive and read.

The Color Contrast Analyzer is a feature in Accessibility Insights for Windows that helps developers investigate contrast ratios.Ĭontrast ratio describes the relative brightness of foreground and background colors on a computer display. Color Contrast Analyzer in Accessibility Insights for Windows What is the Color Contrast Analyzer?

Contrast checker ui