Detect low color contrast issues
Low color vision is very common, and your choice of text and background colors can negatively impact people's experience of your website. What seems legible to you might not be for everyone.
DevTools comes with a number of features to help you detect possible color contrast issues:
-
You can simulate various color vision deficiencies ➡️ Simulate color vision deficiencies.
-
You can get color contrast ratios on hover, when using the inspect tool ➡️ See quick accessibility information on hover.
-
In Chrome and Edge, you can list all contrast issues at once with the CSS Overview tool.
- Open the Command Menu: ctrl+shift+P (or cmd+shift+P on mac).
- Click Capture overview.
- Click the Colors tab in the sidebar and scroll down to the Contrast issues section.
-
In Firefox, you can find all contrast issues too, using the Accessibility panel.
- Open the Accessibility panel from the toolbar.
- In the Check for issues drop-down, select Contrast.
- Click each item in the table and review the color contrast ratio.
