Color Contrast Checker

The Color Contrast Checker measures the contrast ratio between two hex colours and reports whether the pair passes the WCAG AA and AAA thresholds. It shows the exact ratio from 1:1 to 21:1, separate verdicts for normal and large text, a live preview, and the relative luminance of each colour. Designers and developers use it to settle accessibility questions with a number instead of an opinion.

How to Use

• Enter a foreground (text) colour and a background colour, either by typing a hex value or using the colour pickers.
• The ratio updates as you type; the result panel shows it to two decimal places.
• Read the four compliance badges: AA normal, AA large, AAA normal, AAA large.
• Use the swap button to reverse the two colours and inspect the inverse combination.
• Adjust either colour and watch the ratio move in real time.

The WCAG Formula, Step by Step

The ratio comes from the WCAG 2.1 relative luminance definition. For each colour:

1. Convert the sRGB channel to the 0–1 range: s = channel / 255.
2. Linearise it: if s <= 0.04045, use s / 12.92; otherwise use ((s + 0.055) / 1.055) ^ 2.4.
3. Weight the three linear channels: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.

Then, with L1 the lighter luminance and L2 the darker:

ratio = (L1 + 0.05) / (L2 + 0.05)

White has a luminance of 1, black of 0, and the constant 0.05 keeps the result finite, which is why the maximum possible ratio is (1 + 0.05) / (0 + 0.05) = 21.

The channel weights are not arbitrary. Green sits at 0.7152 because the eye is far more sensitive to it than to red or blue, while blue’s 0.0722 reflects how little it contributes to perceived brightness. The 2.4 exponent, together with the linear segment below 0.04045, reproduces a monitor’s gamma response. A useful consequence is that two colours with the same RGB sum can score differently: green is perceptually much brighter than blue at the same numeric value.

Worked Examples

Foreground	Background	Ratio	AA normal	AA large	AAA normal
#333333	#FFFFFF	12.63:1	Pass	Pass	Pass
#595959	#FFFFFF	7.00:1	Pass	Pass	Pass (just)
#767676	#FFFFFF	4.54:1	Pass	Pass	Fail
#777777	#FFFFFF	4.48:1	Fail	Pass	Fail

The last two rows differ by a single hex step yet land on opposite sides of the AA normal threshold. That is the value of checking rather than estimating, because human perception is a poor judge near a cutoff. The #595959 row is the well-known seven-to-one grey used for AAA body text on white, and the #333333 default is comfortably AAA. When a colour sits close to a threshold, adjust one channel at a time and watch the ratio until it clears the bar with a little margin.

What AA and AAA Require

Text	AA minimum	AAA minimum
Normal (under 18pt / 24px)	4.5:1	7:1
Large (18pt+, or 14pt+ bold)	3:1	4.5:1

UI components and graphical objects have a separate 3:1 requirement that this tool does not evaluate, since it only compares two flat colours.

Common Mistakes

• Testing placeholder text or disabled states with the same threshold as body copy; disabled controls are exempt, but the text is still hard to read.
• Checking text against a gradient or photo by sampling the average colour, which hides the worst-case patch.
• Forgetting that opacity and overlays change the effective colour. A 50% black overlay over white is mid-grey, not black.
• Assuming a brand colour passes because it “looks fine” on a designer’s monitor. Bright environments and cheap panels are less forgiving.
• Checking only the default theme. Dark mode, high-contrast mode, and forced-colors mode can remap your palette, so verify the combinations users actually see.
• Ignoring focus rings and borders. An outline needs 3:1 against its surroundings even when the label text already passes.

Accuracy and Limits

The checker is exact for solid sRGB hex colours under the WCAG 2.1 formula, and it accepts 3- or 6-digit values with or without the leading #. It ignores alpha channels, gradients, images, and the actual pixel size or weight of your type. It also does not verify which text sizes a site really uses, so you must apply the large/normal rule yourself. Luminance is displayed to four decimal places, but the ratio is the number that matters; invalid input leaves the result blank rather than guessing. Treat the verdict as a necessary check, not a complete audit — it cannot replace a screen-reader test, a keyboard-navigation pass, or feedback from people who use assistive technology. For compliance records, note the hex pair and the ratio together, because a later colour tweak can quietly drop a passing pair back below the line.

Related Tools

• Color Picker — grab exact hex values from a palette.
• Color Palette Generator — build accessible palettes in the first place.
• Color Name Finder — get the nearest named colour for a hex value.