Accessible text design: WCAG rules and recommendations
The BFSG has applied since 28 June 2025 to specific products and consumer services. Assess your offering with the BFSG check solution. The checks below help you find technical barriers on your website.
Readable text helps people understand content and find their way around your website.
Accessibility is not a direct Google ranking factor (Google Search Central). Clear headings help people navigate and search engines understand the content.
1. Simple Language & Clear Phrasing for Better Accessibility
Avoid jargon. Clear, simple language is the foundation of accessible communication.
-
Short sentences: Maximum 15-20 words per sentence for better understanding.
-
Simple terms: Avoid technical terms or explain them directly.
-
Direct address: Use "You" instead of passive, impersonal formulations.
Example of simple language & clear phrasing:
-
Complex: "Our innovative web solution enables a holistic implementation of accessible standards."
-
Accessible: "Our solution helps you make your website easily accessible."
2. Accessible Font Size & Reader-Friendly Layout
Texts must be visually accessible – regardless of the device or visual acuity.
WCAG sets no minimum font size. Under 1.4.4, text must resize to 200% without losing content or functionality, except for captions and images of text. A 16 px body font is a design recommendation, not a WCAG requirement.
Sans-serif fonts like Arial, Verdana, or Roboto improve readability.
A line height of 1.5 can be a useful starting point. WCAG 1.4.12 requires support for user-defined text spacing without loss of content or functionality; it does not prescribe default spacing.
Example of optimal text design:
-
Bad: Long, unstructured paragraphs without subheadings.
-
Good: Clearly structured paragraphs with bullet points and highlights.
3. Color Contrasts & Visual Accessibility according to WCAG 2.1
Poor contrast makes content unreadable – especially for people with low vision or color blindness.
- High contrast ratio (min. 4.5:1 according to WCAG 2.1) for good readability.
Do not rely solely on color coding (e.g., Red/Green) for colorblind users – supplement with symbols & text.
Avoid background colors that make reading difficult (e.g., light gray text on a white background).
Example of accessible color design:
-
Bad: Light gray text on white background → hard to read.
-
Good: Dark blue text on white background → high contrast, easy to read.
4. Structured Content & Visual Organization for Better Orientation
Structure provides clarity – for readers and search engines.
Hierarchical headings (H1-H3) for better navigation.
Lists & paragraphs instead of long text blocks for easy comprehension.
Alternative texts (Alt tags) for images & infographics so screen readers can read them.
Example of structured content & visual organization:
-
Bad: "Here are our products. They are modern, flexible, and help you."
-
Good:
- Our Products
- Modern: Always up-to-date.
- Flexible: Adaptable to your needs.
- Accessible: Compliant with WCAG 2.1 standards.
- Our Products
Checklist: Accessible Readability & Text Design
-
Font size: Consider 16 px body text as a recommendation; test resizing to 200%.
-
Font Type: Prefer easily readable sans-serif fonts (e.g., Arial, Verdana, Lato).
-
Text spacing: Overriding line height to 1.5, paragraph spacing to 2em, letter spacing to 0.12em and word spacing to 0.16em must preserve content and functionality (1.4.12).
-
Paragraph Spacing: Significantly larger than line spacing (min. 2x font size recommended).
-
Line Length: Ideally 50–75 characters per line.
-
Text Alignment: Left-aligned text is most readable.
-
Contrast: Minimum contrast of 4.5:1 for normal text (WCAG AA).
-
No Justified Text: Creates irregular word spacing.
-
Emphasis: Use sparingly, primarily bold instead of italics or ALL CAPS.
-
Understandable Language: Clear phrasing, short sentences, avoidance of jargon.
Explore criteria in the WCAG hub. Use the Accessibility Audit for machine-evaluable findings and add manual tests.
Further reading and sources
Stay Updated
Get accessibility tips and updates.
Our Top Posts:
- •BFSG Checklist: How to Implement Website Accessibility for Your Business
- •navable MCP v0.2: Dual-Engine Scanning (axe-core + Pa11y/HTMLCS) in One Scan
- •Automate Web Accessibility with AI | navable MCP
- •Install the navable Widget in WordPress: Step by Step
- •BFSG: Which Companies Are Affected? Scope and Exemptions
- •Free Accessibility Testing Directly in VS Code with axe DevTools
- •Accessibility for Agencies: How navable Speeds Up Your Audits
- •Accessible Navigation & Structure according to BFSG | Checklist & Solutions for Accessible Websites
