Variable Fonts Accessibility & WCAG 2.2: Why Fonts Aren't Certificates

A variable font cannot certify your rebrand’s accessibility. The finished website must remain usable when readers enlarge the text, change the spacing, or use a narrow screen.

That distinction matters before you approve the new identity. WebAIM, the web accessibility organisation, detected low-contrast text on 83.9% of the one million home pages analysed in its 2026 automated study.

The finding concerns those home pages, not every website, but it shows how frequently a basic text-presentation problem survives launch.

Start with your brand's typography, not the sales pitch for the font. 

Typography approval is one part of a wider brand identity system; the website implementation needs its own evidence.

Do variable fonts establish accessibility?

Variable font accessibility depends on the selected font settings and the implemented page. 

The World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.2 specify outcomes for contrast, resizing, reflow and spacing overrides. 

For brand typography, four specific criteria govern page-level compliance:

• Contrast Minimum (SC 1.4.3): Normal text must maintain a visual colour contrast ratio of at least 4.5:1 against its background, while large text (at least 24 CSS pixels or 18.67 CSS pixels bold) requires a minimum ratio of 3:1.
• Resize Text (SC 1.4.4): Text must be enlarged up to 200% via browser zoom without assistive technology, without loss of content, truncation, or disruption of interactive functionality.
• Reflow (SC 1.4.10): Content must reflow smoothly to a width of 320 CSS pixels (representative of modern mobile viewports) without requiring two-dimensional scrolling.
• Text Spacing (SC 1.4.12): Author styling must tolerate reader-applied overrides to line height, paragraph spacing, letter spacing, and word spacing without causing content to disappear or overlap adjacent containers.

Variable fonts provide technical flexibility across these criteria, but conformance remains a property of the finished website architecture.

Must we change our brand’s default spacing?

No. WCAG 2.2 SC 1.4.12 does not require your website to use the criterion’s spacing values as its default design. The requirement concerns what happens when a reader overrides the authored spacing.

That answers a reasonable objection. Your designers may have spent weeks refining the relationship between headings, paragraphs and service cards. 

Replacing every default with a single spacing prescription would treat different typefaces and layouts as interchangeable.

The actual requirement leaves room for the identity. 

For content implemented in markup languages supporting these properties, the page must tolerate all the following settings together, without changing other style properties and without losing content or functionality:

WCAG includes an exception for languages and scripts that do not use particular properties. These are not instructions to apply Latin-script spacing conventions indiscriminately.

Consider a hypothetical accountancy website with fixed-height service cards. The default paragraph fits. 

A reader increases spacing, the paragraph becomes taller, and the final sentence disappears behind an enquiry button.

The font may remain attractive. The component has failed.

Allowing the card to grow, the heading to wrap, and the button to move down preserves access to the content. Treat those behaviours as part of the design specification.

The same principle applies to typography hierarchy. A heading should remain identifiable when the page changes shape; hierarchy should not depend on preserving one exact arrangement of lines.

Why does thin text remain difficult to read after passing contrast?

A contrast result answers a colour question. A thin-stroke reading problem requires a separate examination of the letterforms and settings.

These correspond to 24 CSS pixels and approximately 18.67 CSS pixels respectively. A heading label alone does not qualify text for the lower ratio.

Changing a weight setting does not, by itself, change the specified foreground and background colours. Do not treat a heavier weight as permission to ignore their contrast ratio.

Reading performance adds another question. Silvia Guidi, Anna Kosovicheva and Benjamin Wolfe investigated variable-font thin-stroke thickness and letter width in research presented at the 2025 Vision Sciences Society conference. 

The researchers tested nine combinations and measured sentence-presentation durations needed for 80% classification accuracy.

The thinnest strokes produced the slowest performance across the tested width conditions. That finding supports inspecting the settings actually used, rather than assuming every point on an adjustable axis is equally suitable for reading.

Keep the limitation attached. This is conference-abstract evidence from a controlled task. The result does not establish a universally safe weight number or constitute a WCAG test.

Font selection is similarly conditional. Brian Ho Sang and Diana Petrarca’s systematic review, published in Visible Language in December 2025, examined 42 empirical studies from 2000–2025. 

The review concerns Latin-alphabet typography and does not recommend a single typeface or size as optimal for all readers and situations. There is no evidence that variable fonts outperform static fonts.

