How to Use an APCA Contrast Checker: A Step-by-Step Tutorial

You have read about APCA, opened a checker for the first time, seen a number like Lc 72.4 on the screen and wondered what to actually do with it. This is a hands-on tutorial: pick two colors, run them through an APCA contrast checker, read the result correctly, and fix the pair if it does not pass. No theory recaps beyond the minimum you need to act.

If you want the long comparison between APCA and the legacy 4.5:1 ratio, read APCA vs WCAG 2.1 first. This article assumes you already accept that APCA is a useful complement to WCAG 2.1 AA.

What an APCA Contrast Checker Actually Reports

An APCA checker takes two colors — a text color and a background color — and returns a single number called Lc (lightness contrast). Two things matter at first glance:

• The sign. Positive Lc means dark text on a light background. Negative Lc means light text on a dark background. The sign tells you the polarity; for threshold checks use |Lc|.
• The magnitude. The absolute value runs from 0 (no contrast) up to roughly 108 (maximum). Higher is better, but the meaningful question is whether |Lc| clears the threshold required for your text size and weight.

That is the entire vocabulary. Everything else is interpreting thresholds.

Step 1 — Pick the Two Colors You Want to Test

Open the Hue Blender contrast checker and enter your foreground (text) and background colors. Hex (#1A1A1A), RGB, HSL, and oklch() notations all work. The tool reports the WCAG 2.1 ratio and the APCA Lc side by side, so you can spot disagreements immediately.

Real example. Suppose your design tokens specify body copy at #3D3D3D on #F8F8F8. Type those in. The checker will return roughly:

• WCAG 2.1 contrast ratio: ~9.5:1 — passes AA and AAA for body text.
• APCA: +Lc 87 — strong dark-on-light contrast, comfortably above the body-text threshold.

Both standards agree, which is the most common case. The checker becomes most useful when they diverge.

Step 2 — Match the Lc Value to the Right Threshold

APCA thresholds are not a single magic number — they depend on text size and weight. Use this lookup table:

• |Lc| ≥ 90 — small body text (14–16px regular). Safe for fine print and footnotes.
• |Lc| ≥ 75 — 18px regular or 14px bold. The most common body-text target.
• |Lc| ≥ 60 — subheads and labels: 24px regular, 18px at weight 600, 16px bold.
• |Lc| ≥ 45 — large display text around 36px regular or 24px bold.
• |Lc| ≥ 30 — minimum for spot-readable elements: placeholders, disabled states, decorative icons.

To use the table, ask three questions in order:

1. What is the smallest size this color pair will be rendered at?
2. What weight is the type at that size?
3. Does |Lc| clear the threshold for that size/weight combination?

If yes, you are done. If no, move to Step 4.

Step 3 — Read the Polarity Correctly

This is the step most newcomers skip. APCA is polarity-aware: dark-on-light and light-on-dark are not symmetric. Two practical consequences:

• If you are designing a dark-mode interface and the checker returns a negative Lc, that is correct — do not panic. The minus sign is information, not a failure.
• If you swap foreground and background in your design and the checker's magnitude changes, that is also correct. APCA accounts for the visual asymmetry that WCAG 2.1 ignores.

A common gotcha: a pair that passes comfortably as dark text on light may fail when inverted to light text on dark. Test both states explicitly if your design supports theme switching.

Step 4 — Fix a Failing Pair Without Wrecking Your Brand

When |Lc| is below the threshold, you have four moves. In rough order of least to most invasive:

1. Increase Text Size or Weight First

A 14px regular caption needing |Lc| ≥ 90 may be at Lc 78 — failing. Move it to 16px bold and the threshold drops to ≥ 60 — now passing without changing a single hex value. This is almost always the cheapest fix and preserves the brand palette.

2. Darken the Foreground Toward the Background's Opposite

If dark text is on a light background, push the text darker. In oklch() notation, drop the L value by 0.05 increments and re-test. The advantage of oklch() here is that you can shift lightness without dragging hue or chroma along — your brand color stays recognisably itself. See the OKLCH guide for the full reasoning.

3. Lighten the Background

If the foreground is already at its design ceiling, take the other side of the pair instead. A background at #F0F0F0 may move to #FAFAFA with no perceived design change but a notable Lc gain.

4. Drop Chroma, Keep Hue

Mid-saturated greens, oranges, and reds often look "muddy" against off-white at borderline |Lc|. Reduce chroma (the C in OKLCH) by 0.02–0.05 while holding hue and lightness — the color reads cleaner without losing brand identity, and |Lc| usually improves alongside.

The Move to Avoid

Do not chase contrast by piling on pure black or pure white. #000000 on a brand-colored background can break the visual language of your product. Aim for the minimum change that crosses the threshold for the size and weight you care about.

Step 5 — Validate Against WCAG 2.1 AA Too

APCA is a quality signal; WCAG 2.1 AA is the legal baseline almost everywhere — ADA Title II in the US, EN 301 549 in the EU, AODA in Ontario. The Hue Blender contrast checker reports both standards on the same screen so you can avoid the trap of optimising one and silently failing the other.

The rule of thumb that catches most teams:

• If WCAG 2.1 AA fails, fix it — it is a compliance bug.
• If WCAG passes but APCA flags it, treat it as a smell worth investigating before ship.
• If both pass, you are clear.

Step 6 — Sanity-Check With a Color Blindness Simulator

Contrast is half the accessibility picture. A pair can be Lc 80 and still collapse for someone with deuteranopia if the two colors only differ in hue. Run the same pair through the Color Blindness Simulator to check it survives the eight common vision types. Contrast plus color-blindness coverage together is the practical baseline.

Common Mistakes Newcomers Make

• Comparing Lc to 4.5:1 directly. They are different scales. Lc 75 is not "7.5:1". Use APCA thresholds for APCA, WCAG ratios for WCAG.
• Testing only one size. A pair that passes at 24px may fail at 14px. Test the smallest rendering you ship.
• Ignoring placeholders and disabled states. |Lc| ≥ 30 is the absolute floor for spot-readable text — do not let placeholder gray slide below it.
• Forgetting dark mode. Re-run every pair with foreground and background swapped if your design ships a dark theme.
• Treating APCA as legally normative. It is not. WCAG 2.1 AA still controls compliance. APCA improves design quality on top of compliance.

Reference: Quick Cheat Sheet

• Open the contrast checker.
• Paste foreground + background colors.
• Read |Lc|, ignore the sign for threshold checks.
• Look up the threshold for your size/weight.
• If under threshold: bump size/weight first, then lightness, then chroma.
• Always cross-check WCAG 2.1 AA on the same screen.
• Finish with a color blindness simulation.

You should be able to triage any contrast question in under a minute with this loop. The first ten times feel slow. By the fiftieth pair, you will read Lc values as fluently as you currently read 4.5:1 — and you will start catching legibility issues your old workflow let through.

When You Want the Underlying Color Model

If you are tuning palettes by hand, working in OKLCH makes the fixes in Step 4 dramatically easier. OKLCH gives you separate, perceptually meaningful sliders for lightness, chroma, and hue — so improving contrast no longer drags the rest of your brand color out of place. For accessibility audits across a whole palette at once, use the palette accessibility checker instead of testing pairs one by one.