Why is passing WCAG not enough for a pairing?

Because the contrast rule asks whether text can be read, not whether two roles can be told apart. Two treatments in similar greys at 4.6 to 1 are both legible and both look like the same level of the hierarchy. The style axes count answers the second question, which is why the tool reports both rather than choosing one.

What counts as a style axis that differs?

Four things: the family classification, the weight, the size and the colour. Each is compared between the two treatments, and the count of differences is reported out of four. Classification differences are the most durable because they survive grayscale, size changes and any loss of colour vision, which is why at least two differing axes is the threshold for a readable hierarchy.

Why is a colour-only difference a weakness?

Because it disappears in circumstances the design cannot control. Printed in grayscale, viewed by a reader with reduced colour vision, or rendered on a screen with a strong colour cast, two treatments that differ only in hue can become identical. Weight and size differences survive all three, so they are the safer way to separate levels.

Does the size class change the measured ratio?

No, the ratio is a property of the two colours. What changes is the threshold it is compared against: body text needs 4.5 to 1 for AA and 7 to 1 for AAA, while large text needs 3 and 4.5 to 1. The toggle exists because the tool cannot know from the treatment sizes alone whether the design intends the text to count as large.

Can I compare three levels at once?

Not directly. The tool evaluates a pair, so a three-level hierarchy is checked as heading against subheading, then subheading against body, and then heading against body if the two are far enough apart. Each pair is quick, and the intermediate comparison is the one that usually reveals the problem.

Contrast Pairing Checker

Treatment A / B

SampleA familyB family

A colourB colourBackground

A weight

B weight

A sizepx

B sizepx

Text size

Body (4.5:1)Large (3:1)

A contrast ratio17.74:1

B contrast ratio4.83:1

Style axes that differ3 / 4

Pairing verdictdistinguishable — hierarchy reads

Preview

Contrast is two problems at once

Measurements

Check	A	B	Pass
A · AA	17.74	—	pass
A · AAA	17.74	—	pass
B · AA	4.83	—	pass
B · AAA	4.83	—	fail
Family class	sans	serif	differs
Weight	700	400	differs
Size	32px	32px	identical
Colour	#111827	#6b7280	differs

WCAG contrast is measured from the hex values with the WCAG 2.x relative-luminance formula. Typographic contrast is not a ratio — it is the count of axes on which the two treatments actually differ.

You Might Also Need

Contrast Text Checker

Check text color contrast

Font Accessibility Evaluator

Evaluate font accessibility

Color on Color Text Checker

Test colored text on color

Font Harmony Visualizer

Visualize harmony of a pairing

The contrast pairing checker evaluates two type treatments against both kinds of contrast that decide whether they can be told apart. Colour contrast is measured with the WCAG formula, and typographic contrast is counted across the axes that a pair can differ on.

What is Contrast Pairing Checker?

The contrast pairing checker takes two type treatments, a shared background and a text size class, then reports both a measured contrast ratio for each treatment and the number of style axes on which the two differ.

Each treatment carries a family, a colour, a weight from 300 to 800 and a size from 10px to 96px, so weight and size differences can be expressed as well as colour.
The background is shared, which is what makes the two ratios comparable, and each treatment's WCAG contrast against it is measured with the relative-luminance formula.
Four verdicts are reported: each treatment against the AA and AAA thresholds, at the body level of 4.5 and 7 to 1 or the large-text level of 3 and 4.5 to 1.
Four style axes are counted: family classification, weight, size and colour, and the count of those that differ is reported out of four.
The pairing verdict calls the pair distinguishable when at least two axes differ, and too similar when fewer do.

The reason both measurements are needed is that passing WCAG says nothing about hierarchy. Two faces at the same size and weight in similar greys can clear 4.5 to 1 comfortably and still read as a mistake, because the reader cannot tell which of them is the heading. The style axes count is the answer to that: a pair that differs on classification and weight is separated by shape and mass, while a pair that differs only in colour is relying on a difference that disappears in a grayscale print or for a reader with reduced colour vision. The measurement table sets the two kinds of evidence side by side, with the four WCAG verdicts on the upper rows and the four axes on the lower ones, and the note states plainly that typographic contrast is a count rather than a ratio.

The axis count treats each difference as equal, so a family change and a twenty-per-cent size change score the same.
Contrast is measured against one flat background, so a treatment over a gradient or an image is not represented.
The large-text class is a manual toggle rather than derived from the treatment sizes, so it has to be set deliberately.
Only two treatments are compared, so a three-level hierarchy has to be checked as three separate pairs.
Nothing evaluates the result in grayscale or under a colour-vision deficiency, which is the case where a colour-only separation fails.

Use it when a heading and a subheading look too alike, when a design relies on colour alone to separate two roles, or when a pair has to be defended on both accessibility and hierarchy grounds at once. The two-part table is the quickest way to show which is actually failing. Where only the colour needs measuring, the contrast text checker does that with its luminance breakdown, and a whole palette belongs to the color on color text checker. The contrast text checker measures a single pair precisely, the color on color text checker covers a whole palette, and the font accessibility evaluator scores the wider set of text criteria for one specification.

How to use Contrast Pairing Checker

Enter the sample text and set each treatment's family, colour, weight and size, and the background they share.
Set the text size class, since the AA and AAA thresholds change between body text and large text.
Read the two ratios and their verdicts in the measurement table, then check the four style axes for what actually differs.
If the verdict is too similar, change an axis the reader can perceive without colour, such as weight or size, and measure again.

When to use Contrast Pairing Checker vs related tools

Reach for it when two roles look too similar on a page, when a design separates hierarchy by colour alone and needs the risk shown, or when a pair has to satisfy an accessibility review and a design review at the same time. The table gives one answer for each. For the colour measurement alone, the contrast text checker is the narrower tool, a full palette belongs to the color on color text checker, and the font accessibility evaluator covers contrast, spacing and reflow for one specification.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.