Nominal size also needs care. Ben D. Sawyer and colleagues’ 2025 study involved 60 participants and distinguished print size from x-height: the height of lowercase letterforms. 

Print size affected reading speed; further modelling found that the influence of x-height depended on size. The reported small-size advantage was marginal and did not extend across larger sizes.

The approval consequence is straightforward: inspect real paragraphs, labels and buttons at their intended settings. A font specimen and a passing colour pair leave important questions unanswered.

What can variable-font controls actually improve?

A variable font offers adjustable design axes within the font’s supported range. MDN Web Docs, the web-platform documentation resource, describes axes including weight, width and optical size; individual fonts do not necessarily offer every axis.

For a professional services website, evaluate the controls against a specific reading or layout problem:

• Weight changes stroke appearance. Assess the result at the actual body-copy size.
• Width changes letter proportions. Check that a compact heading remains comfortable to read.
• Optical size can adapt the design for different text sizes when the font supports the axis.
• Grade changes relative stroke density without changing the space occupied by the text, where supported.

Width control can help a heading fit a component, but squeezing letters to preserve a one-line heading makes the wrong thing compulsory. Allow wrapping first.

Optical sizing also needs a boundary. MDN describes optical-size values as generally intended to correspond to font size, with font-optical-sizing enabling or turning off automatic optical sizing. The feature adjusts the design; it does not enlarge the text or replace the resizing outcome required by WCAG.

Developers should also examine low-level axis declarations. MDN documents that font-variation-settings can override corresponding higher-level font properties. A hard-coded weight-axis value, therefore, warrants review if ordinary weight styling proves ineffective.

Choose the font for the required settings and supported uses. 

Check font licensing before committing the identity to deployment on the website.

Do we need custom font-size or weight controls?

A font-size slider is not automatically required by the typography criteria discussed here. WCAG 2.2 SC 1.4.4 specifies a resizing outcome; the criterion does not prescribe a custom website slider.

For a conventional advisory website, begin by testing the existing browser resizing behaviour. A custom control does not compensate for clipped text, disappearing buttons or a layout that refuses to reflow.

A specialist reading interface may justify additional controls if user research identifies a need. Treat that as a product decision with its own scope and testing, rather than a feature added to make the website appear accessible.

The same caution applies to weight sliders. Offering more settings does not establish that every setting is readable. The 2025 variable-font experiment found performance differences across the tested stroke settings; an adjustable range is not a set of equally suitable defaults.

What should an agency demonstrate before typography sign-off?

Ask for evidence from representative pages, not a screenshot of the homepage at its default settings.

For a law, accountancy or consulting firm, include a service page, partner biography, long article and enquiry form. These are proposed test samples, not a claim that four pages establish whole-site conformance.

Request the following typography checks:

1. Contrast: record foreground/background pairs for body copy, small labels and text appearing over images. Apply the relevant SC 1.4.3 threshold and exceptions.
2. Resizing: enlarge text to 200% without assistive technology. Confirm that content and functionality remain available under SC 1.4.4.
3. Spacing: apply all four SC 1.4.12 overrides together. Check cards, menus, form instructions and error messages.
4. Reflow: for vertically scrolling content, test a width equivalent to 320 CSS pixels. SC 1.4.10 generally requires no loss of information or functionality and no two-dimensional scrolling, except for content requiring a two-dimensional layout.
5. Reading: inspect the actual font settings with representative readers. Keep these observations separate from the standards results.

Ask for a record of the tested URL, component, browser, setting and result. “Tested at 200%” is incomplete unless the record indicates whether the enquiry button remained visible and usable.

These checks cover typography-related issues. WCAG conformance applies to full pages and complete processes, so passing the checklist cannot certify the whole website.

Approve the behaviour, not the font label

A successful typography handover gives your team evidence: colour pairs checked, spacing overrides applied, enlarged text retained, and narrow layouts inspected.

The design principle here is simple: preserve identity without making a single presentation compulsory for every reader.

If the wider rebrand needs scrutiny, request Inkbot Design’s free Brand Equity Audit™ to examine positioning, messaging and visual consistency. That commercial brand diagnostic is not a technical WCAG conformance audit; commission a specialist accessibility evaluation where that is the requirement.

Before approving the typography, ask the agency to demonstrate what happens when a reader changes it.