article Part 4 of 6

Why Color and Contrast Matter

Users with low vision or color vision deficiencies must be able to see and read your content. That means sufficient contrast between text and background, not relying on color alone to convey information, and ensuring content is distinguishable under various conditions.

Who benefits from good contrast?

  • Users with low vision or color blindness
  • Older users (contrast sensitivity decreases with age)
  • Anyone using a device in bright sunlight
  • Anyone on a low-quality screen

Basically, everyone benefits from clear, readable text.

Color Contrast Requirements

WCAG defines specific contrast ratios that text and UI components must meet:

Level AA Requirements (The Standard)

For Normal Text (WCAG 1.4.3):

  • Minimum contrast ratio of 4.5:1
  • Applies to text under 18pt (or under 14pt bold)

For Large Text:

  • Minimum contrast ratio of 3:1
  • Applies to text 18pt or larger (or 14pt bold or larger)

For UI Components and Graphics (WCAG 1.4.11):

  • Minimum contrast ratio of 3:1
  • Applies to interface controls (buttons, form inputs, icons) and meaningful graphics

What Do These Ratios Mean?

The contrast ratio is calculated from the relative luminance of colors. You don't need to do the math—use a contrast checker tool.

Quick reference:

  • Black on white = 21:1 (maximum possible contrast)
  • 4.5:1 = About like #757575 gray on white, or #FFF on #595959
  • 3:1 = About like #959595 gray on white (minimum for large text)

Using Contrast Checker Tools

Don't eyeball it—use tools:

  • WebAIM Contrast Checker: webaim.org/resources/contrastchecker/
  • Browser DevTools: Most browsers now show contrast ratios in the color picker
  • Design Tool Plugins: Stark for Figma, Sketch, Adobe XD
  • Automated Scanners: WAVE, axe DevTools

Example:

/* Bad - insufficient contrast (2.9:1) */
color: #999999;
background: #FFFFFF;

/* Good - meets 4.5:1 for normal text */
color: #595959;
background: #FFFFFF;

/* Also good - reverse */
color: #FFFFFF;
background: #595959;

Common Contrast Mistakes

  1. Light gray text: #AAA or #CCC on white rarely meets 4.5:1
  2. Text over images: Even with overlays, check every text/background combination
  3. Placeholder text: Often too light by default—style it darker
  4. Disabled inputs: Still need 3:1 if visible (though WCAG has exemptions for disabled)
  5. Link color: Ensure links have sufficient contrast with both background and surrounding text

Don't Rely on Color Alone

WCAG 1.4.1 (Level A): Color should not be the only way to convey information.

Common violations:

Form Errors

<!-- Bad - only red border indicates error -->
<input style="border-color: red;">

<!-- Good - text message + icon + red border -->
<div class="error">
    <span class="error-icon">⚠</span>
    <label for="email">Email:</label>
    <input id="email" aria-invalid="true" aria-describedby="email-error">
    <span id="email-error" class="error-message">Please enter a valid email</span>
</div>

Links in Text

Links must be distinguishable from surrounding text. You can't rely on color alone:

/* Bad - only color difference */
a {
    color: blue;
    text-decoration: none;
}

/* Good - underline or sufficient contrast */
a {
    color: #0645AD;
    text-decoration: underline;
}

/* Also good - 3:1 contrast with surrounding text */
a {
    color: #0000EE; /* Ensures 3:1 with black text */
}

Charts and Graphs

Don't use color as the only way to distinguish data:

  • Use patterns or textures in addition to colors
  • Label each section directly
  • Provide a text description or data table

Required Fields

<!-- Bad - only red asterisk -->
<label>Name <span style="color: red;">*</span></label>

<!-- Good - text explanation + visual indicator -->
<p>* indicates required field</p>
<label>Name <span class="required" aria-label="required">*</span></label>

Text Resizing and Reflow

Users should be able to enlarge text without losing content or functionality.

Resize Text (WCAG 1.4.4 - Level AA)

Text must be resizable up to 200% without loss of content or functionality (except captions and images of text).

