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.
For years designers and developers were limited to colors in the sRGB colors space, using formats like hexadecimal, RGB, and HSL. As display technology progressed, so too has CSS, and we have access to additional color spaces and wider gamuts. These advances led us to build OddContrast, a color editing and testing tool that handles our new world of modern color formats.
Although it looks simple on the surface, OddContrast has many built-in conveniences when working with color.
The default color format is display-p3 but you can select from the following
options:
Regardless of chosen color display format,
you can use any valid CSS notation to enter foreground and background colors.
For instance, you can use decimals in oklch(.44 0.1 295)
even though the default is set to display the lightness value as a %.
You can even used named colors! Here’s honeydew as the foreground color.
While not valid CSS notation, OddContrast also accepts 6 and 8-digit Hex
colors without the #.
This flexibility is helpful when coming from design tools as they
often will not include the full color notation.
To streamline your color-editing tasks, OddContrast includes several helpful features. For starters, you can edit a single component of a color by using the visual sliders. These change depending on the color format you’ve selected. For instance, if Oklab is selected, the first slider controls the lightness (L). The next two sliders show options from green to red (A) and blue to yellow (B). The last slider sets the Alpha value and is consistent across all color formats. Additionally, you can use your keyboard arrow keys to nudge the color values incrementally when focused.
Need to swap the foreground and background colors? No problem – select the left-right arrow icon button or you can drag and drop the color swatches themselves.
Once you are happy with your colors, you can easily copy your preferred color notation to the clipboard with a single click.
OddContrast allows you to choose whether or not to display a color gamut for visual reference, and if so, which specific gamut you’d like to see. Once a gamut is selected, the color sliders will display the “in-gamut” boundaries and will update with the color values. To preview this, select the sRGB option in the “Show Gamut” field, edit the color sliders and see how every shift in color will affect the other channels.
If your color is outside the selected gamut, a warning will be displayed over the swatch. A separate warning will appear near the color notations for each affected color space regardless of your gamut display setting.
OddContrast automatically updates the URL as you make changes to the colors. This dynamic URL allows you to easily share color combinations with others or bookmark them for your own future use.
Using the WCAG 2 contrast ratio requirements, OddContrast displays a pass or fail message for meeting the minimum (Level AA) and enhanced (Level AAA) values for normal and large text. A warning is shown if the the colors include an alpha value lower than one as WCAG 2 does not account for transparency.
OddContrast approximates a ratio by premultiplying a semi-transparent foreground color in the sRGB space. In practice, the displayed foreground color may vary depending on the display and browser.
Without knowing what is behind a background color with transparency, OddContrast cannot estimate the contrast ratio. If the background color is not opaque, the contrast ratio is computed without background or foreground opacity.
To add some whimsy, OddContrast proudly showcases your chosen color combination within its very own logo.
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.