Developer Toolset

Color Contrast Ratio Calculator

Calculate the contrast ratio between two colors to ensure accessibility.

How Color Contrast is Calculated

Color contrast is measured by comparing the relative luminance of two colors — essentially, how much light each one reflects on a scale from 0 (pure black) to 1 (pure white).

The WCAG formula divides the lighter color's luminance plus 0.05 by the darker color's luminance plus 0.05, producing a ratio between 1:1 and 21:1.

A pure white background with pure black text scores the maximum 21:1, while identical colors score 1:1.

Each color's luminance is derived from its red, green, and blue channels after a gamma correction step that accounts for how human eyes perceive brightness.

This calculator handles that math automatically when you enter two hex values.

When to Use Color Contrast Ratio Calculator

Reach for this calculator any time you're picking colors for body text, buttons, form labels, links, or icons on a website or app.

It's especially useful during the early design phase, before you've committed to a palette, because catching a low-contrast pairing in Figma is far cheaper than fixing it after launch.

Developers also use it when reviewing pull requests that change brand colors, when building a design system, or when responding to an accessibility audit.

If your site needs to meet WCAG 2.1 AA or AAA — common for government, healthcare, and education sites — running every text-on-background combination through a contrast check is the fastest way to verify compliance.

Common Mistakes with Color Contrast

One frequent mistake is judging contrast by eye on a calibrated, high-brightness monitor in a dim office.

Users on cheap laptops, glare-filled coffee shops, or aging phone screens will see something very different, and grey-on-white body text that looks elegant to you may be unreadable to them.

Another pitfall is checking only the most prominent text and forgetting placeholder text, disabled buttons, helper copy, or icon-only controls — these often fall well below the 4.5:1 threshold.

Designers also sometimes rely on color alone to signal state, like a red error border, without an accompanying icon or label, which fails users with color blindness even when the contrast ratio technically passes.

Color Contrast Ratio vs Text Size

WCAG splits text into two categories that have different contrast targets.

Normal text — typically anything under 18 points (or 14 points bold) — needs a ratio of at least 4.5:1 to meet AA, or 7:1 for the stricter AAA level.

Large text, defined as 18 points and up (or 14 points bold and up), only needs 3:1 for AA and 4.5:1 for AAA, since bigger letterforms are easier to read even with softer contrast.

Non-text elements like icons, input borders, and focus rings have their own 3:1 minimum under WCAG 2.1.

After running a calculation here, check which category your text falls into before deciding whether the result passes.

From the same team

Turn your GPU into an OpenAI-compatible API endpoint

Wide Area AI routes your LLM API calls to your own hardware over a Cloudflare Tunnel — free local inference with edge caching and automatic cloud failover. Works with any OpenAI SDK.

Start routing — free