Understanding WCAG SC 1.4.5: Images of Text (AA)

Section 1: The Foundational Principle: Why Text Must Be Text

In the landscape of digital accessibility, few principles are as fundamental as the mandate to use actual, machine-readable text to convey information. The Web Content Accessibility Guidelines (WCAG) address this directly in Success Criterion (SC) 1.4.5: Images of Text. This Level AA criterion is not merely a technical directive but a foundational pillar that enables user customization, ensuring that digital content is adaptable to a wide spectrum of human needs. Understanding its intent, context, and definitions is the first step toward creating web experiences that are both visually compelling and universally accessible.

1.1 The Normative Text and Its Context

The official WCAG 2.1 text for Success Criterion 1.4.5 is precise and conditional:

"If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

• Customizable: The image of text can be visually customized to the user's requirements;
• Essential: A particular presentation of text is essential to the information being conveyed."

To fully grasp its significance, it is essential to situate SC 1.4.5 within the broader WCAG framework. It resides under Principle 1: Perceivable, which dictates that "Information and user interface components must be presentable to users in ways they can perceive". More specifically, it falls under Guideline 1.4: Distinguishable, which aims to "Make it easier for users to see and hear content including separating foreground from background". This placement is critical; it frames the issue of "images of text" not as a simple coding mistake but as a direct barrier to perception. The problem is not that the information is absent, but that it is locked in a format that prevents many users from perceiving it effectively.

1.2 The Core Intent: Empowering Users Through Customization

The primary intent of SC 1.4.5 is to empower users by ensuring that text presentation can be adapted to their individual requirements. Many users with visual or cognitive disabilities cannot consume content with the author's default styling. They rely on the ability to change various text properties, including:

• Font size
• Foreground and background color combinations
• Font family (typeface)
• Line spacing and alignment

When text is rendered as an image, these properties are fixed. The text becomes a static, unalterable part of a picture, stripping the user of their ability to make it readable. Therefore, the criterion strongly encourages authors to present information as actual text styled with technologies like Cascading Style Sheets (CSS) whenever the desired visual effect can be achieved.

This guideline is not an argument against rich, stylized typography. On the contrary, it is a mandate to achieve such styling through modern, flexible, and accessible means. The historical rationale for using images of text—such as limited font availability or poor browser support for advanced styling—is now largely obsolete. The criterion's opening clause, "If the technologies being used can achieve the visual presentation," directly acknowledges this technological progress. It implicitly argues that since CSS and web fonts are now robust and widely supported, the reliance on inaccessible image-based text is no longer justifiable in most scenarios. It reframes the guideline from a restrictive rule into an encouragement to adopt superior, modern techniques that benefit all users.

1.3 Defining "Image of Text"

For the purposes of this criterion, an "image of text" is defined as text that has been rendered in a non-text format (e.g., a raster image like a PNG, JPEG, or GIF) to achieve a particular visual effect. This is text that is intended to be read.

However, a crucial distinction is made in a note within the official WCAG definition: "This does not include text that is part of a picture that contains significant other visual content". This is a frequent point of confusion. The criterion is not targeting text that happens to be within a larger, informative image. Examples of such pictures where the text is ancillary to the main visual information include:

• Graphs and Charts: The text labels on the axes or data points of a graph are part of a larger visual representation of data.
• Screenshots: A screenshot of a software application may contain text in its user interface, but the primary purpose is to show the interface itself.
• Diagrams: A diagram illustrating a process may have text labels on its components.

In these cases, the image as a whole conveys complex information, and the text is just one component of that information. The accessibility of such images is primarily addressed by SC 1.1.1 Non-text Content, which requires a text alternative (alt text) that describes the full meaning of the image, including the information conveyed by the text within it. SC 1.4.5, by contrast, specifically targets situations where text itself is the primary information being conveyed, but has been unnecessarily converted into an image format.

Section 2: The Human Impact: Accessibility Barriers of Static Text Images

