What has been an audit in Chrome via Lighthouse has made its way into the latest version of Firefox. The feature is still in beta but provides an easy way to quickly check a page for color pairings that do not meet the WCAG standards for color contrast.
Color contrast is an important part of accessibility as it makes text easier to read for everyone, not just those with impairments.
To run the audit open the developer tools (F12) -> click Accessibility in the developer tools menu -> click Turn On Accessibility Features, if necessary, and finally click contrast in the sub-menu at the top under "Check for issues".
Once the audit has completed you can see which text does not meet the standard and details about why such as the colors used and the ratio of those colors.
Happy testing!
Top comments (2)
That's a tough one, I definitely get what you are going for.
I think there are generally ways to make the call to action more noticeable without reducing contrast such as: Making the main CTA background the primary color with light text and the secondary action a light/white background with a "lighter" text that still passes the standard. That'd make the main action pop out as the thing to do.