Omni calculator
Last updated:

Contrast Ratio Calculator

Table of contents

What is a color contrast ratio?How do I calculate the color contrast ratio between two colors?Is contrast ratio the same as color contrast ratio?What is a good contrast ratio?How do I check the color contrast ratio with the color contrast checker?FAQs

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!

What is a color contrast ratio?

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.

ğŸ”Ž Do you keep hearing the term ratio being thrown around and are unsure about what it means? Then maybe you should check out our ratio calculator to learn more about it and fully delve into the myriad of ways it can be applied.

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.

🙋 We use both brightness and relative luminance interchangeably throughout the text for simplicity. However, they do not mean the same thing. Brightness is an entirely subjective measurement that will vary from person to person. Relative luminance, on the other hand, is an objective and numerical measurement of how bright a specific object (or color) is.

How do I calculate the color contrast ratio between two colors?

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:

contrastratio=RL1+0.05RL2+0.05\footnotesize \begin{gather*}\rm contrast\\\rm ratio\end{gather*} = \frac{\text{RL1} + 0.05}{\text{RL2} + 0.05}

where:

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

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

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

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

🙋 The relative luminance is a value that measures the relative brightness of any point in a color space. Usually, this value is normalized to numbers between 0 and 1, with 0 being the darkest black and 1 being the lightest white.

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:

RL= 0.2126⋅R+0.7152⋅G+0.0722⋅B\footnotesize \begin{split} \text{RL} =\ &0.2126 \cdot R + 0.7152 \cdot G\\ &+ 0.0722 \cdot B \end{split}

where RR, GG, and BB are defined as:

 ⁣R={RsRGB12.92if RsRGB≤0.04045(RsRGB+0.0551.055)2.4otherwise\!\scriptsize R\! =\! \begin{cases} \frac{R_{sRGB}}{12.92} & \text{if } R_{sRGB} \leq 0.04045 \\[.6em] \left(\frac{R_{sRGB}+0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases}
 ⁣G={GsRGB12.92if GsRGB≤0.04045(GsRGB+0.0551.055)2.4otherwise\!\scriptsize G\! =\! \begin{cases} \frac{G_{sRGB}}{12.92} & \text{if } G_{sRGB} \leq 0.04045 \\[.6em] \left(\frac{G_{sRGB}+0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases}
 ⁣B={BsRGB12.92if BsRGB≤0.04045(BsRGB+0.0551.055)2.4otherwise\!\scriptsize B\! =\! \begin{cases} \frac{B_{sRGB}}{12.92} & \text{if } B_{sRGB} \leq 0.04045 \\[.6em] \left(\frac{B_{sRGB}+0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases}

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

contrastratio=RL1+0.05RL2+0.05\footnotesize \begin{gather*}\rm contrast\\\rm ratio\end{gather*} = \frac{\text{RL1} + 0.05}{\text{RL2} + 0.05}

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.

Is contrast ratio the same as color contrast ratio?

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.

What is a good contrast ratio?

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.

How do I check the color contrast ratio with the color contrast checker?

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.

FAQs

Who came up with the accessibility conformance levels?

The accessibility conformance levels found within the Web Content Accessibility Guidelines (WCAG) are developed and maintained by the Accessibility Guidelines Working Group (AG WG), which is part of the Web Accessibility Initiative (WAI) that operates under the World Wide Web Consortium (W3C).

Is a higher contrast ratio better?

Yes, when it comes to color contrast ratio, the higher it is, the easier it will be for people to read your content. The highest possible contrast ratio is 21:1, which you can obtain with a black-and-white combination.

How do I calculate the color contrast ratio?

To find out what is your contrast ratio, you need to:

  1. Find the relative luminance of the colors at hand.

  2. Divide their values according to the following equation:

    contrast ratio = (RL1 + 0.05) / RL2 + 0.05)

  3. That's it! You now know what the contrast ratio is!

What is the difference between a contrast ratio AA and AAA?

According to the WCAG, an AA contrast ratio is the minimum required contrast ratio for it to be considered accessible. AAA is given to contrast ratios that go beyond this minimum. That means reaching at least 7:1 for standard text or 4.5:1 for large texts.

According to the WCAG, you have a AAA level of conformance. Congratulations!

Relative luminance

Check out 27 similar photo and video calculators 📷
3D render timeAspect ratioBlink-free photos...24 more