The prohibition against using images of text is not an abstract technicality; it is rooted in the real-world, tangible barriers that such practices create for people with disabilities. When designers and developers opt for static text images, they inadvertently exclude a significant portion of their audience. Understanding these human impacts is essential for appreciating the gravity of the criterion.

2.1 The Experience for Users with Low Vision

For individuals with low vision, the ability to magnify and customize text is not a convenience—it is a prerequisite for access. Images of text fundamentally break these essential adaptation strategies.

• Degradation on Magnification: The most common tool for users with low vision is screen magnification, either through browser zoom functions or dedicated software. When real HTML text is enlarged, it retains its sharpness and clarity because it is rerendered by the browser at the new size. In contrast, raster images of text (such as JPG and PNG files) are composed of a fixed grid of pixels. When magnified, these pixels are simply made larger, causing the text to become blurry, jagged, and often unreadable. This degradation directly impedes the user's primary method for accessing the content.
• Inability to Customize Contrast and Colors: Many people with low vision require high-contrast color schemes (e.g., yellow text on a black background) to distinguish text from its background. Others, particularly those with conditions like photophobia (extreme light sensitivity), need low-brightness combinations (e.g., gray text on a dark gray background) to read without pain. User-defined style sheets and browser settings allow individuals to apply these custom color schemes across the web. However, images of text have hard-coded colors that cannot be overridden by these tools. The author's chosen color palette is locked in, which can render the text completely illegible or even physically painful for some users to view.

2.2 The Barrier for Screen Reader Users

Users who are blind or have severe low vision rely on screen reader software, which converts digital text into synthesized speech or braille output. To a screen reader, text embedded within an image is functionally invisible.

• Invisibility of Content: A screen reader cannot parse the pixels of an image to discern the characters within it. It recognizes the element as an image, not as text. Without a proper text alternative, the user may hear only the image's filename (e.g., "header_banner_final_v2.png") or a generic announcement like "image," effectively hiding the information completely.
• The Inadequacy of Alt Text: While SC 1.1.1 requires a text alternative (alt text) for informative images, this is an insufficient substitute for structured text. Consider an event flyer presented as a single image. The alt text might contain all the event details, but it will be read by the screen reader as one long, undifferentiated string of text. All semantic structure—headings, lists, paragraphs, and emphasis—is lost. The user is denied equivalent access to the information's organization and hierarchy, making it much harder to comprehend and navigate.

2.3 The Challenge for Users with Cognitive and Reading Disabilities

The presentation of text can significantly impact reading comprehension and speed for individuals with cognitive disabilities, including dyslexia.

• Font and Spacing Requirements: Research and user experience have shown that certain fonts, increased letter spacing (letter-spacing), and greater line spacing (line-height) can dramatically improve readability for many people with dyslexia and other visual tracking difficulties. They may use browser extensions or custom style sheets to apply these specific formatting rules to all web content. Images of text, with their fixed typographical properties, prevent these crucial user-driven adaptations. The user is forced to contend with the author's styling, which may constitute a significant barrier to reading.

2.4 Universal Usability Degradation

The problems caused by images of text extend beyond users with disabilities, negatively impacting the experience for everyone.

• Mobile Responsiveness: In a responsive design, real text naturally reflows to fit the available screen width. Images of text, however, do not. On a small mobile screen, an image of a paragraph will either shrink to a point where the text is too small to read or force the user to scroll horizontally to read each line, a universally frustrating experience.
• Functionality and SEO: Real text is functional. It can be selected, copied, and pasted. It can be translated by browser tools. It is also indexable by search engines. Text locked within an image offers none of these capabilities. This not only frustrates users who want to copy an address or phone number but also harms the website's search engine optimization (SEO), as the content is invisible to search crawlers.

