Contrast Auditing and Color Deficiencies

Technical Deep Dive & Specifications

The Mathematical Formula for WCAG 2 Contrast

Under WCAG 2.1, contrast is calculated by determining the Relative Luminance ($L$) of both foreground and background colors in sRGB color space:

$$L = 0.2126 \cdot R + 0.7152 \cdot G + 0.0722 \cdot B$$

Where $R, G, B$ are gamma-expanded values:

• If $C_{sRGB} \le 0.04045 \implies C = C_{sRGB} / 12.92$
• Else $\implies C = ((C_{sRGB} + 0.055) / 1.055)^{2.4}$

The final Contrast Ratio is defined as:

$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$

(where $L_1$ is the relative luminance of the lighter color, and $L_2$ is the relative luminance of the darker color, producing a value between $1:1$ and $21:1$).

WCAG 2.1 / 2.2 Contrast Success Criteria Matrix

Beyond WCAG 2: The APCA (Accessible Perceptual Contrast Algorithm)

While WCAG 2 mathematical ratios are the current legal standard, they suffer from significant physiological flaws:

1. Polarity Blindness: White text on black has a vastly different human perceptual threshold than black text on white due to ocular halation.
2. Spatial Frequency & Weight: A 100-weight ultra-thin font at 4.5:1 is illegible, whereas a 900-weight bold font at 3.8:1 is easily readable.

APCA (the candidate algorithm for WCAG 3) calculates a Lightness Contrast ($L_c$) value from $0$ to $108+$, dynamically accounting for font size, weight, and light/dark polarity.

+-------------------------------------------------------------------------------+
|                       WCAG 2 (Current) vs APCA (WCAG 3)                       |
+-------------------------------------------------------------------------------+
| Feature              | WCAG 2.1 Formula        | APCA Perceptual Model        |
|----------------------|-------------------------|------------------------------|
| Metric               | Ratio (e.g. 4.5:1)      | Lc Value (e.g. Lc 75)        |
| Polarity Aware       | No (same math reversed) | Yes (dark mode vs light mode)|
| Font Weight Aware    | Binary (>= 14pt bold)   | Continuous scaling (100-900) |
| Color Space Model    | Standard sRGB           | CIE 1931 & Human Eye Models  |
+-------------------------------------------------------------------------------+

Color Vision Deficiencies (CVD) Simulation

Auditors must verify that interfaces never convey information through color alone (WCAG 1.4.1 Use of Color):

+-------------------------------------------------------------------------------+
|                      COLOR VISION DEFICIENCY SPECTRUM                         |
+-------------------------------------------------------------------------------+
|  1. DEUTERANOPIA (Green-blind): 6% males. Red/green confuse into brownish hues.
|  2. PROTANOPIA (Red-blind): 1.5% males. Reds appear dark, green/yellow confuse.
|  3. TRITANOPIA (Blue-blind): 0.01% population. Blue/green confuse, yellow/violet.
|  4. ACHROMATOPSIA (Monochromacy): Complete color absence (grayscale only).    |
+-------------------------------------------------------------------------------+

DevTools Simulation Workflow:

1. Open Chrome DevTools (F12 or Ctrl+Shift+I).
2. Press Ctrl+Shift+P (Command Menu) -> type "Rendering".
3. Scroll down to Emulate vision deficiencies.
4. Select Protanopia, Deuteranopia, or Achromatopsia to evaluate UI states.

Supporting Windows High Contrast Mode (forced-colors)

In Windows High Contrast Mode (Contrast Themes), the operating system strips author background colors, borders, and text colors, forcing a high-contrast system palette:

/* ✅ Styling for Forced Colors Mode */
@media (forced-colors: active) {
  /* Provide explicit borders for inputs and cards that lose background colors */
  .card, .status-badge, .custom-button {
    border: 2px solid CanvasText;
  }

  /* Highlight selected states using native system colors */
  .custom-tab[aria-selected="true"] {
    border-bottom: 3px solid Highlight;
    color: Highlight;
  }
}

System Color Palette Keywords:

• Canvas: Background of application canvas.
• CanvasText: Primary foreground text color.
• Highlight: Background of selected items.
• HighlightText: Text color for selected items.
• ButtonText: Text color on button surfaces.
• LinkText: Color for unvisited hyperlinks.

💻 Interactive Code Playground

Accessible Financial Alert Card & High-Contrast System Styles

The following component demonstrates compliant text/non-text contrast, dual-channel indicators (icon + text), and full @media (forced-colors: active) support.

Line-by-Line Code Breakdown

• Lines 5–13: Defines CSS custom properties with mathematically pre-verified contrast ratios. Normal text colors #111827 and #374151 achieve over 9:1 against white, far exceeding the 4.5:1 Level AA minimum.
• Line 26: The alert card uses border-left: 6px solid #991b1b (7.3:1 contrast), easily satisfying WCAG 1.4.11 Non-Text Contrast (3:1).
• Lines 58–68: Implements @media (forced-colors: active). In Windows High Contrast mode, background tints are removed by the OS; the media query guarantees that high-contrast borders and system colors (CanvasText, ButtonText) are explicitly drawn so the card never blends invisibly into the page background.
• Lines 73–80: Incorporates a warning SVG icon alongside the bold textual heading. Users with monochromacy (Achromatopsia) identify the alert via geometry and text rather than color cues.