Home / Blog / Pa11y contrast fix
â™ŋ WCAG AA

Pa11y in practice: fixing 7 contrast issues without breaking your design

📅 June 5, 2026â€ĸ⏱ī¸ 4 min readâ€ĸ🛠ī¸ Pa11y + WCAG 2 AA

An accessibility scan does not have to trigger a redesign. Today Pa11y found 7 contrast errors on the Fluister landing page. The fix: three small color changes, rebuild, rescan, done.

In short:
  • Pa11y found 7 WCAG2AA contrast errors.
  • All failures were small UI details: language button, demo URL, meta text and badges.
  • Three slightly darker colors pushed everything above the 4.5:1 threshold.

What Pa11y found

The scan ran on the Fluister homepage and checked against WCAG 2 AA. One color was barely below the threshold: the active language button had a contrast ratio of 4.47:1, while WCAG AA expects at least 4.5:1 for normal text.

The other findings were clearer: light gray small text in the hero demo only reached 2.56:1 contrast. Visually subtle, but too weak for users with reduced vision, screen glare, or lower brightness.

The exact color fixes

Active language button

Before: #6366f1 + wit
4.47:1
After: #6265f0 + wit
4.53:1

Browser URL and meta text

Before: #94a3b8 + wit
2.56:1
After: #68778c + wit
4.56:1

Sidebar count badge

Before: #64748b + #e8e8ec
3.89:1
After: #5a6a81 + #e8e8ec
4.51:1

Why 4.47:1 still matters

4.47:1 can feel like nitpicking. But accessibility tools are useful because they are objective. If you interpret the threshold by feel, small deviations accumulate. Today it is one button. Tomorrow it is forms, error states and pricing cards.

The best fix is usually not: make everything black. The best fix is: change as little as possible, but enough to make the interface reliably accessible.

Our simple workflow

  1. Run Pa11y on the live page.
  2. Start with errors that include concrete selectors and color suggestions.
  3. Calculate the new contrast ratio before deploying.
  4. Build and deploy.
  5. Scan again locally or in CI.
npx pa11y https://fluister.dev --standard WCAG2AA

What this has to do with Fluister

Fluister is about making feedback usable faster. Accessibility checks are feedback too: concrete, repeatable and directly tied to product quality. A good feedback loop makes issues smaller, cheaper and easier to fix.

That is why we do not treat improvements like this as side quests. If something can be measurably better, we fix it. Small changes, quick verification, on to the next improvement.

Want faster feedback loops?

With Fluister you collect feedback, bugs and ideas directly from your product.

Start freeView docs