Color & Type Accessibility

Accessibility is not an afterthought or a checkbox — it is a fundamental aspect of good design. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Millions more have low vision, dyslexia, or situational impairments like screen glare. Designing for accessibility means designing for real-world conditions.

Understanding WCAG

The Web Content Accessibility Guidelines (WCAG) define standards for making web content accessible. For color and typography, the most relevant criteria are:

Contrast Ratios

WCAG measures contrast as a ratio between text color and background color, ranging from 1:1 (no contrast) to 21:1 (maximum contrast — black on white).

Most organizations target WCAG AA as the baseline. AAA is aspirational and may be required for government or healthcare applications.

Checking Contrast

Given a text color and background color, calculate the contrast ratio. For example:

White text (#FFFFFF) on blue (#2563EB):
Contrast ratio = 4.56:1 → Passes AA for normal text (barely)

Dark gray text (#374151) on white (#FFFFFF):
Contrast ratio = 10.69:1 → Passes AAA for all sizes

Light gray text (#9CA3AF) on white (#FFFFFF):
Contrast ratio = 2.98:1 → Fails AA for normal text

That last example is a common mistake — light gray placeholder text on a white background looks subtle and modern but fails accessibility standards.

Color Should Not Be the Only Indicator

WCAG requires that color is not the sole means of conveying information. This means:

• Form errors — Do not just turn the border red. Add an error icon and error text.
• Required fields — Do not rely on a red asterisk alone. Add "(required)" text.
• Charts and graphs — Do not differentiate data series by color alone. Use patterns, labels, or different line styles.
• Links in text — Do not rely solely on color to distinguish links from body text. Add underlines or other visual indicators.

<!-- Bad: color is the only error indicator -->
<input style="border-color: red;" />

<!-- Good: color + icon + text -->
<div class="form-field">
  <input style="border-color: #dc2626;" aria-describedby="email-error" />
  <p id="email-error" class="error-message" style="color: #dc2626;">
    <span aria-hidden="true">&#x26A0;</span>
    Please enter a valid email address.
  </p>
</div>

Typography Accessibility

Minimum Font Sizes

While WCAG does not mandate a specific minimum font size, best practices dictate:

• Body text — 16px minimum. This is the browser default for a reason. Going below 14px makes text difficult to read for users with low vision.
• Secondary text — 14px minimum for captions, labels, and supporting text.
• Never below 12px — Text smaller than 12px is inaccessible for a significant portion of users.

Line Length

Optimal line length for readability is 50 to 75 characters per line. Lines that are too long cause readers to lose their place when scanning back to the start. Lines that are too short create excessive line breaks and disrupt reading rhythm.

.prose {
  max-width: 65ch; /* Approximately 65 characters per line */
}

The ch unit is based on the width of the "0" character and provides a reliable way to limit line length.

Font Weight and Spacing

• Avoid font weights below 400 (regular) for body text. Light and thin weights (100-300) reduce readability, especially on low-resolution screens.
• Ensure sufficient line height (1.5 or above for body text) so lines of text do not blend together.
• Do not justify text (text-align: justify) — it creates uneven word spacing that makes reading harder for users with dyslexia.

Testing Tools

Chrome DevTools has a built-in vision deficiency emulator. Open DevTools, go to the Rendering tab, and use the "Emulate vision deficiencies" dropdown to see your page through the eyes of someone with protanopia, deuteranopia, or tritanopia.

Dark Mode Accessibility

Dark mode introduces unique accessibility challenges:

• Pure white text on pure black has a 21:1 ratio — technically the maximum, but the extreme contrast causes halation (a glow effect around text) for users with astigmatism. Use off-white (#e2e8f0) on dark gray (#0f172a) instead.
• Colored text on dark backgrounds needs re-checking. A color that passes contrast on a light background may fail on a dark one.
• Test both modes — If your site supports light and dark mode, every color combination must pass contrast requirements in both themes.

/* Light mode */
body { color: #1e293b; background: #ffffff; }
/* Contrast: 14.54:1 — passes AAA */

/* Dark mode */
.dark body { color: #e2e8f0; background: #0f172a; }
/* Contrast: 13.37:1 — passes AAA */

Practical Checklist

Before shipping any design:

1. Run every text/background combination through a contrast checker.
2. Verify that no information is conveyed by color alone.
3. Check body text is at least 16px with line height of 1.5 or more.
4. Limit line length to 65-75 characters.
5. Test with a color blindness simulator.
6. Test both light and dark modes if applicable.