The decision to use an image of text is rarely an isolated mistake. More often, it initiates a cascade of compliance failures across multiple WCAG success criteria, making it a high-impact violation. For instance, a developer might use an image for a website's main heading to achieve a specific visual effect, thereby violating SC 1.4.5. If this heading is placed over a complex background image, it becomes nearly impossible to maintain the required 4.5:1 contrast ratio across the entire text, leading to a likely failure of SC 1.4.3 (Contrast (Minimum)). Furthermore, when a user with low vision employs a text-only zoom feature, the body text will resize, but the image-based heading will not. This creates a disjointed experience and violates the principle behind SC 1.4.4 (Resize Text), which exists to prevent such loss of content and functionality. Finally, if the developer provides inadequate or missing alt text for the image, it also becomes a failure of SC 1.1.1 (Non-text Content). This chain reaction demonstrates that adhering to SC 1.4.5 is a foundational practice that helps prevent a host of other critical accessibility issues.

Section 3: Navigating the Exceptions: A Definitive Guide to "Customizable" and "Essential"

While the primary directive of SC 1.4.5 is to use real text, it provides two specific exceptions where images of text are permissible. These exceptions are narrowly defined and should be applied with careful consideration, not as general-purpose loopholes for aesthetic preference. A rigorous understanding of "Customizable" and "Essential" is crucial for compliant implementation.

3.1 The "Customizable" Exception

An image of text is permitted if it "can be visually customized to the user's requirements".

• Technical Implementation: This exception is not met by simply allowing a user to zoom the entire page. It requires a mechanism that allows the user to modify the specific properties of the text within the image, such as its font size, color, and background color. In practice, this almost always involves a server-side solution where the user is presented with a set of controls (e.g., dropdown menus, color pickers). Based on the user's selections, the server dynamically generates a new, customized image of the text and delivers it to the page.
• Practical Example: A website features a tool that allows users to generate a stylized "quote of the day" image for social media. The interface provides controls for the user to change the font, text size, and foreground/background colors of the quote. When the user finalizes their choices, the server generates a PNG image based on those settings. This implementation would meet the "Customizable" exception because the end-user, not the author, has control over the final visual presentation.
• Critical Note: This exception is rarely used in modern web development. The technical complexity and overhead of building a server-side image generation engine are significant. In nearly all cases, the same or a superior level of customization and visual richness can be achieved more efficiently and accessibly using client-side technologies like CSS and JavaScript.

3.2 The "Essential" Exception

An image of text is also permitted if "a particular presentation of text is essential to the information being conveyed". This is the most frequently cited, and often misinterpreted, exception. "Essential" does not mean "aesthetically important" or "part of the brand style guide." It means that the specific visual rendering of the text is, itself, a piece of information that would be lost if the text were rendered differently.

The core of this exception is about information integrity, not aesthetics. It is often misunderstood as a justification for prioritizing visual design over accessibility. However, a close analysis of the official examples reveals a clear principle: the exception applies only when the visual form of the text conveys non-decorative information. The critical question for a developer or designer should be: "If this text were converted to styled HTML, would any meaningful information be lost?" If the answer is no, then the specific presentation is not essential. For example, the text "Today's News" in a custom font on a banner conveys the exact same information as an <h1> element styled with CSS to use that font. No information is lost, so the image is not essential. This provides a robust, objective test that moves the decision away from subjective aesthetic preference and toward a clear standard of information preservation.

3.2.1 Logotypes (The Clearest Case)

The most straightforward application of the "essential" exception is for logotypes. WCAG explicitly notes that text that is part of a logo or brand name is considered essential. The unique typography, color, and spatial arrangement of the text in a logo are integral to the organization's identity. For example, rendering the distinctive script of the Ford logo as plain text in the Arial font would fundamentally lose the essential brand information being conveyed. In this case, the image is permissible, though it must still have appropriate alt text (e.g., alt="Ford") to comply with SC 1.1.1.

3.2.2 Representations Where Form is Content

This category covers situations where the visual appearance of the text is the subject being discussed.

