
If it only had one checkmark, that would mean it met the minimum recommended contrast ratio (AA).Ĭlick Show More to expand the Contrast Ratio section. In Figure 5, the two checkmarks next to 4.61 means that this element meets the enhanced recommended contrast ratio (AAA). Inspecting the contrast ratio of the highlighted h1 element In other words, if your text is grey with a white background, that's hard for anyone to read.įigure 5. Improving the color contrast of your text elements makes your site more usable for all users.

See Color and contrast to learn more about how contrast ratio affects accessibility. Increasing the contrast ratio of text elements makes your site more accessible to users with low-vision impairments or color-vision deficiencies. The Color Picker now shows you the contrast ratio of text elements. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility treeĬheck out Rob Dodson's A11ycast on labeling below to see the Accessibility pane in action. Use the Accessibility pane on the Elements panel to investigate the accessibility properties of the currently-selected element.įigure 4. Use the new Accessibility pane to inspect the accessibility properties of an element, and inspect the contrast ratio of text elements in the Color Picker to ensure that they're accessible to users with low-vision impairments or color-vision deficiencies. The Changes tab # New accessibility tools Track changes that you make locally in DevTools via the new Changes tab.įigure 3. Whenever you make a change in DevTools, that change gets saved to your local repository, too. DevTools automatically maps network resources to a local repository. Edit the HTML file in the Sources panel instead. If you edit CSS in the Styles pane, and the source of that CSS is an HTML file, DevTools won't save the change.DevTools doesn't save changes made in the DOM Tree of the Elements panel.

Select which directory you want to save your changes to.Īt the top of your viewport, click Allow to give DevTools read and write access to the directory.

