Calcuva
DV · Development Engine

WCAG Color Contrast Checker

Test the WCAG contrast ratio between any text and background color. Get instant PASS/FAIL badges for AA and AAA at normal and large text sizes, a live readability preview, and copyable CSS — with mathematically correct relative-luminance math.

Calcuva Analysis
CONTRAST-CHECKER-WCAG TOOL
July 30, 2026

Pick Two Colors

Text on background

#
#

How to use this tool

1
Set Two Colors

Pick a text color and a background color with the color pickers, or type exact 3 or 6 digit hex values.

2
Read the Ratio

See the live contrast ratio (e.g. 4.7:1) and PASS/FAIL badges for AA and AAA at normal and large text sizes.

3
Preview & Copy

Check real sample text on your background, then copy the generated CSS in one click.

Pro Tip

Aim for at least 4.5:1 (AA normal text). To raise contrast without changing your brand hue, just lower the color's lightness.

Contrast Ratio
14.12:1

Large heading text

This is normal body text on the selected background. Readable contrast keeps your content accessible to everyone, including users with low vision.

Small caption · #1a1a2e on #e9e9f0

Level AA
Normal TextPass
needs 4.5:1
Large TextPass
needs 3:1
Level AAA
Normal TextPass
needs 7:1
Large TextPass
needs 4.5:1
color: #1a1a2e;
background-color: #e9e9f0;
/* WCAG contrast ratio: 14.12:1 */

What Counts as Large Text?

WCAG defines large text as 18pt (24px) or larger, or 14pt (about 18.66px) and bold. Large text needs only a 3:1 ratio for AA, while normal text needs 4.5:1.

Aim for AA at Minimum

Level AA is the standard most laws and design systems require. AAA is a stricter goal worth targeting for body copy where readability is critical.

Make Sure Everyone Can Read Your Text

Color that looks crisp on your high-end monitor can be invisible to someone on a sun-lit phone or with low vision. The WCAG color contrast checker removes the guesswork: pick a text color and a background color, and it instantly computes the official contrast ratio and tells you whether the pair passes the accessibility thresholds that browsers, auditors, and the law care about. It is the fastest way to validate a button, a heading, or an entire palette before you ship it.

What the Tool Does

You provide two colors using the native color pickers or by typing hex values (3 or 6 digits, with or without the #). The checker converts each color to its relative luminance, divides the lighter by the darker, and shows the result as a familiar ratio such as 4.7:1. Below the number, four badges light up green or red for the combinations that matter:

  • AA normal text — needs 4.5:1
  • AA large text — needs 3:1
  • AAA normal text — needs 7:1
  • AAA large text — needs 4.5:1

A live preview renders real heading, body, and caption text on your chosen background, so you do not just trust a number — you see the actual readability. A Swap button flips the two colors, and the generated CSS is one click away in the copy box.

The Math, Briefly

The ratio is not a naive subtraction of hex codes. Each sRGB channel is normalized to 0–1, then linearized: if the value is ≤ 0.03928 it is divided by 12.92, otherwise it becomes ((c + 0.055) / 1.055) ^ 2.4. Those linear channels combine into luminance with L = 0.2126·R + 0.7152·G + 0.0722·B — green is weighted heaviest because the eye is most sensitive to it. Finally the contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). The 0.05 represents ambient light bouncing off the screen and keeps the scale honest at the dark end.

A Worked Example

Say your brand uses a slate text color #5a6e8c on a white background #ffffff. White has luminance 1.0. The slate linearizes to roughly 0.156, giving a ratio of (1.0 + 0.05) / (0.156 + 0.05) ≈ 5.1:1. That comfortably passes AA for normal text (≥ 4.5) and passes AAA for large text (≥ 4.5), but it fails AAA for normal text (needs 7:1). The practical takeaway: that slate is fine for body copy under AA, but if your accessibility goal is AAA paragraphs, darken it toward #3f5470, which pushes the ratio past 7:1. The checker shows all of this update live as you nudge the picker.

Tips for Passing Without Killing Your Design

  • Adjust lightness, not hue. Keeping the same hue and dropping a color's lightness raises contrast while preserving your brand feel.
  • Beware mid-tone pairs. Two medium colors of different hues often share luminance and fail; pair a dark with a light instead.
  • Test the worst case. Placeholder text, disabled states, and links over images are the usual offenders — check those, not just the happy path.
  • Large text earns slack. If a heading barely fails AA normal at 4.0:1, remember it may already pass as large text at 3:1.

Once your colors pass, lock in the exact values with the Hex to RGB Converter, and if you are publishing the results, preview how the page card looks with the Social Share Preview Tool. Accessible color is a small effort that makes your work usable for everyone.

Common Questions

Expert FAQ