Skip to main

OddContrast

Color contrast checker with Oklch, Oklab, P3, and more

by OddBird since

OddContrast is a color format converter, featuring 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.

Try OddContrast »

Support for Newer Color Formats and Spaces

Copy permalink to "Support for Newer Color Formats and Spaces"

In additional to Oklch, Oklab, and P3, OddContrast also includes hex, HSL, Lab, LCH, and sRGB. Enter a color from the available color formats and convert it to any other supported format. OddContrast provides an alert if the color you entered is out of gamut for a given color space. Adjust the sliders until your desired color is back in gamut.

[画像:Oklab purple color showing a message next to sRGB Formats that says Selected color is outside the sRGB gamut with a link to more detailed information]

Contrast Checker for Accessibility

Copy permalink to "Contrast Checker for Accessibility"

OddContrast checks the contrast ratio between two colors and displays pass or fail information based on the WCAG 2 accessibility standards for AA and AAA in normal and large font sizes. If you need a reminder of the contrast ratio requirements or what font size qualifies as large, OddContrast provides helpful tips and a link to learn more.

[画像:showing a purple background color and a peach foreground color with a 3.95:1 contrast ratio failing for AA Normal, AAA Normal, and AAA Large font sizes, but passing for AA Large font size]

What New Features Should OddContrast Have?

Copy permalink to "What New Features Should OddContrast Have?"

OddContrast is still in development. Let us know if you have a favorite feature you’d like to see in OddContrast. To receive updates when new features arrive, sign up for OddNews.

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for Alice Boxhall Open Collective Avatar for Schepp Open Collective Avatar for Thijs Open Collective Avatar for Anonymous Open Collective Avatar for Nicolas Chevobbe Open Collective Avatar for Roman Komarov Open Collective Avatar for Luke Warlow Open Collective Avatar for Paul van Buuren Open Collective Avatar for William Killerud Open Collective Avatar for Nikita Dubko Open Collective Avatar for Mat Marquis Open Collective Avatar for Johannes Open Collective Avatar for Eric Portis Open Collective Avatar for Outline GbR Open Collective Avatar for Sophie Open Collective Avatar for Ashur Cabrera Open Collective Avatar for Tiara Rodney Open Collective Avatar for Pelle Wessman Open Collective Avatar for Jens Grochtdreis Open Collective Avatar for Lynn Fisher Open Collective Avatar for Pascal Duez Open Collective Avatar for Tyson Gach Open Collective Avatar for The Outfit, Inc. Open Collective Avatar for Mayank Open Collective Avatar for thanks.dev Open Collective Avatar for Syntax

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

Donate to our collective

OddContrast Posts

  1. OddContrast displays P3 gamut range in Oklch color format
    Article post type

    Make the Web a More Colorful Place!

    A guide to using new color spaces & formats with OddContrast

    by OddBird on

    OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.

    see all Article posts
  2. OddContrast displays sRGB gamut range in P3 color format and an estimate of foreground alpha value ratio.
    Article post type

    New Features for OddContrast

    Display color gamut ranges and more

    by OddBird on

    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.

    see all Article posts

Level Up Your CSS

Get free cutting-edge demos in your inbox! Grid & layouts with Miriam Suzanne, anchor positioning with James Stuckey Weber, and more! Peruse archive

AltStyle によって変換されたページ (->オリジナル) /