Color contrast and typography: accessibility standards that improve readability for everyone

Key takeaways

• WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as 18 point (about 24px) regular or 14 point (about 18.7px) bold.
• Low contrast is the most common accessibility failure on the web: the 2026 WebAIM Million report found low-contrast text on 83.9% of the top one million home pages.
• Color vision deficiency is common. Live Science, citing Cleveland Clinic, reports it affects about 1 in 12 males and 1 in 200 females, so color should never be the only way to convey meaning.
• Readable typography goes beyond contrast: text must resize to 200%, reflow on small screens and stay usable when people increase line, letter and word spacing.
• Fixing contrast and type in your theme and design system corrects the problem site-wide and makes pages easier for every visitor to read.

Color contrast and typography decide whether people can read your website at all. The WCAG thresholds are not arbitrary; they reflect the contrast needed by people with moderately low vision, which includes many older adults. The same choices help anyone reading on a phone in sunlight or on a dim laptop screen. This Emulent guide explains the contrast and typography standards, how to test your site, how to fix it without losing your brand and how the work supports SEO and conversions. It is general guidance, not legal advice.

What contrast ratios does WCAG require?

Contrast ratio compares the relative brightness of text and its background, from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 Level AA sets these minimums:

• Normal text: 4.5:1 against its background.
• Large text: 3:1, for text at least 18 point (about 24px) regular or 14 point (about 18.7px) bold.
• Interface components and graphics: 3:1 for button borders, form field outlines, focus indicators, icons and the parts of charts needed to understand them.
• Text over images: the contrast rule still applies, so use a solid or semi-opaque overlay behind headline text on photos and sliders.
• Placeholder and disabled-looking text that users still need to read must meet 4.5:1 as well.

Logos and purely decorative text are exempt. Level AAA raises the bar to 7:1 for normal text, a useful target for long-form reading even though AA is the usual requirement.

How should typography and color support readability?

Readable type is about size, spacing and flexibility as much as color. These WCAG requirements and best practices work together:

• Do not use color alone: links in body text need an underline or another cue, and form errors need text as well as a red border.
• Resize text: content stays readable and functional at 200% browser zoom.
• Reflow: at a 320-pixel width, content fits without horizontal scrolling.
• Text spacing: nothing breaks or gets cut off when users set line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times.
• Real text instead of images of text, so it can be resized, read aloud and translated.
• A comfortable body size, commonly 16px or larger, with line height around 1.5 and line length of roughly 50 to 75 characters.
• Relative units such as rem and em, so text scales with user settings.
• Limited use of all caps, italics and thin font weights for long passages, since they slow reading.

How do you test color contrast and typography?

Contrast is one of the easiest accessibility issues to find, which is also why it shows up so often in audits and complaints.

• Use WebAIM’s Contrast Checker or the contrast tools in Chrome DevTools to check specific color pairs.
• Run WAVE, axe DevTools or Google Lighthouse to flag low-contrast text across a page.
• Check every state: default, hover, focus, visited, disabled and error.
• Test text on images and gradients at several screen sizes, since the background behind the text shifts.
• Zoom to 200% and 400% and look for overlapping, clipped or hidden text.
• Use a text spacing bookmarklet to apply the WCAG spacing values and see what breaks.
• Preview pages with a color blindness simulator to confirm meaning is not carried by color alone.

How do you fix contrast without losing your brand?

Most brands can meet the standard by adjusting shades rather than changing colors. Build accessible pairings into your design system once and apply them everywhere.

• Darken or lighten brand colors a few steps for text use, and keep the original shade for large display elements and backgrounds where 3:1 is enough.
• Replace light gray body text with a darker gray that passes 4.5:1.
• Define approved text and background pairs and share them with designers and content editors.
• Add overlays behind text on hero images and sliders.
• Set global typography in the theme so headings, body text, buttons and links inherit accessible values.

On WordPress sites, set colors and typography in the theme options and element defaults, then remove one-off inline styles that override them. Skip overlay widgets with contrast toggles; UsableNet counted more than 1,400 lawsuits in 2025 against companies that had accessibility widgets installed. Readable pages also help SEO and conversions indirectly, since visitors who can read your content stay longer and act on it. Results vary by site and audience.

How the Emulent team can help

Emulent audits color contrast and typography across every page state, then builds accessible color pairings and type scales that keep your brand recognizable. Our website design team applies the fixes at the theme level so they carry across your entire site and stay in place as you add content. To make your website easier for everyone to read, contact the Emulent team.