Poor Text Readability

Your text is hard to read — low contrast, fancy fonts, or walls of unbroken prose. Like trying to read a restaurant menu in candlelight.

What is this?

You are at a fancy restaurant. The lights are dimmed way too low, the menu is printed in a thin cursive font on dark paper, and you are squinting and tilting the menu toward the candle just to figure out if that says "risotto" or "ricotta." That is what poor text readability feels like on a website. The content might be brilliant, but if people cannot physically read it without straining, it does not matter.

Why it matters

For your visitors: Reading on screens is already harder than reading on paper. When you add low contrast, decorative fonts, or dense blocks of text, you are making their brains work overtime just to decode words. People with dyslexia, low vision, or even just tired eyes after a long day will bounce immediately. And "tired eyes after a long day" describes most of your audience.
For your business: If visitors cannot comfortably read your content, they will not understand your product, trust your brand, or click your call-to-action. Readability problems silently tank your conversion rate because people leave before they even get to the good stuff.
The standard: WCAG 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Beyond contrast, readability depends on font choice, size, line height, line length, and paragraph structure working together.

Readable text

<article
  style="
  max-width: 65ch;
  font-family: system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1a1a1a;
  background: #ffffff;
"
>
  <h2>Why cats are better than dogs</h2>
  <p>
    Cats are independent, low-maintenance, and quietly judge your life choices. What more could
    you want?
  </p>
</article>

Unreadable text

<div
  style="
  width: 100%;
  font-family: 'Brush Script MT', cursive;
  font-size: 14px;
  line-height: 1.1;
  color: #999999;
  background: #cccccc;
"
>
  <p>
    A massive wall of text in a decorative font with terrible contrast and cramped line spacing
    that goes all the way across the screen making it nearly impossible to track from one line
    to the next...
  </p>
</div>

How to fix it

React / Next.js

Set up a readable article wrapper that handles all the key factors:

function Article({ children }: { children: React.ReactNode }) {
  return (
    <article
      className="
        mx-auto max-w-[65ch]
        font-sans text-lg leading-relaxed
        text-neutral-900 dark:text-neutral-100
        [&>p]:mb-5
        [&>h2]:mb-3 [&>h2]:mt-10 [&>h2]:text-2xl [&>h2]:font-bold
        [&>ul]:mb-5 [&>ul]:list-disc [&>ul]:pl-6
      "
    >
      {children}
    </article>
  );
}

The key ingredients: max-w-[65ch] keeps line length comfortable (45-75 characters per line is the sweet spot), text-lg ensures body text is at least 18px, leading-relaxed gives lines room to breathe at 1.625 line-height, and high-contrast text colours ensure readability in both light and dark modes.

Plain HTML

<style>
  .readable {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem 1rem;

    /* Font */
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
    font-size: 1.125rem; /* 18px */
    line-height: 1.7;

    /* Contrast — aim for 7:1 or higher */
    color: #1a1a1a;
    background: #ffffff;
  }

  .readable p {
    margin-bottom: 1.25rem;
  }

  .readable h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .readable {
      color: #e5e5e5;
      background: #0a0a0a;
    }
  }
</style>

<article class="readable">
  <h2>Your heading here</h2>
  <p>Your body text, now actually readable by human eyes.</p>
</article>

High impact — contentReadability~2 paws

Readability is the foundation everything else sits on. If people cannot read your words, nothing else on the page matters. The cat reads everything — and judges harshly when it has to squint.

How the cat scores this

The cat evaluates multiple readability signals together: contrast ratio between text and background (minimum 4.5:1), font size (body text should be 16px or larger), line height (at least 1.5 for body text), line length (flagged if over 80 characters per line), and font choice (decorative or overly thin fonts get penalized). The cat also checks for "walls of text" — paragraphs longer than 150 words without any visual breaks.