Skip to main content

One post tagged with "WCAG"

View all tags

Fix WordPress FSE Theme Footer Text Visibility - WCAG Contrast Issue

· 3 min read
CCLEE
CCLEE

While developing a WordPress FSE enterprise theme for a client, I discovered the Footer block text was nearly invisible across multiple Style Variations. This post documents the complete fix process - from WCAG contrast diagnosis to introducing semantic colors and handling global styles override.

TL;DR​

Problem: FSE theme's contrast color token has conflicting semantics. In light themes, contrast ≈ light gray ≈ base (white), resulting in Footer contrast ratio of only 1.05:1.

Solution:

  1. Introduce surface semantic color for dark block backgrounds
  2. Delete override styles in wp_global_styles
  3. Add surface definition to all Style Variations

Result: Contrast ratio improved from 1.05:1 to 15.8:1 (WCAG AAA grade).