Contrast Ratio Calculator

This contrast ratio calculator, also known as a color contrast checker or accessibility color checker, is perfect for anyone trying to build an accessible website or application or curious to learn how to check the color contrast ratio between two colors. If you want to learn more about color contrast ratio, accessibility conformance levels, or what a good contrast ratio is, you are in the right place.

Keep reading to dive deeper into the beautiful world of web content accessibility!

You've been browsing the internet for hours searching for a particular question, and you finally found a page that seems to be able to answer it. You click on the link and load the page, but to your dismay, you cannot read any of its content. It turns out that the person who created the page thought it would be a good idea to write all of its content in a brightly colored yellow on a white background. Clearly, they had never heard of the concept of a color contrast ratio.

In simple terms, the color contrast ratio measures how bright the text color is compared to the background. The smaller the difference between the text and background brightness, the harder it will be for people to read. In our example above, white and yellow are very close in brightness, making it hard to read. However, if we change the background to black, reading the text will suddenly become a much more pleasant experience. That is because we have now increased the difference (the color contrast ratio) between the text and the background color.

In extreme cases, such as the one in the example above, knowing that the color combination will make it hard to read might not be all that difficult. However, what about when you want to use different tones of the same color or when you are not going to use either black or white? How do you know when your dark or bright color is dark or bright enough? Not everyone in the world sees colors in the same way. For some, a change in hue and saturation might mean nothing regarding legibility, while for others, it might be like going from yellow on white to yellow on black. This is where the color contrast ratio comes in.

The color contrast ratio objectively measures how bright or dark a particular color is in relation to another. Using it, you can avoid your personal biases regarding color and brightness perception and go directly to the point: is your contrast ratio good or not from an accessibility standpoint? Standardized to give out values between 1 and 21, the color contrast ratio will promptly give you the answer, where numbers closer to 1 mean that you have a poor contrast ratio, and numbers closer to 21 mean that you have a good contrast ratio.

Depending on your information about the two colors at hand, the answer to the question "How do I calculate the contrast ratio between two colors?" might vary slightly.

If you already know the relative luminance of both colors, then the answer to how to calculate the color contrast ratio is straightforward. All you have to do is divide the relative luminance of the lighter color by the relative luminance of the darker color, such that:

where:

• $\rm RL1$ — Relative luminance of the lighter color (higher value);

• $\rm RL2$ — Relative luminance of the darker color (lower value); and

• $0.05$ — A constant used to weigh the contribution from ambient light to the measurements of $\rm RL1$ and $\rm RL2$.

  To learn more about how light is measured, check out our lumen to lux to candela calculator.

If you don't know the relative luminance of the colors, you will need to do some extra calculations to find it. Firstly, you must find out whether you are already using the sRGB colorspace. If you are, you can see the relative luminance (RL) by inputting your values in the following equation:

where $R$, $G$, and $B$ are defined as:

Once you find the relative luminance for both the lighter and darker colors, you can input those values in our initial equation:

In essence, these equations normalize, linearize, and gamma correct the sRGB values so that their weighted sum can be used to find their relative luminance. The weights (0.2126, 0.7152, and 0.0722) are derived from the standard coefficients for the perception of brightness in the human visual system. These coefficients reflect the sensitivities of the eye's cones to red, green, and blue light.

As you may imagine, it can become quite tiresome to do all of these equations by hand, particularly if you want to calculate the contrast ratio of multiple color combinations. So, since you already know how to calculate the color contrast ratio between two colors on paper, why not let our color contrast checker do the job from now on?

If you are not using the sRGB colorspace, things get a little trickier as this means before you engage in any of the equations above, you need to convert whatever color model you have at hand to the sRGB colorspace. The equations required for this will vary depending on your current color model. As there are multiple color models out there, making a list of the various equations related to them would make this text rather long and cumbersome. As such, we will ask you to trust us and stick to the color contrast ratio calculator's wonderful built-in color model converter.

Yes and no. Both color contrast ratio and contrast ratio are the same: the ratio between the lightest and darkest colors displayed. However, they are typically associated with different contexts and, consequently, are measured differently.

Color contrast ratio is predominantly associated with web design, ensuring sufficient contrast between text or graphics and their backgrounds for readability and accessibility. It adheres to a standardized measuring method, typically ranging from 1 to 21.

Contrast ratio, on the other hand, is most frequently found in the realm of TVs and projectors, emphasizing the difference in brightness between the brightest and darkest shades the display can render. Unlike color contrast ratio, there isn't a universally accepted measuring approach for contrast ratio, resulting in values varying widely, ranging from 1 to 100 to as high as 1 to 1,000,000, depending on who is measuring it.

To learn more about TVs and projectors and how to set them up in the best way possible, check out our tv mounting height calculator and our projector calculator. If you are feeling a bit crafty, you might also want to visit our smartphone projector calculator and learn how to set up a smartphone projector.

A good contrast ratio must be at least 4.5:1 for standard text and 3:1 for large text. To achieve even better results, you can aim for contrast ratios of at least 7:1 for standard text and 4.5:1 for large texts.

With this color contrast ratio calculator, finding out what the contrast ratio is couldn't be easier. Whether you have the relative luminance of your colors or only their color codes, we've got your back! Pick your situation and follow the steps below:

I know the color codes:

1. Select your color model from the Color model drop-down list.

2. Input the values for the lighter and darker colors in the corresponding fields. You can do it however you prefer; this will not influence your result.

3. Select your type of text from the 'Type of text` drop-down list. Remember: standard text is any text smaller than 18 pt or 14 pt bold, and large text is anything equal to or greater than those values.

4. That's it! Now, you can check the color contrast ratio of your text and background in the Contrast ratio field. Right underneath it, you will also see a message saying whether that value agrees with the WCAG guidelines.

If you are curious about the relative luminance of the selected colors, go to the Relative luminance section of the calculator to check out their values.

I know the relative luminance:

1. Click on the I know the relative luminance option at the top of the calculator.

2. Input the relative luminance values for your colors. Don't worry if you mistakenly input the darker color values in the lighter color field or vice versa. Omni's contrast ratio calculator will know how to deal with the situation!

3. Select your type of text from the drop-down list. Remember that standard texts are any text smaller than 18 pt or 14 pt (bold). Select 'large text' if your text is equal to or greater than that value.

4. Done! Now, you can appreciate the result in the Contrast ratio field. Below the result, you can also read a message stating whether it is a good contrast ratio for accessibility.