Web design

WCAG contrast checker

Live contrast ratio with AA / AAA pass-fail badges.

Install for Chrome →All features

Tools → Convert → Color toolkit → Contrast · 7-day free trial · Premium $9.99 / yr

Try it now·runs locally · nothing uploaded

Color

All formats

Hex#b9ff41
RGBrgb(185 255 65)
HSLhsl(82.11 100% 62.75%)
OKLCHoklch(92.08% 0.2198 128.24)
Tailwindbg-[#b9ff41]

WCAG contrast

vs white: 1.20:1vs black: 17.44:1

Want this and 50 more tools at one keyboard shortcut, with collections and persistence?Install free trial →

★ Premium

Built for the things AI can’t fake

This tool runs free, right here. The extension adds three things a web widget can’t:

Start 7-day trial→

★ Flagship

Playground

↗

JS / TS scratchpad — sandboxed and instrumented.

Paste real code, hit Run. Console + network monitor + watch expressions all in one panel.

·Real ES modules · top-level await
·URL imports — esm.sh & friends
·Live fetch monitor (every call)
·Watch expressions in your scope
·10s sandbox timeout · zero CORS pain

HTTP client

↗

Postman-style request runner.

Save collections, share variables, hit any API. Includes GraphQL with introspection, OpenAPI / cURL import.

·Bearer / Basic / API-key auth
·GraphQL · introspection
·OpenAPI 3.x · cURL import
·Copy as fetch / axios / Python

Realtime (WS + SSE)

↗

Stream-protocol tester — what Postman doesn’t do well.

WebSocket + Server-Sent Events with custom auth headers, auto-reconnect, JSON pretty-print.

·wss:// + ws:// + subprotocols
·SSE via fetch — Authorization works
·Auto-reconnect with backoff
·Send composer · ⌘ + Enter

What it does

WCAG (the web accessibility spec) defines minimum contrast ratios between text and background. AA body text needs 4.5:1; large headlines (≥18pt or 14pt bold) need 3:1; AAA tightens both.

The Contrast tab shows the ratio plus pass/fail for AA body, AA large, AAA body, AAA large, and the 3:1 minimum for non-text UI components.

Why use VibeGear's wcag contrast checker

✓Live computation — drag your color picker and watch the ratio
✓Five WCAG criteria at once
✓Live sample text rendered in the chosen colors

How to use it

1Tools → Convert → Color toolkit → Contrast.
2Pick or paste foreground + background.
3Read the ratio + badges. The sample text shows you what users actually see.

Related tools

Color converter

Paste any CSS color, see all formats — including OKLCH.

CSS gradient generator

Build linear / radial gradients with draggable stops.

★ Premium

One install. Every tool above.

7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Everything runs locally.

Install & start trial →→