weableColor Icon
weableColor
OverviewPricingDocsToolsBlogCase Studies
Get Started
Back to Case Studies

Case Study: Slack /contrast — WCAG checks where the team already works

September 18, 2026

case study
slack
contrast
accessibility
weableColor
free tools

##The problem

Contrast checks die in the wrong tab. Designers and engineers debate #777 on white in Slack, then bounce to a checker, paste hexes twice, and lose the thread. For Handshake AI Skills Studio we needed a real slash command with a live Request URL — and it had to feel like weableColor, not a toy /compliment bot.

##The approach

We built /contrast on the same WCAG helpers already in the weableColor tree (getContrastRatio, checkWCAGCompliance in wcColorUtils). A thin Next.js route (/api/slack/contrast) parses Slack’s form payload, expands 3-digit hex, and returns an in-channel reply with ratio plus AA/AAA for normal and large text.

Bare /contrast still drops a WCAG AA tip. Two hexes unlock the full checklist:

/contrast #1a1a1a #f5f5f5
→ Ratio 15.96:1 · AA/AAA pass across normal and large

/contrast #777 #fff
→ Ratio ~4.48:1 · AA normal fail (the near-miss teams argue about)

Socket Mode stays off so Slack hits a public HTTPS Request URL. Production endpoint: https://weable.pro/api/slack/contrast.

##Why the library matters

Reusing weableColor math means Slack, the free web contrast checker, Figma, and VS Code stay on one accessibility story. Handshake got a portfolio-true mission artifact; customers get a free team surface next to the existing Free Tools shelf.

##Try it