Color Contrast: Calculate the Ratio Between Two Colors

To calculate contrast between two colors, convert each color’s sRGB red, green, and blue values to linear light, calculate its relative luminance, then divide the lighter luminance plus 0.05 by the darker luminance plus 0.05. Enter each color as its three 8-bit RGB channel values (0–255); the calculator returns the contrast ratio, where 1:1 is no difference in luminance and 21:1 is the maximum for black and white.

Formula

The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). L is relative luminance on a scale from 0 for black to 1 for white. The ratio is written as a number such as 4.50:1; it has no physical unit.

For each sRGB channel, first divide its 8-bit value by 255 to get a value c from 0 to 1. Convert that encoded value to linear light c_linear:

• If c ≤ 0.04045, c_linear = c / 12.92.
• Otherwise, c_linear = ((c + 0.055) / 1.055)^2.4.

Then calculate luminance as L = 0.2126R + 0.7152G + 0.0722B, using the linearized red, green and blue channels. The calculator’s compact expression uses the upper branch of the channel conversion, which is exact for the default white and black example; for general inputs, values at or below 0.04045 must use the lower branch. The formula is therefore best applied with the piecewise conversion above when checking arbitrary colors.

Here, R, G and B mean the linearized channel values, not the original 0–255 integers. The coefficients weight green most heavily, followed by red and blue, reflecting the sRGB luminance calculation. Calculate L for both colors, identify the larger and smaller values, and put them into the ratio in that order.

Worked Example

The default first color is RGB (255, 255, 255), or white; the second is RGB (0, 0, 0), or black.

• White channels: 255 / 255 = 1, so each linear channel is 1. Its luminance is 0.2126(1) + 0.7152(1) + 0.0722(1) = 1.
• Black channels: 0 / 255 = 0, so each linear channel is 0. Its luminance is 0.
• Contrast ratio: (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21.00:1.

The calculator’s first output is the ratio itself, rounded to two decimal places. The piecewise formula and the calculator expression agree for these defaults.

What the Contrast Ratio Tells You

A larger ratio means a bigger difference in luminance between the two colors. The ratio does not tell you which color is lighter unless you inspect the colors or calculate their luminances separately. Reversing the order of the colors does not change the ratio, because the lighter luminance always goes on top.

Contrast ratio is useful when choosing text and background colors, checking interface elements, or comparing foreground and background combinations. The calculation concerns the two specified colors; it does not account for font weight, viewing conditions, surrounding colors, or how a person perceives hue.

How to Enter Colors Correctly

Use the RGB channel values for the actual foreground and background colors. For a CSS hex color such as #336699, split it into pairs: 33 is red, 66 is green, and 99 is blue. Convert each hexadecimal pair to decimal before entering it: RGB (51, 102, 153). If a color picker provides percentages, convert each percentage to a 0–255 value by multiplying by 2.55.

• Enter each channel as a whole number from 0 through 255.
• Do not enter a hex string, an RGB triplet, or a percentage into a single channel field.
• Calculate the pair that will actually appear together. Text on a translucent layer may blend with the background, so the final composited color matters.
• Keep enough precision during the luminance calculation; round the final ratio for display rather than rounding intermediate channel values.

Common Misconceptions and Limits

Contrast is not the same as color difference. Two colors can have different hues yet similar luminance, producing a low ratio; for example, saturated red and green may look distinct to some viewers but still provide limited luminance contrast. Conversely, shades of gray can have strong contrast even though they have no hue difference.

The ratio is not a complete measure of readability or accessibility. It does not assess color-only cues, small graphical details, glare, font legibility, or individual vision. For accessibility decisions, check the applicable guidance and evaluate the complete design, not just a single number. Also ensure that the calculation uses sRGB values: other color spaces and image formats require the appropriate conversion before this formula applies.

Frequently Asked Questions

What is a good contrast ratio for text?
For web accessibility checks, commonly referenced WCAG 2.2 criteria use at least 4.5:1 for normal text and 3:1 for large text at Level AA. These thresholds are criteria for specified content and conditions, not a guarantee that every combination will be easy for every reader.

What is the highest possible contrast ratio?
For the relative-luminance formula, the maximum is 21:1, achieved by white (luminance 1) against black (luminance 0): (1.05 / 0.05) = 21.

Does color order affect the result?
No. The formula always places the lighter color’s luminance in the numerator and the darker color’s luminance in the denominator. Swapping foreground and background leaves the ratio unchanged.

Can I calculate contrast from a hex color?
Yes. Convert each two-character hex pair to decimal RGB, then use the three values as the color’s red, green and blue channels. For example, #336699 converts to (51, 102, 153).

Why can two bright-looking colors have a low contrast ratio?
Brightness in ordinary speech is not the same as relative luminance. Colors with different hues can have similar luminance, so their ratio can be low even when they look noticeably different side by side.

Related

• Arborvitae Tree Spacing Calculator and Planting Guide
• Two-Way ANOVA Calculator: Formula and Example
• Aluminum Rod Weight Calculator and Formula

in r1 | First color red | - | 255 | 0
in g1 | First color green | - | 255 | 0
in b1 | First color blue | - | 255 | 0
in r2 | Second color red | - | 0 | 0
in g2 | Second color green | - | 0 | 0
in b2 | Second color blue | - | 0 | 0
out contrast | Contrast ratio | :1 | (max(0.2126*((r1/255+0.055)/1.055)^2.4+0.7152*((g1/255+0.055)/1.055)^2.4+0.0722*((b1/255+0.055)/1.055)^2.4,0.2126*((r2/255+0.055)/1.055)^2.4+0.7152*((g2/255+0.055)/1.055)^2.4+0.0722*((b2/255+0.055)/1.055)^2.4)+0.05)/(min(0.2126*((r1/255+0.055)/1.055)^2.4+0.7152*((g1/255+0.055)/1.055)^2.4+0.0722*((b1/255+0.055)/1.055)^2.4,0.2126*((r2/255+0.055)/1.055)^2.4+0.7152*((g2/255+0.055)/1.055)^2.4+0.0722*((b2/255+0.055)/1.055)^2.4)+0.05) | 2