APCA contrast calculator
Find out how readable a type color is on the surface behind it: near-black #111827 on white scores Lc 104.5, and swapping the two flips the sign. A single signed number your design reviews can cite. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Text
- #111827
- Background
- #ffffff
- Lc
- 104.5
- Lc abs
- 104.5
- Polarity
- BoW
- Readability
- body_fluent
This APCA contrast calculator takes a text color and a background color as hex codes and returns the signed Lc (lightness contrast) produced by the Accessible Perceptual Contrast Algorithm used in WCAG 3 draft readability work. Unlike the older WCAG 2.x contrast ratio, APCA is polarity-sensitive: dark text on a light surface yields a positive Lc, while light text on a dark surface yields a negative Lc of similar magnitude. Designers, developers, and accessibility specialists use that single number—together with font size and weight lookup tables—to decide whether body copy, UI labels, and non-text strokes remain readable on self-illuminated displays. The engine implements the public 0.0.98G-4g constants: simple power 2.4 linearization, sRGB Y coefficients, black soft-clamp, and BoW/WoB SAPC scaling. Results are fully deterministic with no network calls, sampling, or date-dependent shortcuts.
What APCA Lc measures and how it differs from WCAG 2 contrast ratio
APCA predicts perceptual contrast for text and non-text content on self-illuminated screens by modeling monitor gamma, soft black levels, and the asymmetric way human vision treats dark-on-light versus light-on-dark pairs. The output is a signed Lc value roughly spanning about plus or minus one hundred ten: for example, near-black body text on pure white typically lands near Lc ninety or higher, while the same colors inverted produce a large negative Lc.
WCAG 2.x instead reports a single positive contrast ratio from relative luminance with fixed AA and AAA cutoffs such as 4.5 to 1 and 7 to 1; that ratio ignores polarity and tends to over- or under-rate certain mid-tone pairs that people actually struggle to read.
This calculator always returns the signed Lc, the absolute magnitude, the polarity tag BoW (black on white / dark text on light) or WoB (white on black / light text on dark), the linearized Y of each color, and a coarse readability band derived from absolute Lc for quick triage.
There is no page crawl, CSS parsing, opacity blending, or gradient sampling: you supply two explicit hex colors and receive a reproducible object suitable for design-token gates, accessibility tickets, and automated palette reviews that must cite a numeric Lc rather than a subjective screenshot opinion.
How hex inputs are parsed and how the 0.0.98G-4g path stays deterministic
Both values must be hex: optional leading hash, either three digits that expand to six or six full digits, case-insensitive. Alpha suffixes, rgb() functions, hsl() functions, named CSS colors, and bare integers are rejected with a message that names the field and shows what was received, so a bad token never becomes a silent fail-open. Each color is capped at thirty-two characters to keep validation cheap and to block paste accidents.
After parsing, each channel is raised to the power 2.4 after dividing by two hundred fifty-five, then combined with the APCA sRGB coefficients 0.2126729, 0.7151522, and 0.0721750 to form Y. Near-black Y values at or below 0.022 receive the soft-clamp toe so pure black is not over-penalized. When background Y is higher than text Y the BoW branch applies exponents 0.56 and 0.57 with scale 1.14 and offset 0.027; otherwise the WoB branch uses 0.65 and 0.62 and returns a negative Lc.
Extremely small luminance deltas clip to zero.
Where APCA checks fit in design systems, dark mode, and WCAG 3 preparation
Product teams reach for APCA when a brand palette that passed WCAG 2 AA still feels muddy in dark mode, when mid-gray text on soft surfaces fails human readability tests, or when stakeholders ask for Lc numbers aligned with WCAG 3 draft discussions rather than the older ratio alone.
Engineers wire the same contract into pull-request checks that block a token change if absolute Lc for primary body colors drops below a team threshold such as sixty, or they log WoB values for dark-theme hero headlines that intentionally sit closer to the surface. QA and accessibility specialists attach signed Lc and polarity to bug reports so developers fix the exact pair instead of guessing from a screenshot. Content and marketing teams verify that campaign hex codes still clear body-minimum bands when placed on light or dark site backgrounds.
Pair it with the WCAG 2 ratio checker when you still need AA/AAA documentation, and with color conversion tools when you need RGB or HSL intermediates before computing Lc.
What you can do with it
Design-token and dark-mode review
Check every text/background pair in light and dark themes for signed Lc and polarity before locking brand tokens.
Accessibility bug reports with polarity
Attach signed Lc, BoW/WoB polarity, and the readability band so engineers fix the exact hex pair, not a vague screenshot.
FAQ
What does the APCA contrast calculator cost?
It is free in your browser on this page.
What is Lc and why can it be negative?
Lc is APCA lightness contrast. Positive values mean dark text on a light background (BoW); negative values mean light text on a dark background (WoB). Keep the sign for polarity-sensitive reporting; use the absolute value only when comparing against magnitude thresholds.
How is this different from the WCAG contrast ratio checker?
WCAG 2.x returns a single positive ratio and AA/AAA flags. APCA returns a signed Lc with polarity, different math (power 2.4 Y, soft black clamp, BoW/WoB exponents), and is aimed at WCAG 3 draft readability work rather than 4.5:1 / 7:1 gates.
Does this tool scan my website for contrast issues?
No. It only compares two hex colors you provide.
Which color formats does the APCA calculator accept?
Only hex colors with three or six digits, with or without the leading hash and in any case. Named colors, RGB or HSL notation and transparency are refused, so a wrong value never slips through.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/apca-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/apca-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/apca-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/apca-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/apca-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"text": "#111827",
"background": "#ffffff"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.apca_contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_color_chars | 32 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Explore pairs free in the browser, or call the API at $0.002 per successful request when design-system CI, Figma backends, or token pipelines need the same Lc matrix every time.
What APCA Lc measures and how it differs from WCAG 2 contrast ratio
The method field is fixed to apca_0.0.98G-4g so CI logs document exactly which constant set produced the number. Invalid hex, missing fields, non-string values, and overlong strings are rejected with invalid_input and are never billed.
How hex inputs are parsed and how the 0.0.98G-4g path stays deterministic
The preferred fields are text for the foreground ink or icon color and background for the surface behind it. Aliases foreground, fg, color1, and hex1 map to text; bg, color2, and hex2 map to background, so spreadsheets, query strings, and form posts can reuse the same contract without renaming columns.
Where APCA checks fit in design systems, dark mode, and WCAG 3 preparation
Designers paste hex pairs from Figma or a token JSON file and read polarity plus a band such as body_preferred or large_text before locking a scale. On this page the work runs entirely in your browser; through the API each successful lookup costs $0.002, failed validation is not charged, and nothing is stored after the response returns. That split—free interactive exploration and a priced, identical API—matches the rest of the KIT tier-A catalog and lets you move from a palette workshop to an automated pipeline without changing the mathematical result.
Integration use cases
CI gates for WCAG 3 draft readiness
Call the API from pull requests to fail builds when absolute Lc for body colors falls below your team threshold.
Technical questions
Which color formats are accepted?
Hex only: #RGB or #RRGGBB, with or without the leading hash, case-insensitive. rgb(), hsl(), named colors, and alpha hex are rejected with invalid_input.