Skip to content

Free tool

Colour contrast checker

Pick two colours and see their WCAG 2.x contrast ratio in real time — against the full set of criteria (1.4.3 AA, 1.4.6 AAA, 1.4.11 UI components), with a live preview of body and large text and a nearest-passing-colour suggestion when a combination falls short. Runs entirely in the browser, so nothing is sent anywhere.

Typical run time: Instant

18.96:1

contrast of #0a0a0a on #fafaf9

WCAG 2.2 results

  • AA — normal text

    Pass

    1.4.3 Contrast (Minimum) — 4.5:1 for body text under 18pt.

    Needs ≥ 4.5:1

  • AA — large text

    Pass

    1.4.3 — 3:1 for text at 18pt+ or 14pt+ bold (roughly 24px / 18.66px bold).

    Needs ≥ 3:1

  • AAA — normal text

    Pass

    1.4.6 Contrast (Enhanced) — 7:1 for body text.

    Needs ≥ 7:1

  • AAA — large text

    Pass

    1.4.6 — 4.5:1 for large text.

    Needs ≥ 4.5:1

  • UI components

    Pass

    1.4.11 Non-text Contrast — 3:1 for active UI boundaries (button borders, focus rings, icons).

    Needs ≥ 3:1

Live preview

Body copy — 16px regular

chrimes.dev designs and builds modern websites, audits existing ones for accessibility, security and performance, and acts as a fractional CTO for small teams who need a steady hand.

Large text — 24px medium

Thoughtful web work. Built, audited and advised.

UI — button + link

Primary buttonInline link

More free tools

Security headers check

Grade your site’s HTTP security headers — CSP, HSTS, X-Frame-Options and more.

Try it

Performance check

Measure Core Web Vitals on your site using Google Lighthouse — LCP, INP, CLS and more.

Try it

Accessibility check

A 60-second accessibility scan — Lighthouse score plus our own static HTML checks, framed against WCAG 2.2.

Try it