• Font Samples: A web page that serves as a catalogue of typefaces must show images of text rendered in those typefaces. The purpose is to display the visual characteristics of the font itself. Showing the word "Garamond" in the Helvetica font would defeat the entire purpose of the representation.
• Historical Documents: A digital archive displaying a scan of an original, handwritten letter from a historical figure is another clear example. The handwriting style, the ink, the paper's texture, and the layout are all essential pieces of historical information. Converting the text to styled HTML would destroy this context.
• Signatures: The image of an artist's signature on a painting or a celebrity's autograph is essential because its specific, unique form is the entire point of the content.

3.2.3 Symbolic Text Characters

The exception also applies to text characters that are used symbolically, rather than as part of a word or sentence that conveys meaning in a human language. This is common in user interface controls.

• Example: A rich text editor that uses an image of the letter "B" on a button to represent the "Bold" function. Here, the letter "B" is not being used as a letter but as an icon or symbol whose visual form represents a specific action. The same applies to an "I" for Italicize or an "S" with a strikethrough for ~~Strikethrough~~. These images are considered essential, but they must have a text alternative that describes their function (e.g., alt="Bold").

3.2.4 Distinguishing from Non-Essential Use

To clarify the boundary, it is vital to examine common failures. A heading for a news article, styled with a unique font and drop shadow, is not essential. Its purpose is to structure the content and provide a title, and the information it conveys—the words of the title—is fully preserved when rendered as a styled <h1> element. Similarly, an inspirational quote from a company's CEO, placed in a marketing banner as an image, is not essential. The quote can be marked up using a <blockquote> element and styled with CSS to achieve a visually similar effect without sacrificing accessibility. In both cases, the use of an image is for purely aesthetic reasons, and since technology can replicate the presentation, the image of text fails SC 1.4.5.

Section 4: The Technical Toolkit: Modern CSS and Web Fonts as the Primary Solution

The most effective way to comply with SC 1.4.5 is to avoid the problem entirely by using modern web technologies to style real HTML text. Cascading Style Sheets (CSS) and web fonts provide a powerful and flexible toolkit for creating visually rich, accessible typography, rendering the need for images of text obsolete in the vast majority of cases.

4.1 Foundational CSS for Text Styling

A solid understanding of core CSS text properties is the first step for any developer or designer aiming for compliance. These properties allow for precise control over the appearance of text, ensuring that it can be both beautifully styled and fully customizable by the user.

• font-family: Specifies a prioritized list of one or more font family names. It is best practice to end the list with a generic family name (e.g., sans-serif) as a fallback in case none of the specified fonts are available on the user's system.
  • Example: p { font-family: "Open Sans", Helvetica, Arial, sans-serif; }
• font-size: Controls the size of the text. To ensure user scalability and support compliance with SC 1.4.4 (Resize Text), it is crucial to use relative units like em, rem, or percentages (%) rather than fixed units like pixels (px).
  • Example: h1 { font-size: 2.5rem; }
• font-weight and font-style: Control the boldness and italicization of text, respectively. These should be used instead of relying on <strong> or <em> for purely presentational styling.
  • Example: .highlight { font-weight: bold; font-style: italic; }
• color: Sets the foreground color of the text. It is critical to ensure that the chosen color has sufficient contrast with the background color to meet SC 1.4.3 (Contrast (Minimum)).
• text-align: Specifies the horizontal alignment of text (e.g., left, right, center, justify).
• text-transform: Controls the capitalization of text. This is preferable to typing in all caps in the HTML, as it allows screen readers to pronounce the text more naturally and gives users the ability to override the styling if needed.
  • Example: h2 { text-transform: uppercase; }
• letter-spacing and line-height: Provide fine-grained control over the space between characters and lines, respectively. These are essential for users with certain reading disabilities.
  • Example: p.readable { letter-spacing: 0.05em; line-height: 1.6; }

4.2 Advanced CSS Techniques for Rich Visuals

Beyond the basics, CSS offers a host of advanced features that can replicate the complex visual effects that once required images.

• text-shadow: This property allows developers to apply one or more shadows to text, which can be used to create effects like drop shadows, glows, or outlines. It accepts values for horizontal offset, vertical offset, blur radius, and color.
  • Example (Simple Drop Shadow): h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
