Chrome Color Picker
Google Chrome developer tool is very helpful to investigate and fix the contrast ratio on a web page using the color picker option of style. The Color Picker can help you make sure that the text meets recommended contrast ratio levels:1. Open the developer tool in the Chrome browser. (using option right click on page > inspect or pressing F12 button)
2. Click the Elements tab in developer tool.
3. In the DOM Tree, select the text element that you want to inspect.
4. In the Styles pane, click the color square next to the element's color value.
5. Check the Contrast Ratio section of the Color Picker. One checkmark means that the element meets the minimum recommendation. Two checkmarks mean that it meets the enhanced recommendation.
6. Click the Contrast Ratio section to see more information. A line appears in the visual picker at the top of the Color Picker. If the current color meets recommendations, then anything on the same side of the line also meets recommendations. If the current color does not meet recommendations, then anything on the same side also does not meet recommendations.
This is how we fix the contrast ratio issue for low vision people and make a web page accessible for all human beings. Hope this helps you to debug the accessibility issue related to the contrast ratio. please feel free to let us know your experience and if you know any other way to debug and fix the contrast ratio on a web page. Thank you!