Make the Web a More a Colorful Place!
A guide to using new color spaces & formats with OddContrast
OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.
Article
post type
New Features for OddContrast
Display color gamut ranges and more
OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.
This OddContrast update was originally published in OddNews, our newsletter for designers and developers who want the latest in front-end web development and design.
Subscribe to OddNews to stay up-to-date on our OddTools and OSS contributions.
New Features for OddContrast
Copy permalink to “New Features for OddContrast”If you haven’t checked it out, OddContrast is OddBird’s color format converter, with newer color formats like Oklch, Oklab, and the Display P3 color space. It’s also a color contrast checker to help designers meet WCAG 2 accessibility standards.
In March, we released several new features:
- Swap background and foreground colors. Either drag-and-drop or use the button located between the two colors.
- A new Show Gamut dropdown menu allows displaying color gamut ranges on the color sliders. And we’ve made it more obvious when a color is outside the specified gamut.
- Contrast ratios now incorporate foreground color alpha values. Ratios displayed are an estimation of contrast when the foreground color is not opaque.
Recent Articles
Article post typeUpdates to Popover and CSS Anchor Positioning Polyfills
hintpopovers,position-areaand moreWe have been busy updating the Popover and CSS Anchor Positioning Polyfills, but there is still more we can do with your help.
Article post typeCustom CSS Functions in the Browser
Start using author-defined functions
There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium ‘Canary’ (v136+) browsers with the experimental platform features flag enabled. Author-defined Functions are coming to CSS, and you can start to experiment with them…
