Deep Dive: Interpreting APCA Lc Values for Accessible Text

In our previous post, we compared WCAG 2.x contrast ratios with the newer APCA (Accessible Perceptual Contrast Algorithm) Lightness Contrast (Lc) values. We highlighted that while WCAG 2.x gives a simple pass/fail based on ratio, APCA offers a more nuanced, perceptually accurate measure. However, interpreting APCA's Lc value requires understanding its relationship with font size and font weight.

Simply getting an Lc value from a tool like @weable/a11y-color-utils isn't enough. You need to know what Lc value is needed for your specific text context to be considered readable.

This post dives into how to interpret those Lc values based on the official APCA guidelines.

The Core Concept: Contrast is Contextual

APCA recognizes that a specific contrast level might be perfectly readable for large, bold headlines but completely illegible for small, thin body text. Thinner fonts and smaller sizes require higher contrast to maintain readability.

APCA provides lookup tables that map font size (in CSS pixels) and font weight (standard CSS weight values like 100-900) to minimum required Lc values for different use cases.

Key Use Cases:

• Body Text: The most common text, requiring the highest readability.
• Fluent Text: Slightly less critical than body text, perhaps for captions or secondary information.
• Sub-Fluent / Spot Reading: Headlines, large labels.
• Non-Text: Contrast for graphical elements, icons, focus indicators (often requires lower Lc values).

Using the APCA Lookup Tables (Simplified)

The official APCA resources provide detailed tables, but we can simplify the concept. Here's a generalized view based on common web font weights and sizes:

(Note: This is a simplified interpretation for educational purposes. Always refer to the official APCA resources and tools for precise values, especially as the standard evolves.)

Font Weight	Font Size (px)	Use Case	Minimum Recommended Lc	Example Interpretation
400 (Normal)	12px	Body Text	Lc 75-90	Very small text needs high contrast.
400 (Normal)	16px	Body Text	Lc 75	Standard body text needs Lc 75+.
400 (Normal)	24px	Fluent/Sub-Fluent	Lc 60	Larger normal text needs less.
400 (Normal)	36px+	Spot Reading	Lc 45-50	Large headlines need less.
700 (Bold)	12px	Body Text	Lc 60	Bold helps smaller text.
700 (Bold)	16px	Body Text	Lc 60	Standard bold text.
700 (Bold)	24px	Fluent/Sub-Fluent	Lc 45
700 (Bold)	36px+	Spot Reading	Lc 30	Very large bold text needs minimal.
300 (Light)	16px	Body Text	Lc 90	Light fonts need very high Lc.
300 (Light)	24px+	Fluent/Sub-Fluent	Lc 75	Avoid light fonts for small sizes.

Key Observations:

• Smaller Size = Higher Lc Needed: Compare 12px vs 16px vs 24px at the same weight.
• Lighter Weight = Higher Lc Needed: Compare 300 vs 400 vs 700 at the same size.
• Body Text is Demanding: Requires the highest Lc values (often Lc 75+ for normal weight/size).
• Large/Bold Text is Forgiving: Requires much lower Lc values.

Practical Application with @weable/a11y-color-utils

When you use getColorContrastAPCA(textColor, backgroundColor) from @weable/a11y-color-utils, you get the calculated Lc value for that specific color pair.

import { getColorContrastAPCA, hexToRgb } from '@weable/a11y-color-utils';

const textColor = hexToRgb('#EFEFEF'); // Light Gray
const backgroundColor = hexToRgb('#303030'); // Dark Gray

if (textColor && backgroundColor) {
  const calculatedLc = getColorContrastAPCA(textColor, backgroundColor);
  console.log(`Calculated APCA Lc: ${calculatedLc.toFixed(1)}`); 
  // Example Output: Calculated APCA Lc: 78.1

  // Now, interpret based on context:
  const fontSize = 16; // px
  const fontWeight = 400; // normal

  // Check against simplified table (or a more precise lookup):
  const requiredLc = 75; // For 16px/400 weight body text

  if (Math.abs(calculatedLc) >= requiredLc) {
    console.log(`PASS: Lc ${Math.abs(calculatedLc).toFixed(1)} meets/exceeds required Lc ${requiredLc} for ${fontSize}px/${fontWeight} weight text.`);
  } else {
    console.log(`FAIL: Lc ${Math.abs(calculatedLc).toFixed(1)} is below required Lc ${requiredLc} for ${fontSize}px/${fontWeight} weight text.`);
  }
}

Important Considerations:

• Absolute Value: APCA can return negative values (e.g., dark text on light background). Use Math.abs() when comparing against thresholds.
• Rounding: Be mindful of rounding when comparing values.
• Tooling: While you can build manual checks like the example above, integrated tools or linters that automatically reference APCA lookup tables are more efficient for larger projects.
• WCAG 3.0: The exact implementation and thresholds for APCA might change if/when it becomes part of a future WCAG standard. Stay updated!

Conclusion

APCA offers a significant step forward in measuring perceptual contrast, but it demands more context than WCAG 2.x. By understanding the relationship between Lc values, font size, and font weight, you can leverage APCA checks (alongside mandatory WCAG 2.x compliance) to create designs that are truly more readable and accessible.

Using libraries like @weable/a11y-color-utils gives you the raw APCA data (getColorContrastAPCA). The next crucial step, outlined here, is interpreting that data correctly within the context of your typography to make informed accessibility decisions.