 Low contrast text is the most common accessibility issue. Roughly 1 in 20 people suffer from a color vision deficiency. Such impairments make it harder to tell different colors apart, which can amplify contrast issues. Here is how you can discover and fix low contrast issues with DevTools. Let's start with inspecting the text. The inspect mode tool tip shows the current contrast ratio of the text and a warning icon next to it to indicate that it is low contrast. Let's further examine that in the styles pane. Click on the color preview to open the color picker. There is a warning icon next to the contrast ratio here as well. Expand the contrast ratio section. Here, it shows you the minimum contrast ratio to meet the AA and AAA guidelines. To learn more about the color contrast guidelines, click on the link. There are two ways to fix the issues with DevTools. You can fix it by clicking on the suggested color, or you can use the recommended contrast line to manually fix it. The first line indicates the AA guidelines. Select any color below this line to meet the minimum recommendation. The second line indicates the AAA guidelines. Select any color below this line to meet the enhanced recommendation. It is tedious to go through each element on the page to check the contrast ratio. The CSS Overview panel can help you detect all the low contrast text of your page. Watch my previous tip to learn more about the CSS Overview panel. If your page supports both light and dark themes, you can emulate the theme via the rendering tab and generate the CSS Overview for each theme to detect if there is any theme-specific low contrast issues. By the way, DevTools has an experimental feature to automatically detect low contrast issues on your page. Go to Settings, Experiments, and enable the Automatic Contrast Reporting Experiment. Reload DevTools and open the Issues tab. The low contrast issues are now reported automatically. Expand the affected resources and click on it to highlight the elements on screen. Apart from that, DevTools can help you understand visual impairments by letting you simulate color vision deficiencies on your web app. Open the Rendering tab, scroll down to the Emulate Vision Deficiencies option. DevTools can emulate blurred vision and other color vision deficiencies. For example, Protonopia is the inability to perceive any red lights. Select that and observe. The color contrast of the text is even worse now. It is almost unreadable. To learn more about fixing low contrast text in DevTools, go to guu.gear-devtools-fig-contrast. See you for the next DevTools tip. Bye!