Readability Score Gauge — Free Live Flesch Reading Ease Meter

Most "readability score" widgets either hardcode a fake number or hide the formula entirely. This snippet computes a genuine Flesch Reading Ease score from whatever text is typed into it, live, and shows every input the formula actually uses — word count, sentence count, syllable count, and the resulting average sentence length — so the score is legible, not a black box.

The real formula, not an approximation of one

The score comes from 206.835 - 1.015 * (words / sentences) - 84.6 * (syllables / words) — the same Flesch Reading Ease formula used by Microsoft Word's readability statistics, the Hemingway Editor, and most SEO content-scoring plugins. Higher scores mean easier text: 60–100 reads as plain English, 30–59 needs a more attentive reader, and below 30 is dense, technical writing. The formula rewards two things independently — shorter sentences and shorter (fewer-syllable) words — which is why a single long, polysyllabic sentence can drag the score down even in an otherwise simple paragraph.

Estimating syllables without a dictionary

There's no built-in browser API for counting English syllables, so countSyllables() uses a compact heuristic: it counts transitions into vowel groups, strips a silent trailing "e", and floors every word at one syllable. It won't get every irregular word exactly right, but across a real paragraph the small per-word errors average out, which is exactly the tradeoff lightweight readability tools make instead of shipping a full pronunciation dictionary.

Sentence and word counting, done carefully

Sentences are split on ., !, and ? and filtered for non-empty fragments, with a floor of one sentence so a fragment with no terminal punctuation doesn't divide by zero. Words are split on whitespace and filtered to those containing at least one letter, so stray punctuation or numbers alone don't inflate the count. Both counts are shown directly beneath the gauge, alongside the derived average words-per-sentence — the single number most responsible for a score swinging up or down.

The arc as a direct read of the score

The gauge is a single SVG semicircle path with a known, fixed length; the visible stroke-dashoffset is set to ARC_LENGTH * (1 - score / 100), so the filled portion of the arc is a direct, linear read of the 0–100 score — no separate mapping table to keep in sync. The arc's color and the label beneath the number both key off the same three score bands (via bandFor()), so a glance at color alone tells you which zone the text falls in.

Customizing it

Swap in a different readability formula (Gunning Fog, SMOG, Coleman-Liau) by replacing the one calculation inside analyze() — every other piece (the gauge arc, the band coloring, the stat breakdown) is formula-agnostic. Pair it with an SEO score meter for a fuller content-quality panel, or a circular char counter for a simpler companion stat.