Discover and fix low contrast text with DevTools #DevToolsTips

Key Takeaways

[Music] 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 slow contrast issues with depth tools let's start with inspecting the text the inspect mode 2 tip shows the current contrast ratio of the text and the 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 available 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 team 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 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 blood 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 dev tools go to good.gear devtools dash page contrast see you for the next devtools tip bye [Music] you