Skip to content
Media

Font Accessibility Checker

Check font sizes, line height, and spacing against WCAG guidelines.

fontaccessibilitywcagtypographyreadable
Loading tool…

About this font accessibility checker

The Font Accessibility Checker scores a typographic setup against WCAG 1.4.x criteria and readability best practices, with live feedback you can act on immediately. Set a font family, font size in pixels, one of four font weights (400 through 700), a unitless line height, and a sample paragraph; the tool then runs five checks — body size of at least 16px, line height of at least 1.4, the optimal 1.5–1.6 line-height band, a line length between 45 and 75 characters, and a supported font weight — and distills them into an accessibility score out of 100. A stats row also reports the estimated x-height ratio, using a 0.5 multiplier on font size since real glyph metrics are unavailable in the browser. The live preview renders your sample with the exact settings, and a Copy CSS button exports the resulting declarations. Guidance cards explain WCAG 1.4.4 Resize text, 1.4.8 Visual Presentation, and 1.4.12 Text Spacing, and a color-contrast callout reminds you that typography is only half the equation. For designers and developers checking whether a font size is readable or body copy line-height meets WCAG, this checker turns the spec into an interactive checklist.

Font accessibility check examples

Input
Defaults: system-ui stack, 16px, weight 400, line height 1.5, the bundled sample paragraph.
Output
All five checks pass, an accessibility score of 100/100, and an x-height ratio of 0.50.
Note: The default configuration is deliberately a passing one.
Input
Font size changed to 14px with line height 1.2.
Output
The score drops; "Body font size ≥ 16px" and "Line height ≥ 1.4" fail with red detail text explaining each issue.
Note: Each failing check prints the specific reason rather than a bare X.
Input
A sample textarea containing a single short sentence like "Hello world".
Output
The line length check fails with "too short for a comfortable line", since the sample counts only 11 characters.
Note: Sample length is measured from what you paste, so use real body copy.

How to check font accessibility against WCAG

  1. 1

    Set the "Font family" field to your CSS font stack.

  2. 2

    Enter the "Font size (px)" and pick a "Font weight" from the dropdown.

  3. 3

    Type the "Line height" as a unitless number, e.g. 1.5.

  4. 4

    Paste a representative paragraph into the "Text sample" area and watch the checks.

  5. 5

    Use "Copy CSS" to grab the settings, or "Reset" to return to the passing defaults.

When to test font readability

  • Auditing a blog's body typography against WCAG before a redesign ships.
  • Choosing a font weight for captions that stays readable at small sizes.
  • Verifying a client's requested 14px body size fails the 16px recommendation.
  • Tuning line height and length for long-form documentation pages.
  • Generating the CSS declarations for an approved typographic scale.
  • Teaching design students the 45–75 character line-length rule with live feedback.

Best practices

  • Paste real body copy — the line-length check measures your actual sample text.
  • Aim for the 1.5–1.6 line-height band, not merely the 1.4 minimum.
  • Keep body text at 16px or above and scale headings with rem.
  • Pair this check with a color contrast check, as the interface itself recommends.
  • Use the Copy CSS button so the approved values reach the stylesheet verbatim.

Font accessibility tips

  • The score badge turns green at 80+, amber at 50+, and red below.
  • Toggle weights to see which pass — all four standard weights are accepted.
  • Reset restores the passing defaults in one click.
  • Read the failing check details; they name the exact WCAG criterion.

Font accessibility checker FAQ

The five checks — minimum font size, minimum weight, line height, line length, and x-height ratio — each contribute equally, and the score is simply the percentage of checks that pass, rounded to a whole number. All five passing yields 100/100. The score badge turns green at 80 or above, amber from 50, and red below, so a quick glance tells you how far the typography is from an accessible baseline.

WCAG does not mandate a single minimum size, but the guidance this font accessibility checker references is concrete: 1.4.4 Resize Text requires content to survive 200% zoom without loss, 1.4.8 Visual Presentation suggests body text of at least 12pt (16px) with 1.5 line spacing, and practical audits treat 16px as the floor for body copy. The minimum-size check flags anything below the threshold so undersized 12px body text is caught before an audit — or a reader — finds it.

The x-height ratio estimates how tall lowercase letters are relative to the font size, using 0.50 as the default estimate because real glyph metrics are not available to browser JavaScript. Most body typefaces fall between 0.45 and 0.55. A face with a small x-height needs a larger font-size value to reach the same perceived readability, which is why the check exists rather than relying on font size alone.

The guidance cards cover 1.4.4 Resize Text, 1.4.8 Visual Presentation, and 1.4.12 Text Spacing, and the five automated checks map onto those criteria plus general readability practice. Each failing check names the exact criterion in its detail text, so you can cite it directly in an accessibility audit report, a design-review ticket, or a client handoff without re-deriving the reference.

The check counts the characters in your pasted sample after flattening newlines and expects 45–75 characters per line — the range WCAG 1.4.8 associates with comfortable reading. Samples shorter than 45 fail from the low side and samples longer than 75 from the high side, and the failure message tells you which side you are on so the fix (narrowing the measure or adding content) is obvious.

No — and it says so deliberately. Typography and colour contrast are separate WCAG concerns, and contrast ratios depend on the specific foreground and background colours rather than the font settings. The tool points you to the Color Contrast Checker for that pass; running both checks together gives you a complete text-presentation review in a couple of minutes.

Explore more media tools

Browse the full collection of media tools on the hub, or jump back to all categories.

All Media toolsAll categories

Related tools

QR GeneratorColor Palette ExtractorColor Contrast CheckerImage CompressorImage ResizerFavicon GeneratorSocial Image GeneratorCSS Gradient Generator

Did this tool help?

Anonymous — one tap, no sign-up.