CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title> Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" /><link media="print" type="text/css" rel="stylesheet" href="print.css"/><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2021/W3C-NOTE"/><link rel="stylesheet" type="text/css" href="slicenav.css"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body class="slices toc-inline"><div id="masthead"><p class="logo"><a href="https://www.w3.org/"><img width="72" height="48" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C"/></a></p><p class="collectiontitle"><a href="Overview.html">Understanding WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><div class="mainbody"><a name="top"> </a><ul id="navigation"><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.4.3 [Contrast (Minimum)]" href="visual-audio-contrast-contrast.html"><strong>Previous: </strong>SC 1.4.3 [Contrast (Minimum)]</a></li><li><a title="Understanding SC 1.4.5 [Images of Text]" href="visual-audio-contrast-text-presentation.html"><strong>Next: </strong>SC 1.4.5 [Images of Text]</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#visual-audio-contrast-scale-intent-head">Intent</a></li><li><a href="#visual-audio-contrast-scale-examples-head">Examples</a></li><li><a href="#visual-audio-contrast-scale-resources-head">Related Resources</a></li><li><a href="#visual-audio-contrast-scale-techniques-head">Techniques & Failures</a></li><li><a href="#key-terms">Key terms</a></li></ul></div> <div class="skiptarget"><a id="maincontent">-</a></div><h1><a name="visual-audio-contrast-scale" id="visual-audio-contrast-scale"> </a><strong>Resize text</strong><span class="screenreader">:</span><br/>Understanding <abbr title="Success Criterion">SC</abbr> 1.4.4</h1><blockquote class="scquote"><div> <p class="sctxt"><strong class="sc-handle"><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale">1.4.4</a> Resize text:</strong> Except for <a href="#captionsdef" class="termref">captions</a> and <a href="#images-of-textdef" class="termref">images of text</a>, <a href="#textdef" class="termref">text</a> can be resized without <a href="#atdef" class="termref">assistive technology</a> up to 200 percent without loss of content or functionality. (Level AA) </p></div></blockquote><div class="intent"><h2 id="visual-audio-contrast-scale-intent-head" class="section"> Intent of this Success Criterion </h2><p>The intent of this Success Criterion is to ensure that visually rendered text, including text-based controls (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier. Users may benefit from scaling all content on the Web page, but text is most critical. </p><p>The scaling of content is primarily a user agent responsibility. User agents that satisfy <a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</a> allow users to configure text scale. The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets.</p><p>The author cannot rely on the user agent to satisfy this Success Criterion for HTML content if users do not have access to a user agent with zoom support. For example, if they work in an environment that requires them to use IE 6.</p><p>If the author is using a technology whose user agents do not provide zoom support, the author is responsible to provide this type of functionality directly or to provide content that works with the type of functionality provided by the user agent. If the user agent doesn't provide zoom functionality but does let the the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized. </p><p>Some user interface components that function as a label and require activation by the user to access content are not wide enough to accommodate the label's content. For example, in Web mail applications the subject column may not be wide enough to accommodate every possible subject header, but activating the subject header takes the user to the full message with the full subject header. In Web-based spreadsheets, cell content that is too long to be displayed in a column can be truncated, and the full content of the cell is available to the user when the cell receives focus. The content of a user interface component may also become too wide in user interfaces where the user can resize the column width. In this type of user interface component, line wrapping is not required; truncation is acceptable if the component's full content is available on focus or after user activation and an indication that this information can be accessed, is provided to the user in some way besides the fact that it is truncated.</p><p>Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up to twice the width and height. Authors may support scaling beyond that limit, however, as scaling becomes more extreme, adaptive layouts may introduce usability problems. For example, words may be too wide to fit into the horizontal space available to them, causing them to be truncated; layout constraints may cause text to overlap with other content when it is scaled larger; or only one word of a sentence may fit on each line, causing the sentence to be displayed as a vertical column of text that is difficult to read. </p><p>The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. Assistive technology dedicated to zoom support would usually be used in such a situation and may provide better accessibility than attempts by the author to support the user directly.</p><div class="note"><p class="prefix"><em>Note: </em>Images of text do not scale as well as text because they tend to pixelate, and therefore we suggest using text wherever possible. It is also harder to change foreground and background contrast and color combinations for images of text, which are necessary for some users. </p></div><p>See also <em><a href="visual-audio-contrast-visual-presentation.html"> Understanding Success Criterion 1.4.8 Visual Presentation</a></em>.</p><div class="benefits"><h3 id="visual-audio-contrast-scale-79-head" class="div3head"> Specific Benefits of Success Criterion 1.4.4: </h3><ul><li><p> This Success Criterion helps people with low vision by letting them increase text size in content so that they can read it. </p></li></ul></div></div><div class="div3"><h2 id="visual-audio-contrast-scale-examples-head" class="section"> Examples of Success Criterion 1.4.4</h2><ul><li><p> A user with vision impairments increases the text size on a Web page in a browser from 1 em to 1.2 ems. While the user could not read the text at the smaller size, she can read the larger text. All the information on the page is still displayed when the larger font is used for the text. </p></li><li><p> A Web page contains a control for changing the scale of the page. Selecting different settings changes the layout of the page to use the best design for that scale. </p></li><li><p> A user uses a zoom function in his user agent to change the scale of the content. All the content scales uniformly, and the user agent provides scroll bars, if necessary. </p></li></ul></div><div class="resources"><h2 id="visual-audio-contrast-scale-resources-head" class="section"> Related Resources </h2><p>Resources are for information purposes only, no endorsement implied.</p><ul><li><p> <a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a> </p></li><li><p> <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a> </p></li><li><p> <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a> </p></li><li><p> <a href="http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a> </p></li><li><p> <a href="https://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a> </p></li></ul></div><div class="div3"><h2 id="visual-audio-contrast-scale-techniques-head" class="section"> Techniques and Failures for Success Criterion 1.4.4 - Resize text</h2><p>Each numbered item in this section represents a technique or combination of techniques that the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="https://www.w3.org/TR/2023/NOTE-UNDERSTANDING-WCAG20-20230921/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p><div class="boxed"><h3 id="visual-audio-contrast-scale-80-head" class="div3head"> Sufficient Techniques </h3><ol class="enumar"><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G142" class="tech-ref">G142: Using a technology that has commonly-available user agents that support zoom</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SL22" class="tech-ref">SL22: Supporting Browser Zoom in Silverlight</a> (Silverlight) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SL23" class="tech-ref">SL23: Using A Style Switcher to Increase Font Size of Silverlight Text Elements</a> (Silverlight) </p></li><li><p> Ensuring that text containers resize when the text resizes <strong>AND</strong> using measurements that are relative to other measurements in the content by using one or more of the following techniques:</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C28" class="tech-ref">C28: Specifying the size of text containers using em units</a> (CSS) </p></li><li><p>Techniques for relative measurements</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C12" class="tech-ref">C12: Using percent for font sizes</a> (CSS) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C13" class="tech-ref">C13: Using named font sizes</a> (CSS) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C14" class="tech-ref">C14: Using em units for font sizes</a> (CSS) </p></li></ul></li><li><p>Techniques for text container resizing</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SCR34" class="tech-ref">SCR34: Calculating size and position in a way that scales with text size</a> (Scripting) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G146" class="tech-ref">G146: Using liquid layout</a> </p></li></ul></li></ul></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G178" class="tech-ref">G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G179" class="tech-ref">G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</a> </p></li></ol></div><div class="boxed"><h3 id="visual-audio-contrast-scale-81-head" class="div3head"> Additional Techniques (Advisory) for 1.4.4</h3><p>Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p><ul><li><p>Providing large fonts by default (future link)</p></li><li><p>Using page-percent for container sizes (future link)</p></li><li><p>Avoiding scaling font sizes smaller than the user-agent default (future link)</p><div class="note"><p class="prefix"><em>Note: </em>The author won't actually know the font size, but should avoid percentage scaling that results in less than 100%</p></div></li><li><p>Avoiding justified text (future link)</p></li><li><p>Providing sufficient inter-line and inter-column spacing (future link)</p></li><li><p>Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link) </p></li><li><p>Avoiding the use of text in raster images (future link) </p></li><li><p>Using server-side scripts to resize images of text (future link) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C17" class="tech-ref">C17: Scaling form elements which contain text</a> (CSS) </p></li><li><p>Ensuring that text in raster images is at least 18pt (future link) </p></li><li><p>Scaling text down to 50% (future link) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20" class="tech-ref">C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</a> (CSS) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C22" class="tech-ref">C22: Using CSS to control visual presentation of text</a> (CSS) </p></li><li><p>Providing a mechanism to allow captions to be enlarged (future link)</p></li></ul></div><div class="boxed"><h3 id="visual-audio-contrast-scale-82-head" class="div3head"> Common Failures for <abbr title="Success Criterion">SC</abbr> 1.4.4</h3><p>The following are common mistakes that are considered failures of Success Criterion 1.4.4 by the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group.</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F69" class="tech-ref">F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F80" class="tech-ref">F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</a> </p></li></ul></div></div><div class="div3"><h2 id="key-terms" class="terms">Key Terms</h2><dl class="keyterms"><dt class="label"><a name="atdef" id="atdef"> </a>assistive technology (as used in this document)</dt><dd><p>hardware and/or software that acts as a <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#useragentdef" class="termref">user agent</a>, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents </p><div class="note"><p class="prefix"><em>Note 1: </em> functionality provided by assistive technology includes alternative presentations (e.g., as synthesized speech or magnified content), alternative input methods (e.g., voice), additional navigation or orientation mechanisms, and content transformations (e.g., to make tables more accessible). </p><p class="prefix"><em>Note 2: </em>Assistive technologies often communicate data and messages with mainstream user agents by using and monitoring <acronym title="Application Programming Interfaces">APIs</acronym>. </p><p class="prefix"><em>Note 3: </em>The distinction between mainstream user agents and assistive technologies is not absolute. Many mainstream user agents provide some features to assist individuals with disabilities. The basic difference is that mainstream user agents target broad and diverse audiences that usually include people with and without disabilities. Assistive technologies target narrowly defined populations of users with specific disabilities. The assistance provided by an assistive technology is more specific and appropriate to the needs of its target users. The mainstream user agent may provide important functionality to assistive technologies like retrieving Web content from program objects or parsing markup into identifiable bundles. </p></div><div class="example"><p class="prefix"><em>Example: </em>Assistive technologies that are important in the context of this document include the following:</p><ul><li><p>screen magnifiers, and other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, synchronization with speech, etc. in order to improve the visual readability of rendered text and images;</p></li><li><p>screen readers, which are used by people who are blind to read textual information through synthesized speech or braille;</p></li><li><p>text-to-speech software, which is used by some people with cognitive, language, and learning disabilities to convert text into synthetic speech;</p></li><li><p>speech recognition software, which may be used by people who have some physical disabilities;</p></li><li><p>alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard (including alternate keyboards that use head pointers, single switches, sip/puff and other special input devices.);</p></li><li><p>alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations.</p></li></ul></div></dd><dt class="label"><a name="captionsdef" id="captionsdef"> </a>captions</dt><dd><p>synchronized visual and/or <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-altdef" class="termref">text alternative</a> for both speech and non-speech audio information needed to understand the media content</p><div class="note"><p class="prefix"><em>Note 1: </em>Captions are similar to dialogue-only subtitles except captions convey not only the content of spoken dialogue, but also equivalents for non-dialogue audio information needed to understand the program content, including sound effects, music, laughter, speaker identification and location.</p><p class="prefix"><em>Note 2: </em>Closed Captions are equivalents that can be turned on and off with some players.</p><p class="prefix"><em>Note 3: </em>Open Captions are any captions that cannot be turned off. For example, if the captions are visual equivalent <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#images-of-textdef" class="termref">images of text</a> embedded in <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#videodef" class="termref">video</a>.</p><p class="prefix"><em>Note 4: </em>Captions should not obscure or obstruct relevant information in the video.</p><p class="prefix"><em>Note 5: </em>In some countries, captions are called subtitles.</p><p class="prefix"><em>Note 6: </em> <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#audiodescdef" class="termref">Audio descriptions</a> can be, but do not need to be, captioned since they are descriptions of information that is already presented visually.</p></div></dd><dt class="label"><a name="images-of-textdef" id="images-of-textdef"> </a>image of text</dt><dd><p>text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect </p><div class="note"><p class="prefix"><em>Note: </em>This does not include <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#textdef" class="termref">text</a> that is part of a picture that contains significant other visual content.</p></div><div class="example"><p class="prefix"><em>Example: </em>A person's name on a nametag in a photograph.</p></div></dd><dt class="label"><a name="textdef" id="textdef"> </a>text</dt><dd><p>sequence of characters that can be <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef" class="termref">programmatically determined</a>, where the sequence is expressing something in <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#human-langdef" class="termref">human language</a> </p></dd></dl></div><ul id="navigationbottom"><li><strong><a href="#top">Top</a></strong></li><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.4.3 [Contrast (Minimum)]" href="visual-audio-contrast-contrast.html"><strong>Previous: </strong>SC 1.4.3 [Contrast (Minimum)]</a></li><li><a title="Understanding SC 1.4.5 [Images of Text]" href="visual-audio-contrast-text-presentation.html"><strong>Next: </strong>SC 1.4.5 [Images of Text]</a></li></ul></div><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Understanding WCAG 2.0: A guide to understanding and implementing WCAG 2.0</a> (see the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">latest version of this document</a>). The entire document is also available as a <a href="complete.html">single HTML file</a>. See the <a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the <a href="https://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</a>. </p><p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> 漏 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>庐</sup> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p></div></body></html>