• Layering Text on Images: A common design pattern involves placing text over a background image. The accessible approach is to use a real HTML element for the text (e.g., an <h1> or <p>) and apply the image to its container using the CSS background-image property. To ensure readability and meet contrast requirements, techniques such as applying a semi-transparent color overlay or placing the text within a solid-colored box on top of the image are highly effective.
• CSS Gradients and Clipping: For highly stylized text, CSS can apply gradients directly to the text color or even use an image as a fill. This is achieved using the background-clip: text property, which clips a background image or gradient to the shape of the text.
  • Example (Gradient Text):

.gradient-text {background-image: linear-gradient(45deg, #f3ec78, #af4261);background-clip: text;-webkit-background-clip: text; /* For browser compatibility */color: transparent;}```

• CSS Pseudo-elements: Decorative effects like drop caps can be achieved using the ::first-letter pseudo-element, and special styling can be applied to the first line of a paragraph with ::first-line. This separates decoration from content, keeping the HTML clean and semantic.

4.3 Best Practices for Accessible Web Fonts

The widespread availability of web fonts is arguably the single most important technology for eliminating the need for images of text.

• Implementation: Services like Google Fonts or Adobe Fonts provide easy-to-implement methods for embedding a vast library of custom fonts. Alternatively, fonts can be self-hosted using the CSS @font-face rule. This allows designers to achieve their desired branding and typography without resorting to static images.
• Font Selection for Readability: Not all fonts are created equal in terms of accessibility. When choosing a font, especially for body text, prioritize readability. Good characteristics include:
  • Clear distinctions between similar characters (e.g., capital 'I', lowercase 'l', and the number '1').
  • Adequate default letter spacing.
  • A variety of weights to allow for clear emphasis without sacrificing legibility.
  • Well-regarded accessible fonts include Verdana, Calibri, Arial, Helvetica, and Times New Roman.
• Performance and User Experience: Large font files can slow down page load times. To ensure a good user experience, it is important to use modern font-loading strategies. The font-display: swap; descriptor in an @font-face rule tells the browser to display text immediately in a fallback font and then "swap" in the custom web font once it has loaded. This prevents a "flash of invisible text" (FOIT) and ensures that content is always readable.

Section 5: Auditing for Compliance: A Hybrid Approach to Testing

Ensuring compliance with SC 1.4.5 requires a combination of automated tools and manual inspection. Automated checkers are excellent for initial detection, but the nuanced nature of the criterion's exceptions demands human judgment to confirm violations and avoid false positives. A robust auditing process integrates both methodologies.

5.1 The Role and Limits of Automated Checkers

Automated accessibility scanning tools like axe DevTools, WAVE, and Siteimprove play a valuable, albeit limited, role in testing for SC 1.4.5.

• Detection, Not Judgment: The primary function of these tools is to detect potential issues. They can identify the presence of <img> elements or CSS background images that might contain text. However, an automated tool cannot understand the context of the image. It cannot determine if a specific visual presentation is "essential" (e.g., a logo) or if a CSS alternative would be feasible. This critical judgment must be made by a human auditor.
• Coverage Claims: While some tools claim to cover SC 1.4.5, this often means they flag images for manual review or, in more advanced cases, use guided tests that ask the auditor a series of questions about the image. Automated scans can typically find around 57% of total accessibility issues on a page, but criteria requiring contextual understanding, such as 1.4.5, fall squarely into the portion that requires manual verification.

5.2 Essential Manual Testing Protocols

Manual testing is non-negotiable for accurately assessing compliance with SC 1.4.5. Auditors should employ a series of simple yet effective techniques to identify and validate issues.

• Visual Inspection (The Highlight Test): This is the quickest and most intuitive manual check. Using a mouse cursor, attempt to select the text in question. If the text can be highlighted, copied, and pasted, it is real HTML text. If the entire block of text is selected as a single, indivisible object (like a picture), it is an image.
• The Zoom Test: To simulate the experience of a user with low vision, use the browser's zoom function to magnify the page to 200% and then 400%. Observe the text in question. If it remains sharp and clear, it is real text. If it becomes pixelated, blurry, or jagged, it is a raster image and presents a significant accessibility barrier.
• Code Inspection: Use the browser's developer tools to inspect the element. This provides definitive proof of its implementation. Check if the element is an <img> tag or if it's a <div> or other element with a CSS background-image. If it is an image, the auditor must then evaluate whether one of the exceptions ("Customizable" or "Essential") applies.
• Disabling CSS: A powerful technique is to use a browser extension, such as the Web Developer Toolbar, to disable all CSS on the page. If the content is real HTML text, it will remain on the page, albeit unstyled. If the text was part of a CSS background-image, it will disappear completely. This test cleanly separates content (HTML) from presentation (CSS) and reveals whether the text is part of the underlying structure.
• Screen Reader Testing: Use a screen reader (such as NVDA, JAWS, or VoiceOver) to navigate to the element. Listen carefully to how it is announced. Does the screen reader read the text as if it were a normal heading or paragraph? Or does it announce "graphic" or "image" before reading the alt text? This test provides direct insight into the experience of blind users and can reveal whether the provided text alternative is an adequate substitute.

5.3 A Practical Checklist for Auditing

A systematic approach ensures that no potential issues are missed. Auditors can follow this checklist:

1. Initial Scan: Run an automated tool like WAVE or axe DevTools to generate an inventory of all <img> elements and elements with background images on the page.
2. Manual Triage: For each identified element, perform the "Highlight Test" to quickly determine if it contains text.
3. Verify Barrier: If text is present within an image, perform the "Zoom Test" to confirm that it degrades upon magnification, thus verifying it as a barrier for users with low vision.
4. Inspect Implementation: Use developer tools to inspect the code and confirm whether it is an HTML image or a CSS background.
5. Evaluate Exceptions: If an image of text is confirmed, rigorously apply the "Information Integrity" test. Is it a true logotype? Is it a font sample or historical document? Is the visual form itself essential information? Do not accept aesthetic preference as a valid justification.
6. Document Findings: If no exception applies, document the element as a failure of SC 1.4.5. Be sure to include a screenshot, the URL, and the relevant code snippet.
7. Check for Cascading Failures: While documenting the SC 1.4.5 failure, also check for related issues: Does the text in the image have sufficient color contrast (SC 1.4.3)? Does the image have an appropriate text alternative (SC 1.1.1)? Document these as separate failures to provide a complete picture of the accessibility impact.

Section 6: Broader Context: SC 1.4.5 (AA) vs. SC 1.4.9 (AAA)

For teams aiming to achieve the highest level of accessibility, it is important to understand the relationship between SC 1.4.5 (Level AA) and its more stringent counterpart, SC 1.4.9 (Level AAA). SC 1.4.9 builds upon the foundation of 1.4.5 but tightens the requirements, leaving almost no room for exceptions.

6.1 Introducing SC 1.4.9 Images of Text (No Exception)

The normative text for SC 1.4.9 (Level AAA) is more absolute:

"Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed."

The name "No Exception" is slightly misleading, as the "Essential" exception still applies. However, the key differences are significant:

• Removal of the "Customizable" Exception: The most critical change is the elimination of the "Customizable" exception. At the AAA level, providing a server-side mechanism for users to generate a custom image of text is no longer a compliant solution. The requirement is for the text itself to be inherently customizable by the user's own technology (e.g., browser, assistive technology).
• Introduction of "Pure Decoration": SC 1.4.9 introduces an explicit allowance for images of text that are "pure decoration." This refers to text used in a purely artistic, non-informative way, where the words themselves have no meaning in context. An example would be a background image created from a collage of random, faint words that could be rearranged or replaced without changing the page's meaning.

6.2 Comparative Analysis

The progression from the AA standard to the AAA standard represents a move from a pragmatic allowance for technological workarounds to a strict insistence on using real text wherever possible. The following table provides a clear, side-by-side comparison to aid practitioners in understanding the distinct requirements of each level.

Table 1: Comparison of WCAG SC 1.4.5 (AA) and SC 1.4.9 (AAA)

This direct comparison clarifies the path for organizations aspiring to AAA conformance. It requires a fundamental shift away from any implementation that results in a static image of text, unless that image's specific visual form is inextricably linked to the information it conveys.

Section 7: Conclusion and Actionable Recommendations

Success Criterion 1.4.5: Images of Text is a cornerstone of digital accessibility. It champions a simple yet powerful idea: text should be text. This principle ensures that digital content is flexible, adaptable, and resilient, capable of meeting the diverse perceptual needs of all users. By prioritizing real, styled HTML text over static images, we move beyond mere compliance and build experiences that empower users, enhance usability for everyone, and embrace the full potential of modern web technologies.

7.1 Summary of Key Principles

• Prioritize Real Text: The default approach for all text content, from headings to body copy, must be to use semantic HTML styled with CSS. This is the most robust, accessible, and future-proof method.
• Treat Images of Text as a Last Resort: The use of an image to convey text should be a rare and deliberate decision, reserved only for situations that meet the narrow and clearly defined "Customizable" (at AA) or "Essential" exceptions.
• Frame Accessibility as a Driver for Modern Practices: Adhering to SC 1.4.5 is not a design constraint. It is a catalyst for adopting modern, superior development techniques like web fonts and advanced CSS, which lead to better performance, improved SEO, and a more maintainable codebase.
• Focus on User Empowerment: The ultimate goal is to give users control over their own experience. Real text allows users to adjust size, color, spacing, and font to make content readable for them, fulfilling the core promise of an accessible web.

7.2 Role-Based Checklist for Compliance

Achieving compliance requires a collaborative effort across the entire product development lifecycle. Each role has a specific responsibility in upholding the principle that text must be text.

For Designers:

• Design with Real Text: Create designs in tools that facilitate the use of real text and web fonts. Plan for typographic styles that can be replicated with CSS properties.
• Collaborate with Developers: Before finalizing designs that rely on complex text effects, consult with developers to confirm their feasibility using accessible CSS techniques.
• Design for Contrast: When designing text to be placed over images, incorporate solutions like color overlays, drop shadows, or text boxes from the outset to ensure sufficient color contrast can be achieved with live text.

For Developers:

• Master CSS for Text: Become proficient in the full suite of CSS properties for text styling, from font-family and text-shadow to advanced techniques like background-clip.
• Use Semantic HTML: Ensure all text is marked up with the appropriate semantic elements (<h1>-<h6>, <p>, <blockquote>, <li>, etc.) to provide structure for assistive technologies.
• Implement Exceptions Correctly: When an exception is unavoidable (e.g., a company logo), implement it correctly with a concise and accurate text alternative (e.g., <img src="logo.png" alt="Organization Name">).

For Content Creators & Editors:

• Author in the CMS: Avoid creating content like event announcements or news headlines in graphic design software and uploading them as a single image. Enter all text directly into the content management system (CMS) as structured text.
• Provide Text Equivalents: If an image of text must be used (e.g., a scan of a historical document), ensure that a full, accurate transcription of the text is provided as real text on the same page.
• Use Platform Features: Utilize the built-in features of the CMS for creating headings, lists, and blockquotes rather than attempting to simulate them with images.

For QA Testers & Auditors:

• Integrate Hybrid Testing: Combine automated scans for initial detection with rigorous manual testing (highlight test, zoom test, code inspection, CSS disabling) for verification.
• Apply Exceptions Rigorously: Do not accept aesthetic preference or "brand guidelines" as a justification for an "essential" image of text. Apply the objective "Information Integrity" test: would information be lost if this were real text?
• Document Thoroughly: When a failure is identified, document not only the SC 1.4.5 violation but also any cascading failures related to contrast (SC 1.4.3) or non-text alternatives (SC 1.1.1) to provide a complete picture of the issue's impact.