Accessible Font Sizing, Explained

The Web Content Accessibility Guidelines (WCAG) don't mandate a minimum font size for web content. However, ensuring readability is crucial. This article explores best practices for accessible font sizing, focusing on WCAG requirements and leveraging browser defaults.

Readability: Contrast and Character Variety

WCAG prioritizes contrast over a fixed size. Text must meet a minimum 4.5:1 contrast ratio (3:1 for large text). Tools like WebAIM's Contrast Checker can help. The complexity of various alphabets (around 300 globally) means a single minimum size isn't universally applicable. WCAG defines "large text" based on language-specific minimum large print sizes, measured in points (not pixels). For Roman text, 18 points (which might equate to 24px depending on screen density) is considered "large".

In essence, WCAG specifies contrast, not a precise font size.

Fortunately, browser default styles are inherently accessible. Let's leverage them.

Proportions, Not Fixed Sizes

Browser default styles (user agent stylesheets) precede author styles and user styles. Many users adjust their default browser font sizes. We also lack complete control over font-family due to factors like translation, font loading failures, or user-selected fonts (like OpenDyslexic).

Therefore, focus on proportions, not absolute sizes. Use CSS relative units (WCAG recommends em units) to ensure content scales appropriately to the user's environment. Consider using rem and em units consistently (except for borders, where pixels are often preferable).

Avoid Setting a Base Font Size

Generally, avoid setting font-size on the :root, , or elements. Let the browser's default accessible size serve as the baseline. The WCAG 2.2 working draft suggests that the default font size used by major browsers for unspecified text provides a reasonable baseline.

Exceptions exist. Intricate, thin, or short x-height fonts might require a slightly larger base font size to achieve sufficient contrast. Remember: contrast, not size, is the key WCAG metric. Unusual fonts may require larger sizes to maintain readability, especially at lower contrast levels. Users can still adjust the base font size to their preference.

Maintain proportions: define relative size adjustments (e.g., .small, .large) based on the browser's default.

:root {
  /* Do not set a font-size here */
}
.small {
  font-size: .8rem;
}
.large {
  font-size: 2rem;
}

Headings

Maintain heading order (h1, h2, h3, etc.) for screen reader accessibility. Resetting heading font sizes to 1rem can decouple visual styling from semantic meaning.

Working with Pixels

To translate pixel-based designs into relative units:

Method 1: The 62.5% Rule

Setting font-size: 62.5%; on the :root makes 1rem equal to 10px, simplifying pixel-to-rem conversion.

Method 2: Using calc()

Use calc() to dynamically calculate rem values based on the assumed 16px browser default.

Method 3: Pixel-to-rem Function

Utilize preprocessor functions (Sass mixins, styled-components polish) or even create a custom CSS function for pixel-to-rem conversion.

Conclusion

Prioritize proportional sizing using rem units, leverage browser defaults, and avoid assumptions about user settings. This approach ensures accessibility across diverse browsers, devices, and user preferences. Thanks to Franco Correa for his assistance.

The above is the detailed content of Accessible Font Sizing, Explained. For more information, please follow other related articles on the PHP Chinese website!