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.

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.

• 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.

• 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.

• 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.