What makes a contrast score good or bad?

Neither extreme is good. Identical profiles mean the reader cannot tell the roles apart, and a very high total means the two faces have no shared language and the page reads as two designs. The working range is clear contrast, which is a total difference of about four to eight across the five axes, plus one deliberate divergence in the right place.

Why does the role selector change the interpretation?

Because different pairings want different amounts of separation. A heading and body pairing needs enough contrast that the hierarchy is obvious, while an interface and editorial pairing usually wants similarity, so that a help article and the product around it read as one thing. The same score can therefore be right in one role and wrong in another.

Where do the profile numbers come from?

They are reference values recorded per family for comparison, not metadata extracted from the font files. That makes them consistent between sessions and comparable across faces, at the cost of precision: a face scored four on warmth is warmer than one scored two, but the figures are not measurements.

What should I do when the verdict says subtle contrast?

Separate the roles by something other than the faces, which is what the advice column suggests: a weight difference, a colour difference, or a larger size jump. A pairing in the subtle band is harmonious and perfectly workable, provided the hierarchy is carried by another decision, and the same applies to two treatments that share a family.

Can the score be compared between different pairings?

Yes, that is what expressing it as a percentage of the maximum makes possible. Two candidate pairings can be scored and the two totals compared directly, which turns a subjective choice into a bounded one. What the comparison cannot say is which pairing suits the content, only how far apart the two faces are.

Font Style Contrast Analyzer

Faces

Face A (headings)

Face B (body)Sample

Sample sizepx

Pairing role

Contrast score40 / 100

Verdictextreme contrast — strong voice clash, use intentionally

Suggested separationkeep the two faces as they are and set sizes on a shared scale

Shift the model

Axis	Face A	Face B	Difference
Serif character	▮▮▮▮▮	·	5 / 5
Stroke contrast	▮▮▮▮▮	▮	4 / 5
Width	▮▮	▮▮▮	1 / 5
Weight	▮▮▮	▮▮▮	0 / 5
Warmth	▮▮	▮▮	0 / 5

Scores are reference profiles for comparison, not font metadata: 0 is neutral and 5 is a strong expression of the axis.

Role context: head-body — heading/body pairings tolerate more contrast than a UI/editorial split, where similarity aids continuity.

Rendered pair

Two voices, one page

Two voices, one page set at 16px — the ratio that usually accompanies this pairing (2×).

You Might Also Need

Font Harmony Visualizer

Visualize harmony of a pairing

Contrast Pairing Checker

Check contrast between two fonts

Font Pairing Suggester

Get smart pairing suggestions

Multi-Font Comparison

Compare several fonts side by side

The font style contrast analyzer scores two faces on five stylistic axes and reports the difference as a profile rather than a single verdict. Pairings work when they differ deliberately on one or two axes and fail when they differ on none or on all five.

What is Font Style Contrast Analyzer?

The font style contrast analyzer compares two faces across five stylistic axes, totals the differences and reports both a score out of a hundred and the verdict that follows from it.

The five axes are serif character, stroke contrast, width, weight and warmth, each scored from zero to five where zero is neutral and five is a strong expression of the axis.
Profile values are recorded per family in the catalogue, so the comparison runs on reference values rather than on an assumption drawn from the classification.
A pairing role can be set to heading and body, interface and editorial, or display and text, since the role context changes how much contrast is desirable.
The contrast score is the total difference across the five axes expressed as a percentage of the maximum, so it is comparable between pairings.
The verdict bands run from identical profiles through subtle contrast, clear contrast and extreme contrast, with advice attached to the extremes.

What the score measures is deliberate difference rather than quality. Identical profiles are reported as a pairing that will read as a mistake, because two faces that agree on every axis give the reader no signal about which is which. A total difference of three or less is called subtle contrast: harmonious, and dependent on weight or colour to separate the roles. The clear range runs to eight, and above that the verdict warns of a strong voice clash that has to be intentional. The role selector changes the reading of the same number, because a heading and body pairing tolerates far more contrast than an interface and editorial split, where similarity is what makes the two feel like one product rather than two. The table reports the per-axis differences with a bar for each face, so the profile is visible rather than only the total, and the rendered pair sets the second face at half the first's size and states that ratio explicitly.

The profiles are reference values recorded for comparison, not metadata read from the font files.
Warmth and serif character are qualitative properties given numbers, so two judges could score the same face differently.
Five axes are covered, so details such as terminal shape, figure style and the spacing of individual pairs are outside the model.
The score treats every axis as equally important, so a difference in warmth counts the same as a difference in stroke contrast.
The rendered pair uses a fixed half-size relationship, so the sizes are demonstrated rather than optimised.

Use it when a pairing looks wrong and the cause needs locating on a specific axis, when two faces have to be compared on something other than classification, or when a team wants to argue about a pairing with a shared scale rather than adjectives. Where the comparison is about whether the roles can be told apart at all, the contrast pairing checker counts the axes a reader can perceive. The font harmony visualizer plots the same kind of profile with an emphasis on x-height, the contrast pairing checker adds the colour measurement, and the font pairing suggester turns the profiles into a shortlist.

How to use Font Style Contrast Analyzer

Choose face A for the stronger role and face B for the supporting one, then set the pairing role to match the context.
Read the five per-axis differences in the table rather than only the score, since one large difference and five small ones are different situations.
Compare the total against the verdict bands and read the advice, which differs between the subtle and the clear ranges.
Check the rendered pair at the stated ratio, then adjust sizes if the score points to a separation the reader cannot perceive.

When to use Font Style Contrast Analyzer vs related tools

Reach for it when a pairing looks slightly wrong and the axis responsible needs identifying, when two faces have to be compared beyond their classification, or when a design discussion needs a shared scale rather than opinions. For the perceptual side of the same question, the contrast pairing checker measures colour and counts visible differences, the font harmony visualizer emphasises x-height agreement, and the multi font comparison measures the faces against each other at one size.

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.