OddContrast

Check the contrast ratio between two colors

Background Color

sRGB FORMATS

  • #132b77
  • hsl(225.32 72.998% 26.999%)
  • rgb(7.2902% 16.931% 46.708%)

UNBOUNDED SPACES

  • lab(20.066 15.541 -47.052)
  • lch(20.066 49.553 288.28)
  • oklab(32.588% -0.01047 -0.13291)
  • oklch(32.588% 0.13332 265.49)

Foreground Color

sRGB FORMATS

  • #ffa8c1
  • hsl(342.62 99.964% 82.995%)
  • rgb(99.994% 65.996% 75.842%)

UNBOUNDED SPACES

  • lab(78.27 35.199 1.0097)
  • lch(78.27 35.213 1.6432)
  • oklab(82.41% 0.10608 0.00157)
  • oklch(82.41% 0.10609 0.84891)

Known Color Issues

  • Gamut Mapping Implementation

    Browsers implemented gamut mapping using clipping, which is fast but provides inferior results compared to the algorithm defined in the CSS Spec(opens in a new tab). Until browsers are updated, colors that are out of gamut for your screen may be displayed very differently than expected.

  • Checking for Out of Gamut Colors

    The new color features in CSS allow for a much wider range of colors, many of which cannot be shown on many (or any) screens. When selecting colors, consider that most users will see these colors on a display that supports the sRGB or P3 gamut.

    There are two primary ways a color can be out of gamut:

    1. Choosing a color in a space with a wider gamut, especially when a channel is near one of the edges of its range.
    2. Specifying a channel value that is outside its range. While the sliders in this tool set hard boundaries, values outside these boundaries are still valid, and can be entered in the text input.

    When a color is out of gamut for the user's screen, the browser will adjust the color to be in gamut.

  • Background Color Alpha Values

    WCAG 2 contrast does not consider alpha values. Because we don't know what is behind your background color, we can't estimate the contrast. If the background color is not opaque, the contrast ratio is computed without background or foreground opacity.

  • Foreground Color Alpha Values

    WCAG 2 contrast does not consider alpha values, but we can approximate 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.