Color contrast and typography are fundamental to visual accessibility. Proper contrast ensures text is readable for users with low vision or color blindness, while good typography choices make content easier to read for everyone. These visual elements directly impact how accessible your website is to millions of users.
Why Color Contrast Matters
Insufficient color contrast affects many users:
- Low vision users: 285 million people worldwide have visual impairments
- Color blindness: Affects 1 in 12 men and 1 in 200 women
- Aging eyes: Vision naturally declines with age
- Environmental factors: Sunlight, screen glare, dim lighting
- Temporary conditions: Eye fatigue, screen time, bright environments
WCAG Contrast Requirements
WCAG defines specific contrast ratios between text and background:
Contrast Ratios Explained
Contrast ratio is measured from 1:1 (white on white) to 21:1 (black on white). Higher ratios mean better contrast.
WCAG Level AA (Minimum Standard):
- Normal text: 4.5:1 contrast ratio minimum
- Large text: 3:1 contrast ratio minimum (18pt+ regular or 14pt+ bold)
- UI components: 3:1 for interactive elements
WCAG Level AAA (Enhanced):
- Normal text: 7:1 contrast ratio
- Large text: 4.5:1 contrast ratio
Contrast Examples
Good Contrast (Passes WCAG)
good-contrast.css
/* ✅ Black on white: 21:1 (Perfect) */
.text-1 {
color: #000000;
background-color: #ffffff;
}
/* ✅ Dark gray on white: 12.6:1 (Excellent) */
.text-2 {
color: #333333;
background-color: #ffffff;
}
/* ✅ White on dark blue: 8.6:1 (Great) */
.text-3 {
color: #ffffff;
background-color: #1e3a8a;
}
/* ✅ Dark text on light background: 7.1:1 (AAA) */
.text-4 {
color: #1f2937;
background-color: #f3f4f6;
}Poor Contrast (Fails WCAG)
poor-contrast.css
/* ❌ Light gray on white: 1.6:1 (Fails) */
.text-fail-1 {
color: #cccccc;
background-color: #ffffff;
}
/* ❌ Medium gray on white: 2.9:1 (Fails for normal text) */
.text-fail-2 {
color: #999999;
background-color: #ffffff;
}
/* ❌ Yellow on white: 1.1:1 (Fails badly) */
.text-fail-3 {
color: #ffff00;
background-color: #ffffff;
}
/* ❌ Light blue on white: 3.2:1 (Fails for normal text) */
.text-fail-4 {
color: #60a5fa;
background-color: #ffffff;
}Testing Color Contrast
Use these tools to check your color contrast:
- WebAIM Contrast Checker: webaim.org/resources/contrastchecker
- Colour Contrast Analyser: Desktop app for Windows and Mac
- Browser DevTools: Chrome and Firefox have built-in contrast checkers
- WAVE: Browser extension that highlights contrast issues
- Lighthouse: Chrome's accessibility audit tool
Don't Rely on Color Alone
Never use color as the only way to convey information. Always provide additional visual cues:
color-alone.html
<!-- ❌ BAD: Color only -->
<p style="color: red;">Error: Invalid input</p>
<p style="color: green;">Success: Form submitted</p>
<!-- ✅ GOOD: Color + icon + text -->
<p style="color: #dc2626;">
<span aria-hidden="true">⚠️</span>
<strong>Error:</strong> Invalid input
</p>
<p style="color: #16a34a;">
<span aria-hidden="true">✓</span>
<strong>Success:</strong> Form submitted
</p>
<!-- ❌ BAD: Required fields shown only by color -->
<label style="color: red;">Email</label>
<!-- ✅ GOOD: Required indicated with text -->
<label>
Email <span aria-label="required">*</span>
</label>
<!-- ❌ BAD: Links distinguished only by color -->
<p>
Visit our <span style="color: blue;">homepage</span> for more info.
</p>
<!-- ✅ GOOD: Links with underline -->
<p>
Visit our <a href="/" style="text-decoration: underline;">homepage</a> for more info.
</p>Typography for Accessibility
Font Size
Choose appropriate font sizes for readability:
font-sizes.css
/* Minimum font sizes */
body {
/* Base size should be at least 16px */
font-size: 16px;
line-height: 1.5;
}
/* Heading hierarchy */
h1 {
font-size: 2.5rem; /* 40px */
line-height: 1.2;
}
h2 {
font-size: 2rem; /* 32px */
line-height: 1.3;
}
h3 {
font-size: 1.5rem; /* 24px */
line-height: 1.4;
}
/* Small text (use sparingly) */
.small-text {
font-size: 0.875rem; /* 14px minimum */
/* Smaller than 14px is hard to read */
}
/* Large text for emphasis */
.lead {
font-size: 1.25rem; /* 20px */
line-height: 1.6;
}Line Height (Leading)
Proper line spacing improves readability significantly:
line-height.css
/* ❌ BAD: Too tight */
.tight-text {
line-height: 1.0; /* Lines too close together */
}
/* ✅ GOOD: Comfortable spacing */
.body-text {
line-height: 1.5; /* WCAG recommends at least 1.5 */
}
/* ✅ GOOD: Generous spacing for long-form content */
.article-text {
line-height: 1.6;
}
/* Paragraphs need bottom margin too */
p {
margin-bottom: 1em;
line-height: 1.5;
}Line Length (Measure)
Limit line length to prevent eye strain:
line-length.css
/* ❌ BAD: Full-width text on large screens */
.full-width {
width: 100%; /* Can be 200+ characters per line */
}
/* ✅ GOOD: Optimal line length */
.readable-text {
max-width: 65ch; /* 65 characters per line */
/* Or 600-750px for typical fonts */
}
/* ✅ GOOD: Container with max-width */
.content-container {
max-width: 42rem; /* ~672px */
margin: 0 auto;
padding: 0 1rem;
}
/* Narrower for large text */
.large-text {
max-width: 45ch;
font-size: 1.25rem;
}Font Family Choices
Choose fonts that are clear and easy to read:
font-families.css
/* ✅ GOOD: System font stack (fast and readable) */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ✅ GOOD: Popular web fonts */
body {
font-family: 'Inter', 'Open Sans', 'Roboto', sans-serif;
}
/* ❌ AVOID: Decorative fonts for body text */
.bad-body {
font-family: 'Brush Script MT', cursive; /* Hard to read */
}
/* ✅ OK: Decorative fonts for headings only */
h1 {
font-family: 'Playfair Display', serif;
}
/* Monospace for code */
code {
font-family: 'Monaco', 'Courier New', monospace;
}Letter Spacing and Word Spacing
spacing.css
/* Default spacing is usually fine */
.normal-text {
letter-spacing: normal;
word-spacing: normal;
}
/* Sometimes helpful for ALL CAPS */
.uppercase-text {
text-transform: uppercase;
letter-spacing: 0.05em; /* Slightly wider */
}
/* ❌ AVOID: Negative letter spacing */
.cramped {
letter-spacing: -0.05em; /* Makes text harder to read */
}
/* WCAG SC 1.4.12: Users must be able to adjust spacing */
/* Don't use !important to prevent user overrides */Text Alignment
text-alignment.css
/* ✅ BEST: Left-aligned for body text (LTR languages) */
.body-text {
text-align: left;
}
/* ✅ OK: Center for short headings */
h1 {
text-align: center;
}
/* ❌ AVOID: Justified text */
.justified {
text-align: justify;
/* Creates uneven spacing, hard to read for dyslexia */
}
/* ❌ AVOID: Right-aligned body text (for LTR languages) */
.right-align {
text-align: right; /* Harder to read */
}Responsive Typography
responsive-typography.css
/* Base size */
html {
font-size: 16px;
}
/* Scale up on larger screens */
@media (min-width: 768px) {
html {
font-size: 18px;
}
}
/* Fluid typography (modern approach) */
body {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
/* Min 16px, scales with viewport, max 20px */
}
/* Ensure text can be zoomed */
/* Never use: font-size: 16px !important; */
/* This prevents browser zoom */Respecting User Preferences
Allow users to customize their viewing experience:
user-preferences.css
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Respect color scheme preference */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e5e5e5;
}
}
/* Support high contrast mode */
@media (prefers-contrast: high) {
body {
color: #000;
background-color: #fff;
}
a {
text-decoration: underline;
}
}Designing for Color Blindness
About 8% of men and 0.5% of women have some form of color blindness:
- Red-Green: Most common (deuteranopia, protanopia)
- Blue-Yellow: Less common (tritanopia)
- Total: Very rare (achromatopsia)
color-blind-friendly.css
/* ❌ BAD: Red and green for success/error */
.error { color: #ff0000; }
.success { color: #00ff00; }
/* ✅ GOOD: Sufficient contrast + icons + labels */
.error {
color: #dc2626; /* Dark red with good contrast */
border-left: 4px solid currentColor;
}
.success {
color: #16a34a; /* Dark green with good contrast */
border-left: 4px solid currentColor;
}
/* ✅ BETTER: Use patterns, not just colors */
.status-error::before {
content: "⚠️ ";
}
.status-success::before {
content: "✓ ";
}
/* Data visualization: Use patterns + color */
.chart-bar-1 {
background: repeating-linear-gradient(
45deg,
#3b82f6,
#3b82f6 10px,
#60a5fa 10px,
#60a5fa 20px
);
}Interactive Elements
Buttons, links, and form controls need sufficient contrast:
interactive-contrast.css
/* Links must be distinguishable */
a {
color: #0066cc; /* Good contrast on white */
text-decoration: underline; /* Not color alone */
}
a:hover {
color: #004499; /* Darker on hover */
}
a:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
/* Button contrast */
.button {
background-color: #0066cc;
color: #ffffff;
border: 2px solid #0066cc;
padding: 0.5rem 1rem;
/* 3:1 minimum for UI components */
}
.button:hover {
background-color: #0052a3;
border-color: #0052a3;
}
/* Input fields */
input {
border: 2px solid #6b7280; /* 3:1 contrast with background */
padding: 0.5rem;
}
input:focus {
border-color: #0066cc;
outline: 2px solid #0066cc;
outline-offset: 2px;
}Common Mistakes to Avoid
- Gray text on white background (often fails contrast requirements)
- White or light text on light backgrounds
- Using color alone to convey information
- Font sizes smaller than 14px for body text
- Line heights less than 1.5 for paragraphs
- Justified text alignment
- Decorative fonts for body text
- Line lengths over 80 characters
- Insufficient contrast on hover/focus states
- Disabling user zoom or text resizing
Visual Accessibility Checklist
Check your design for:
- ✓ Text has 4.5:1 contrast ratio minimum
- ✓ Large text has 3:1 contrast minimum
- ✓ Information not conveyed by color alone
- ✓ Base font size is at least 16px
- ✓ Line height is at least 1.5 for paragraphs
- ✓ Line length is 65 characters or less
- ✓ Links are underlined or clearly distinguished
- ✓ Text can be resized to 200% without loss of content
- ✓ Focus indicators have sufficient contrast
- ✓ Fonts are readable and clear
Key Takeaways
- Maintain 4.5:1 contrast ratio for normal text, 3:1 for large text (WCAG AA)
- Never rely on color alone to convey information
- Use font sizes of at least 16px for body text
- Set line height to 1.5 or greater for readability
- Limit line length to around 65 characters
- Choose clear, readable fonts over decorative ones
- Test your color contrast with automated tools
- Allow users to customize text size and spacing
- Consider color blindness when choosing color schemes
What's Next?
You now understand how to create visually accessible content through proper color contrast and typography. In the next lesson, we'll explore testing for accessibility using various tools and techniques to ensure your website meets accessibility standards.