For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  • Foreground and background colors can be selected by the user.
  • Width is no more than 80 characters or glyphs (40 if CJK).
  • Text is not justified (aligned to both the left and the right margins).
  • Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  • Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

Testing & Remediation

  1. How to test:Since this is a multi-part success criterion, you much test each of the parts individually.
    • Foreground & background colors - can a user change the foreground & background colors?
    • Are blocks of text 80 characters wide or less?
    • Is any of the text on the site set to be not justified?
    • Is your line spacing (leading, in css: line-height) at least a space and a half within paragraphs, and the distance between paragraphs is at least 1.5 times larger than line spacing?
    • Can the text be resized without assistive technology up to 200% not causing horizontal scroll-bar (i.e.: presence of a font-resizing mechanic, usually within the header or article)?
    How to remediate: There are a number of techniques that can be deployed in order to meet this Success Criterion. Due to the large number of techniques, we recommend reviewing the recommendations in the W3C link above. Most of the items can be completed using CSS.

Questions and Answers

Minimum font size?

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but for the main body text (like what you're reading right now) is usually 16px. That said, it is officially stated that visitors must be able to resize all text on the page up to 200% of its original size.

Browser zoom vs text zoom. Which is better?

The criteria stated in 1.4.4 says that the text must be resized without the use of assistive technology. This means that there needs to be a button on the screen somewhere that allows users to click on it or tab to it.

How can I test text color contrast?

If you are using chrome to test your site, you can use an extension called the Wave Scanner. The Wave scanner will scan a page for all sorts of accessibility requirements, including color contrast. This is a great tool for pass/fail evaluation. If you are looking for more in-depth knowledge and information about the color contrast on your pages, you can compare the color contrast of 2 colors at this website.  That contrast checker tool will even give you insight into what level it passes and fails at.

Do images and art need to follow accessibility rules?

Artwork and images themselves do not need to meet accessibility requirements.

Company colors don’t pass contrast guidelines.

There is one exception to this rule, but I am assuming that it won't be the one you are looking form. Company logos do not need to meet accessibility criterion. That said, it is recommended they do, and the rest of the page does. If you are planning on using the same 'failing' colors from the compony logo on the rest of you site that that will not pass. All text must meet the minimum contrast ratios put in place. For AA it is required that normal text has a ratio of at least 4.5:1, and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. You can check if the colors pass at this website or if you'd like the exact contrast ratio you can check out this test here.

Do logos need to follow the accessibility guidelines?

No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.

Are animated gifs okay to have?

Most of the time animated gifs will be accessible. There should be a few things to keep in mind though to ensure this remains true. For example, ask yourself if there is another way that the message can be communicated. Would a still image do? If not, think about providing an alternative or some way that users can forgo the animation. A useful tool when checking your gifs for accessibility may be this Photosensitive Epilepsy Analysis Tool. The thought behind this is that you can make sure the animation won't trigger seizures in people who are sensitive to them.

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.