WCAG Color Contrast Checker

Paste foreground and background CSS colors to see WCAG 2.2 AA/AAA and non-text 3:1 verdicts with contrast ratio. HEX, RGB, HSL, OKLCH, color(), and named colors work on pair and matrix views. Checked in your browser — never sent.

Loading…
WCAG Color Contrast Checker
Paste CSS colors to read contrast ratio and WCAG 2.2 conformance. Matrix mode accepts up to 16 colors per axis (fail-closed beyond that). APCA is optional and labeled beta — never merged with WCAG scores.

Developer notes

• WCAG 2.2 is the default pass/fail baseline (1.4.3, 1.4.6, 1.4.11). • Foreground alpha composites over the background before the ratio. • Matrix cap is 16 colors per axis — a 17th color shows an error, never silent truncation. • APCA uses color.js's independent implementation — not the apca-w3 npm package. • Shareable URL is for workspace state; social share buttons are separate.

Options

  • APCA overlay (beta) — Shows APCA Lc in a separate labeled section. Default off. Never implies WCAG 3 compliance.
  • Text size and weight — Sets WCAG large-text thresholds and the sample preview. Default 20px / 400 (normal text).
  • Foreground alpha — Composites the foreground over the background before computing the ratio. Default 1 (opaque).
  • Matrix conformance filter — Shows or hides AAA, AA, large-AA, and failure cells on the matrix. Hidden on single-pair view.

Related CSS tools

Hub: Color & CSS Tools. Shrink or format stylesheets with Minify CSS and Beautify CSS.

WCAG Color Contrast Checker FAQ

WCAG-first paste-local checker

Is APCA the same as WCAG 3?

No. APCA is an optional beta overlay in a separate section. WCAG 2.2 AA/AAA remains the compliance baseline on this page.

Are my colors uploaded?

No. Parsing and contrast math run entirely in your browser. FastMinify never sends colors to a server.

What paste formats work?

HEX, RGB, HSL, OKLCH, CSS color() (including display-p3), and named CSS colors — no format toggle required.

How many matrix colors are allowed?

Up to 16 per axis (256 cells max). Paste beyond that fails closed with a visible error.

Color & CSS Tools

Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.

Color Converter

PX / REM / EM Converter

Color Shades & Tints Generator

Explore other tool categories

Minify

Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.

Unminify

Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.

Conversion

Transform data between JSON, YAML, XML and CSV locally — no server uploads.

Encoding

Encode or decode Base64, URL components and HTML entities — client-side only.

Serialization

Serialize and deserialize PHP data structures beside JSON workflows.

JSON Tools

Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

Beautify

Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

DevOps & Infra

Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.

CI/CD

GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.

Logs & observability

Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.

Kubernetes

Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.

Networking / IP

CIDR, subnets, and IPv4/IPv6 helpers — in your browser.

Security & tokens

JWKS, X.509 certificates, and secrets scan — browser-local.

API & schemas

OpenAPI tools to format, validate, and lint your specs.

HTTP Tools

Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.

Developer utilities

Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.

Text & Markdown

Count words, build Markdown TOCs, and clean line lists — all in your browser.

AI & LLM

Token counting, pricing estimates, and context-window fit — 100% browser-local.

Test Data

Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.