Enter the relative luminance of the lighter color and relative luminance of the darker color into the calculator to determine the contrast ratio.
- All Miscellaneous Calculators
- Scale Resolution Calculator (Resolution to Scale Conversion)
- Resolution Calculator
Contrast Ratio Formula
The following formula is used to calculate a contrast ratio.
cr = (L1+.05) / (L2 + .05)
- Where cr is the contrast ratio (typically written as cr : 1)
- L1 is the relative luminance of the lighter color (L1 ≥ L2)
- L2 is the relative luminance of the darker color
The relative luminance of the lighter color refers to the luminance of that color on a scale where 0 is black and 1 is reference white (as defined for the color space being used, commonly sRGB in accessibility guidelines).
The relative luminance of the darker color is the same type of value (0 to 1), but for the darker of the two colors being compared.
What is a Contrast Ratio?
In this calculator, the contrast ratio is the WCAG-style color contrast between two colors (for example, text and its background) based on their relative luminances. It is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.
The value ranges from 1:1 (no contrast) up to 21:1 (black on white). Higher ratios generally improve readability and are commonly used in accessibility requirements for text and user interface elements. Note that this is different from a display’s “native contrast ratio” specification, which describes hardware performance.
Example Problem
How to calculate contrast ratio?
- First, determine the relative luminance of the light color.
The relative luminance is found to be .215.
- Next, determine the relative luminance of the darker color.
For this example, the luminance is found to be .125.
- Finally, calculate the contrast ratio.
Using the formula, the contrast ratio is found to be (.215 + .05) / (.125 + .05) = .265/.175 = 1.514 : 1.
Frequently Asked Questions
What does “relative luminance” mean in the context of contrast ratio?
Relative luminance is a standardized measure of a color’s perceived brightness on a 0 (black) to 1 (reference white) scale. In the WCAG contrast formula, you compare the luminances of two colors (the lighter one is L1 and the darker one is L2).
Why is a high contrast ratio important?
A higher color contrast ratio generally makes text and important UI elements easier to distinguish from their backgrounds, improving readability and accessibility—especially for users with low vision or when viewing in poor lighting.
Can the contrast ratio affect the energy consumption of a display?
The WCAG-style contrast ratio between two colors does not, by itself, determine power use. Energy consumption depends on the display technology and brightness. For example, on many OLED displays, darker pixels often use less power than bright pixels, so dark themes can reduce power use even when contrast is high.
How can I improve the contrast ratio?
To improve the color contrast between two colors, choose a lighter foreground on a darker background (or vice versa) so the relative luminances are farther apart. If you meant a display’s hardware contrast ratio specification, that is largely fixed by the panel technology (though calibration settings can affect perceived contrast).