How to support this:

  • Use relative units (em, rem, %) for font sizes, not fixed pixels
  • Test by zooming in your browser (Ctrl/Cmd +)
  • Ensure layouts don't break when text enlarges
  • Don't set maximum-scale=1.0 in your viewport meta tag
/* Good - relative sizing */
body {
    font-size: 100%; /* or 16px */
}

h1 {
    font-size: 2rem; /* 32px if base is 16px */
}

/* Bad - fixed sizing that can't scale */
p {
    font-size: 14px !important; /* Don't prevent users from resizing */
}

Reflow (WCAG 1.4.10 - Level AA)

Content should reflow to a single column when zoomed to 400% (on desktop) or viewed on a 320px wide screen, without requiring horizontal scrolling.

Practical approach:

  • Use responsive design
  • Test on narrow viewports
  • Avoid fixed-width containers that don't adapt
  • Allow content to wrap naturally

Content on Hover or Focus

WCAG 1.4.13 (Level AA): If content appears on hover or focus (like tooltips or custom dropdowns), it must be:

  1. Dismissible: User can dismiss it without moving focus (usually Escape key)
  2. Hoverable: If triggered by hover, user can move pointer over the new content without it disappearing
  3. Persistent: Content remains visible until user dismisses it or it's no longer relevant

Example: Accessible tooltip

<button
    aria-label="Help"
    onmouseover="showTooltip()"
    onfocus="showTooltip()"
    onmouseout="hideTooltip()"
    onblur="hideTooltip()">
    ?
</button>

<div role="tooltip" id="help-tooltip" hidden>
    This is helpful information.
</div>

<script>
// Tooltip should:
// - Appear on hover AND focus
// - Stay visible when hovering over it
// - Close with Escape key
// - Not automatically disappear too quickly
</script>

Visual Considerations Beyond Color

Text Spacing

WCAG 1.4.12 (Level AA): Users should be able to adjust text spacing without loss of content:

  • Line height at least 1.5x font size
  • Paragraph spacing at least 2x font size
  • Letter spacing at least 0.12x font size
  • Word spacing at least 0.16x font size

Design layouts that can accommodate these spacing changes.

Images of Text

Avoid using images of text (WCAG 1.4.5 - Level AA). Use actual text styled with CSS instead.

Why? Images of text:

  • Can't be resized or customized by users
  • Look pixelated when zoomed
  • Can't be translated by browser translation tools
  • Don't work with user custom stylesheets

Exceptions: Logos and essential images where exact presentation is required.

Designing for Low Vision

Best practices:

  • Use high-contrast color schemes
  • Make text large enough (at least 16px for body text)
  • Provide generous line height (1.5 minimum)
  • Avoid long line lengths (45-75 characters is ideal)
  • Use clear, readable fonts
  • Provide ample whitespace
  • Ensure focus indicators are bold and visible

Testing Visual Accessibility

Quick tests you can run:

  1. Contrast check: Run all text through a contrast checker
  2. Grayscale test: View your site in grayscale (browser extensions available)—can you still tell what's interactive?
  3. Zoom test: Zoom to 200% and 400%—does everything still work?
  4. Color blindness simulation: Use tools like Colorblinding or Chromatic Vision Simulator
  5. Windows High Contrast Mode: Test on Windows with high contrast enabled
  6. Mobile in sunlight: Take your device outside—can you read the screen?

Key Takeaways

  • Normal text needs 4.5:1 contrast; large text needs 3:1.
  • UI components and graphics need 3:1 contrast with adjacent colors.
  • Never use color alone to convey information—add text, icons, or patterns.
  • Links need to be distinguishable (underline or sufficient contrast with surrounding text).
  • Text must be resizable to 200% without breaking layouts.
  • Content should reflow on narrow viewports without horizontal scrolling.
  • Tooltips and hover content must be dismissible, hoverable, and persistent.
  • Use actual text styled with CSS instead of images of text.
  • Test with contrast checkers, grayscale, zoom, and color blindness simulators.

With visual design covered, let's explore how screen readers and other assistive technologies interact with your site—and how to make sure they work well.