contrast-color() ships in Safari Technology Preview

Chris Coyier Chris Coyier on

When I first looked at the new color contract function in CSS, the words were reversed, so that’s notable. It’s contrast-color() now, and starting it’s life in Safari Technology Preview. Now it only takes one argument, a color, and you get back either black or white (rather than providing your own color choices). Once this makes it’s way to a browser support level you’re comfortable with, it seems like a nicely low-effort way to ensure an accessible color to sit on top of an unknown background, so long as that background is a solid color. Except that it’s using the WCAG 2 algorithm to make the choices, and it has some notable limitations, including literally make the wrong call. But it’s possible the underlying algorithm gets updated to APCA, which seems much smarter, doing things like factoring in size and weight, but it’s unclear if browsers will ever be allowed to use it Because Drama™.

Wanna learn Accessibility deeply?

Frontend Masters logo

We have a great course on accessibility from Jon Kuperman of Cloudflare. You'll learn how to make your websites more accessible to a wider audience. And if you want to make your React apps more accessible, we've got that too!

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.