Accessibility Deep Dive: Accessible Color and Typography

Color and typography choices are where accessible color contrast requirements break down most often in practice. According to WebAIM’s 2026 analysis of one million home pages, low contrast text was found on 83.9% of sites, the most commonly detected WCAG failure for seven consecutive years, averaging 34 distinct instances per page. That number went up from 2025, not down.

This is part 2 of the Accessibility Deep Dive series. If you haven’t read part 1 on understanding WCAG guidelines, start there for the compliance framework that this post builds on. Part 3 covers screen reader optimization.

Why color contrast fails more than any other accessibility requirement

The most common culprit is light gray text on a white background. Designers choose it because it looks refined on a calibrated monitor in a controlled environment. It fails outdoors, on a phone screen, in bright sunlight outside a Montrose restaurant or a Heights hardware store. It fails for users with low vision. It fails automated audits. And it’s the single most reported WCAG issue on the web.

The second reason contrast fails so often: brand color palettes are created for print, signage, or environments where color perception is more forgiving. Digital screens are different. A color that reads clearly on a poster can drop below the WCAG threshold the moment it’s set against a white or near-white web background.

Accessibility tools catch this at scale, which is why the stat keeps climbing. The fix, in most cases, takes minutes.

WCAG contrast ratios explained

WCAG Success Criterion 1.4.3 defines two thresholds for Level AA compliance.

Normal text: 4.5:1 minimum. This applies to any text smaller than the “large text” threshold below.

Large text: 3:1 minimum. WCAG defines large text as 18pt (approximately 24px) or larger in regular weight, or 14pt (approximately 18.67px) or larger in bold. If your heading clears either threshold, you only need 3:1.

Non-text elements: 3:1 minimum. Under SC 1.4.11, form field borders, checkboxes, toggle states, and focus indicators must also clear 3:1 against adjacent colors. This is the requirement most sites miss after fixing their text.

The ratios are calculated mathematically from the relative luminance of each color, not by eyeballing. Two colors that look visually distinct can still fail, which is why tools exist.

How to check and fix a failing palette

Free tools that work: The WebAIM Contrast Checker is the standard. Enter two hex codes and it tells you the ratio and which WCAG levels pass. Chrome and Firefox DevTools flag contrast failures in their accessibility inspection panels. If your team works in Figma, several free plugins (Contrast, A11y Annotation Kit) surface issues before a single line of code is written.

Fixing without a rebrand. Most contrast failures can be resolved by adjusting the lightness value of the failing color while keeping hue and saturation intact. If your brand blue is #73A8D4 and it fails on white, shift it darker along the value scale until it passes: #2A6EA6 typically clears 4.5:1. The color reads as the same blue family to your audience. No rebrand needed.

When your brand colors genuinely fail. Some color pairs (particularly pastels and warm tones near white) cannot reach 4.5:1 without becoming unrecognizable. In that case, create a “digital accessibility” version of the color specifically for text use on screens. Document it as a design token so every developer uses the right value. The brand color survives on backgrounds, illustrations, and large headings where the 3:1 threshold applies.

If you want an objective read on your current palette, our web design work includes WCAG AA contrast verification as a baseline check before any site ships.

Accessible typography fundamentals

Color contrast gets the most attention, but typography choices produce their own accessibility failures.

Minimum body text size. The W3C WAI tutorials cite 16px as the practical minimum for body text. Anything smaller requires users to zoom, and WCAG requires that text can be resized to 200% without loss of content or function. Setting 16px as your CSS default and using relative units (rem, em) throughout means user font-size preferences are respected automatically.

Line height and line length. WCAG SC 1.4.8 recommends line spacing of at least 1.5 times the font size and a maximum line width of 80 characters. Tighter lines create tracking problems for users with dyslexia; lines that run the full width of a wide desktop viewport exhaust the eye before it reaches a line break. A practical range: 1.5–1.7 line-height for body copy, 60–80 characters per line.

Thin and light font weights. Weight 300 or below creates legibility problems at small sizes and on screens with lower pixel density. Weight 400 (regular) is the reliable minimum for paragraph text. Reserve thin and light weights for decorative display contexts where contrast and size give them room to work.

Avoid justified text. Justified alignment creates uneven word spacing that’s particularly disruptive for users with dyslexia or cognitive disabilities. Left-aligned text produces a ragged right edge, but that raggedness is a feature: word spacing stays consistent across every line.

For more on how typographic hierarchy works with accessibility, the earlier post on color psychology in web design covers how color and type choices interact to shape perception.

Color beyond contrast

Passing a contrast ratio check is necessary but not sufficient. Three additional requirements catch many otherwise compliant sites.

Never use color alone to convey information. WCAG SC 1.4.1 prohibits relying solely on color to distinguish elements. A form validation state shown only by turning a border red fails for color-blind users. The fix is a redundant cue: an icon, a label, or a text message alongside the color change.

Link underlines. Removing underlines from inline links is a common design choice that creates a compliance problem. WCAG SC 1.4.1 requires that links be distinguishable from surrounding text by something other than color alone. Underlines satisfy this. If you remove them, you need a visible non-color indicator on hover or focus, and the link must have a 3:1 contrast ratio against adjacent body text. The safest approach is to keep underlines.

Focus indicators. Every interactive element must show a visible focus ring for keyboard users. This is the most overlooked accessibility requirement on client sites we audit. Browser defaults are often removed with outline: none in CSS resets without a replacement. WCAG SC 2.4.11 (added in WCAG 2.2) requires focus indicators to meet a 3:1 contrast ratio and have a minimum area. Implement custom focus styles in your design system before removing the browser default.

Building an accessible color palette

The practical workflow: start with your brand hues, then adjust lightness values to hit contrast targets. Build a design token for each color role (text primary, text secondary, border, interactive) with the accessibility-verified value baked in. Use a contrast checker at every step. Run automated checks against the built site before launch.

Projects like Accubod required a fitness brand palette verified against contrast standards, and Applied Matter involved a full brand identity with accessible typography applied consistently across digital surfaces. Accessibility verification is not a separate phase: it’s part of the palette-building process.

The result is a site that works for every user, in every lighting condition, on every screen quality. That is the outcome, not the constraint.

---

Ready to check your site’s current contrast and typography baseline? Start a conversation. A color contrast audit is a practical first step before a larger accessibility project.

Frequently asked questions

What is the color contrast rule for accessibility?

WCAG Level AA requires a minimum contrast ratio of 4.5:1 between normal text and its background, and 3:1 for large text (18pt or larger, or 14pt bold or larger). UI components such as form borders and focus rings must also meet 3:1 against adjacent colors under WCAG Success Criterion 1.4.11.

How do I check color contrast for accessibility?

The free WebAIM Contrast Checker at webaim.org/resources/contrastchecker lets you enter foreground and background hex codes and instantly see whether the pair passes WCAG AA or AAA. Browser DevTools also flag contrast failures in the accessibility panel, and most design tools including Figma have contrast-checking plugins built in.

What counts as “large text” in WCAG?

WCAG defines large text as text that is at least 18 point (approximately 24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. Text meeting either threshold only needs a 3:1 contrast ratio rather than 4.5:1 to pass Level AA.

Can I use gray text on a white background and still be WCAG compliant?

It depends on the specific gray. Light grays such as #999999 on white (#ffffff) produce a contrast ratio of about 2.85:1, which fails WCAG AA for normal text. A darker gray such as #767676 achieves exactly 4.54:1 and passes. Use a contrast checker to verify your specific values before publishing. If your brand gray fails, darken it on the lightness axis while keeping the hue intact.