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.
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
Local checker built around WCAG
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 is required.
How many matrix colors are allowed?
Up to 16 per axis (256 cells max). Beyond that, the paste fails with a visible error.
Color & CSS Tools
Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.
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.
- SEO / Web Tools
Generate meta tags, Open Graph, and Twitter Card output locally — previews simulated from your inputs, never fetched from your live site.
- 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.
- Barcode labels
Draw Code 128, EAN-13, and UPC-A label images in the browser — PNG and SVG download, not a GS1 lookup.