Contrast

The 4.5:1 number is only part of the story

Two text pairs can both pass at 4.5:1 and still read differently.

That is the limitation of the WCAG contrast ratio. It is useful, familiar, and widely enforced, but it does not account for every factor that affects reading. Polarity matters. Size matters. Weight matters. Some color pairs look better or worse than the ratio suggests.

WCAG is still the standard most audits use. It is the language of compliance, and it is the right number to report when a project needs to meet accessibility requirements.

APCA asks a different question. Instead of only comparing luminance ratio, it tries to model perceived readability more closely. It accounts for polarity and gives different guidance for different text uses.

The contrast checker shows both because the disagreement is useful. When WCAG and APCA agree, the decision is usually straightforward. When they diverge, the tool gives you something to inspect instead of a single badge to trust blindly.

WCAG 2.1 in 90 seconds

WCAG 2.1 calculates a contrast ratio between two relative-luminance values.

ratio = (lighter + 0.05) / (darker + 0.05)

Black on black is 1:1. White on black is 21:1.

Common thresholds:

• AA Normal: 4.5:1 for body text under 18px, or under 14px bold.
• AA Large: 3:1 for large text.
• AAA Normal: 7:1 for stricter body text.
• AAA Large: 4.5:1 for stricter large text.

The formula is simple, stable, and enforceable. That is why it became the standard.

Its weakness is also its simplicity. The ratio is symmetric, so foreground and background can swap without changing the score. It also does not directly model font size or weight.

APCA in 90 seconds

APCA stands for Accessible Perceptual Contrast Algorithm. It returns an Lc value, short for Lightness Contrast.

Three things matter:

• Lc is signed. Positive means dark text on a lighter background. Negative means light text on a darker background.
• The magnitude maps to use cases rather than one universal threshold.
• Size and weight matter to the decision.

The contrast checker uses APCA's Bronze Simple guidance as a practical baseline:

• |Lc| ≥ 90 for body text.
• |Lc| ≥ 75 for headlines.
• |Lc| ≥ 60 for non-content text, icons, placeholders, and decorative labels.

APCA is more complex than WCAG's ratio, but the practical idea is simple: readable contrast depends on how the text is actually used.

Why the swap button matters

Set a dark navy foreground on a light neutral background. WCAG will give you a strong passing ratio. APCA will likely agree.

Now swap the colors.

WCAG returns the same ratio because it only compares lighter and darker luminance values. APCA flips sign because the reading direction changed: light text on dark is not the same visual condition as dark text on light.

That is the quickest way to see the difference between the algorithms. WCAG measures contrast ratio. APCA tries to describe readability conditions.

The preview rows make the same point with size. A color pair may be fine for a 32px headline and weak for 14px supporting text. The small-text row is where problems usually show up first.

What threshold should you use?

Start with the actual text size.

A 60px headline can tolerate less contrast than a 16px paragraph. A 12px footer needs more help, not less. Weight matters too: heavier strokes are easier to perceive at the same color contrast.

Use WCAG thresholds when you need compliance language. Use APCA as a design signal when deciding which pair reads better in context.

Treat pass/fail as a floor, not a finish line. A pair that barely clears AA may be technically acceptable and still feel strained on dim screens, older displays, or for tired eyes. Body text benefits from extra margin whenever the design can afford it.

When to trust which

Trust WCAG for audits, procurement, legal requirements, and stakeholder reporting. WCAG 2.x is the standard people will ask for, and the standard many tools and audits still enforce.

Trust APCA when you are making design decisions. It is better at showing why two passing WCAG pairs do not feel equally readable, or why a headline can work where body text cannot.

Show both when possible. WCAG gives you the compliance floor. APCA gives you a stronger read on visual comfort.

On APCA's standing

APCA is not the finalized replacement for WCAG 2.x contrast requirements. It is part of the ongoing WCAG 3 conversation and should be treated as an additional design signal, not a substitute for required compliance reporting.

That does not make it useless. Many teams use APCA internally while still documenting WCAG ratios externally. That is a reasonable split: WCAG for the audit trail, APCA for the design review.

The contrast checker does not ask you to pick a side. It shows both and lets the pair reveal where the standards agree or disagree.

Common mistakes

Trusting one number. A 4.6:1 pair and a 7:1 pair can both pass AA. They are not equal in use. Pay attention to the margin, not only the badge.

Designing for the spec instead of the reader. Passing AA does not guarantee comfortable reading in every real environment. When body text can hit AAA without hurting the design, take the win.

Ignoring weight. A regular 14px label and a semibold 14px label do not read the same. The tool previews regular weight, so account for your actual CSS.

Treating small text too casually. Small text needs more contrast. Captions, footers, helper text, and metadata are often where contrast debt hides.

Related tools

• Palette — check whether extracted text and background roles actually read.
• Type Scale — evaluate contrast against the sizes you are shipping.
• Gradient — test type over gradient endpoints and midpoints.
• Shadow — check text on real card surfaces, not just flat colors.

Workbench tools share a bench. Save the colors once, then move between palette, contrast, gradient, and surface decisions without retyping values.