Free Contrast Ratio Calculator

What Is a Color Contrast Ratio?

The color contrast ratio is an objective numeric measure of the difference in perceived brightness between two colors—usually the foreground text and the background behind it. It is calculated from the relative luminance of each color and yields a value between 1 (no contrast) and 21 (maximum contrast, like black text on a white background). This metric sits at the heart of the WCAG contrast checker standards and is essential for anyone building an accessible website or application.

For instance, yellow text on a white background produces a very low ratio because both hues have similar luminance, making the content hard to read for many people. Swap the background to black, and the ratio skyrockets, improving legibility dramatically. The human perception of brightness is subjective, but the contrast ratio removes personal bias by providing a single, repeatable benchmark.

Relative Luminance: The Core Component

Relative luminance (RL) normalizes how bright a color appears within a given color space, most commonly sRGB. To compute it, the sRGB channel values must be linearized (gamma decoded) and then weighted according to the eye’s sensitivity to each primary:

$$RL = 0.2126 \cdot R + 0.7152 \cdot G + 0.0722 \cdot B$$

Here $R$, $G$, and $B$ are the linear sRGB components scaled from 0 to 1. The coefficients reflect that green contributes most to perceived brightness, red less, and blue the least. Note that “brightness” is a subjective impression, whereas relative luminance is an objective, quantifiable value.

How the Contrast Ratio Is Calculated

The WCAG‑specified formula for the contrast ratio is:

$$\text{Contrast ratio} = \frac{RL_{\text{lighter}} + 0.05}{RL_{\text{darker}} + 0.05}$$

Where:

• $RL_{\text{lighter}}$ is the relative luminance of the brighter color (higher value),
• $RL_{\text{darker}}$ is the relative luminance of the darker color (lower value),
• $0.05$ is a constant that models ambient light contribution.

If you already know the relative luminance of both colors, applying this formula gives you the contrast ratio directly. If you only have the color codes (HEX, HSL, sRGB, etc.), you must first convert them to sRGB and then compute the RL values using the linearization and weighting steps described above. Doing this manually for many color pairs can be tedious, which is why a dedicated color contrast checker automates the entire workflow.

WCAG Conformance Levels: What Is a Good Ratio?

The Web Content Accessibility Guidelines define two conformance tiers:

• AA (minimum)
  • Standard text (smaller than 18 pt or 14 pt bold): at least 4.5 : 1
  • Large text (18 pt or larger, or 14 pt bold and larger): at least 3 : 1
• AAA (enhanced)
  • Standard text: at least 7 : 1
  • Large text: at least 4.5 : 1

These thresholds ensure that content remains readable for users with moderate vision loss, color vision deficiencies, or uncorrected refractive errors. A good color ratio calculator will instantly compare your result against these levels and tell you whether the combination passes.

Using the Color Contrast Checker Online

This accessibility color checker offers two input modes to match your workflow:

1. From color codes – Choose the color model (sRGB, HEX, HSL, etc.), enter the values for the foreground and background colors, and select the text type (standard or large). The tool returns the contrast ratio and a clear pass/fail indicator for WCAG AA and AAA.
2. From relative luminance – Switch to the RL mode, input the two numeric luminance values, and the calculator determines which is lighter before applying the formula. The result is displayed alongside the same conformance message.

Beneath the main result, you can also view the computed relative luminance of each color, helping you understand why a particular combination performs the way it does.

Color Contrast Ratio vs. Display Contrast Ratio

Although the terms are sometimes used interchangeably, the color contrast ratio used in web accessibility and the contrast ratio quoted for monitors and projectors are different metrics. Web contrast is based on relative luminance and is capped at 21 : 1. Display contrast compares the brightest white to the darkest black the hardware can produce and can reach values like 1,000,000 : 1. The tool you are using here is exclusively a web accessibility tool that follows the WCAG method.

Conclusion

Whether you are a developer, designer, or content creator, checking color combinations against accessibility standards is a critical step in building inclusive digital products. This Contrast Ratio Calculator (or WCAG contrast checker) streamlines the process by converting arbitrary color inputs into a reliable ratio and comparing it to the official WCAG thresholds. It removes guesswork and ensures your design choices meet the needs of the widest possible audience.