Contrast and Font Size Implementation (WCAG)
WCAG 2.1 establishes minimum contrast and font size requirements to ensure readability for people with visual impairments.
WCAG Contrast Requirements
| Level | Normal Text | Large Text (18pt / 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Decorative elements, logos, and inactive UI components are exempt.
Contrast Checking
# CLI tool
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — excellent
# Online: WebAIM Contrast Checker
# https://webaim.org/resources/contrastchecker/
# In Figma: A11y - Color Contrast Checker plugin
# In Chrome DevTools: Elements tab → CSS → color circle → shows ratio
CSS Variables for Accessible Color Scheme
:root {
/* Text colors */
--color-text-primary: #1a1a1a; /* on white: 17.1:1 ✓ AAA */
--color-text-secondary: #595959; /* on white: 7.0:1 ✓ AA */
--color-text-muted: #767676; /* on white: 4.54:1 ✓ AA minimum */
/* Accent color — check on all backgrounds */
--color-accent: #005EA2; /* on white: 5.9:1 ✓ AA */
--color-accent-hover: #1a4480; /* on white: 8.6:1 ✓ AAA */
/* Background colors */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f5;
--color-bg-dark: #1a1a1a;
}
/* White text on dark backgrounds */
.dark-bg {
background: var(--color-bg-dark);
color: #ffffff; /* 17.1:1 ✓ */
}
Font Sizes
:root {
/* Base size — not less than 16px for body text */
font-size: 16px;
/* Scalable sizes via rem */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px — minimum for body text */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
}
/* Never block user scaling */
/* Bad: */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
/* Good: */
<meta name="viewport" content="width=device-width, initial-scale=1">
/* Line height — minimum 1.5 for body text */
body {
line-height: 1.5;
font-size: var(--text-base);
}
/* For paragraphs — 1.6-1.8 */
p {
line-height: 1.6;
}
Automated Accessibility Check in CI
// .pa11yrc.json — Pa11y config
{
"standard": "WCAG2AA",
"runners": ["axe", "htmlcs"],
"ignore": [
"color-contrast" // separate check via contrast-finder
]
}
// GitHub Actions
- name: Check accessibility
run: |
npx pa11y-ci --sitemap https://staging.example.com/sitemap.xml \
--threshold 0
Timeline
Contrast and font size audit on existing project — 1 day. Fixes in design system (CSS variables) — 1–2 days.