Why does the text-spacing row test three values at once?

Because the criterion itself is a conjunction: a reader must be able to apply a line height of 1.5, paragraph spacing of twice the font size and letter spacing of 0.12em together without loss of content. Passing on one value while failing on another does not satisfy it, so the row reports the measured triple and fails if any element is short.

How can reflow be scored from a measure?

The measure is a proxy. A line longer than about 80 characters cannot wrap inside a 320 pixel viewport without the container scrolling in two directions, which is what the criterion forbids, so capping the measure keeps the specification on the right side of it. It is a conservative reading of the criterion rather than a rendered test.

Does the exported CSS pass by construction?

It is biased that way. The block floors the line height at 1.5, the letter spacing at 0.12em and paragraph margins at 2em, and it writes sizes in rem so the resize criterion holds, which means the values that were failing in the table cannot survive into the copied code.

Why is the images-of-text criterion not in the table?

Because it cannot be judged from a type specification. Whether a heading is real text or a picture of text is a property of the markup, so evaluating it needs the page rather than a set of numbers. The criteria that are scored are the ones derivable from size, weight, colour, measure and spacing.

Should I evaluate every text role separately?

Yes. Body copy, captions and headings have different sizes and thresholds, so a specification that passes for the body style can fail for a 12px caption whose colour was reused from the body text. Each role gets its own run, its own colour pair and its own saved CSS block.

Font Accessibility Evaluator

Type specification

Face

Sizepx

Weight

Text colour

Background

Measurech

Line height×

Letter spacingem

Paragraph spacingem

Sample text

Checks passed4 / 5

Contrast ratio17.74:1

Size classbody text (4.5:1 threshold)

Grade1 criterion(a) to fix

Evaluation

Criterion	Requirement	Measured	Result	Fix
1.4.3 Contrast (minimum)	4.5:1 for body text	17.74:1	pass	no change needed
1.4.6 Contrast (enhanced)	7:1 for body text	17.74:1	pass	no change needed
1.4.4 Resize text	text scales to 200% without loss of content	rem/em-based sizes scale with the browser setting	pass	keep sizes in rem and avoid fixed-height text containers
1.4.12 Text spacing	1.5 line height · 0.12em letter spacing · 2× font size paragraph spacing	1.6 · 0em · 1.4×	fail	set line-height ≥ 1.5, letter-spacing ≥ 0.12em, paragraph spacing ≥ 2em
1.4.10 Reflow	content readable at 320 CSS px without two-dimensional scrolling	68ch measure	pass	no change needed

Preview at the evaluated settings

Accessible text is text anyone can read and adjust.

A second paragraph at the specified paragraph spacing, so the text-spacing criterion can be judged directly rather than in the abstract.

Accessible type CSS

.accessible-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.0000rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #111827;
  background: #ffffff;
  max-width: 68ch;
}

.accessible-text p + p { margin-top: 2em; }

You Might Also Need

Readability Score Calculator

Score reading difficulty

Body Text Legibility Grader

Grade body text legibility

Paragraph Width Optimizer

Optimize characters per line

Contrast Text Checker

Check text color contrast

The font accessibility evaluator scores a whole type specification against the WCAG criteria that apply to text and, for each one, states what was required, what was measured and what would fix it. You choose a face and set the specification; the tool returns the criteria table, a live preview and a CSS block.

What is Font Accessibility Evaluator?

The font accessibility evaluator takes a face, a size, a weight, two colours and four spacing values, then runs the specification through the criteria that apply to text and reports a pass or fail per criterion alongside the change that would resolve it.

Faces come from the built-in catalogue with Inter as the starting choice, and each entry carries the stack that is written into the exported CSS.
Size runs from 10px to 48px, weight in hundred-unit steps from 300 to 800, and the measure from 20ch to 140ch.
Line height runs from 1 to 2.4, letter spacing from 0 to 0.3em and paragraph spacing from 0 to 4em, each clamped inside its range before it is evaluated.
Five criteria are scored: contrast at AA, contrast at AAA, resize text, text spacing and text reflow.
Every failing row carries a fix, from darkening the text for a weak ratio to capping the measure so the copy can wrap inside a 320 pixel viewport.

Text spacing, WCAG 1.4.12, is the criterion a type specification most often fails, and it is evaluated as a conjunction of three conditions: line height must reach 1.5, paragraph spacing must equal at least twice the size, and letter spacing must reach 0.12em. Missing any one of them fails the row. Reflow is scored from the measure and passes at 80 characters or fewer, on the reasoning that a wider setting cannot wrap inside a narrow viewport without two-dimensional scrolling. The accessible type CSS the panel exports then rebuilds the same specification as a class: the size is converted to rem by dividing by sixteen to four decimals, the line height is floored at 1.5, the letter spacing at 0.12em and paragraph margins at 2em, so applying the block cannot reintroduce a value the table has just failed. A second paragraph renders in the preview at the specified paragraph spacing, which means the spacing criterion can be judged against real text instead of an abstract number.

Images of text, 1.4.5, is not scored, because it needs the page markup rather than a type specification.
The resize and reflow rows reason about the specification, not a rendered page, so a fixed-height container elsewhere in the layout stays invisible here.
Contrast is evaluated for one pair only. Hover, focus, disabled and placeholder states are separate specifications and need their own run.
The preview renders in the browser, so the chosen face is subject to whatever is installed on the machine viewing it.
Nothing is saved or versioned. The evaluation is a snapshot of the current settings, and changing the face clears the comparison.

Run it once per text role rather than once per page, because a caption and a heading rarely share thresholds, and treat the fix column as review notes: a specification that passes all five rows has a defensible answer for contrast, spacing and reflow in one place. Where the copy itself is the problem rather than the styling, the readability score calculator measures the prose, the body text legibility grader scores how the text reads at a glance, and the paragraph width optimizer settles the measure when the reflow row keeps failing. The line height optimizer is the companion for the leading value, and the contrast text checker measures the pair the contrast rows depend on.

How to use Font Accessibility Evaluator

Pick the face from the catalogue, then set the size, weight and the two colours that make up the text pair you are evaluating.
Set the measure, line height, letter spacing and paragraph spacing, watching the preview since it renders at exactly the values being scored.
Read the evaluation table row by row, noting the requirement, the measured value and the fix for any criterion showing a fail.
Adjust until the passed count reaches five out of five, then copy the exported CSS, which already floors the leading and tracking at the values the table requires.

When to use Font Accessibility Evaluator vs related tools

Use it when a type specification has to be signed off, when a design system's body style is being reviewed for the first time, or when a single failing criterion needs to be isolated from the rest. It is the broadest of the accessibility checks here, since it scores contrast, resize, spacing and reflow in one table rather than one criterion at a time. For a narrower question, the WCAG font size checker states the thresholds and spacing minimums for a single size, and the dyslexia font simulator shows what the spacing adjustment looks like on real copy.

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.