Notes about Web Accessibility – Part 3

Status: Work in progress.
Last update: June 24, 2015

Lesson 3: Never rely only on color or images!

Web pages shall be designed so that all the information conveyed with color is also available without it.

Bad use of color examples:

  • Mark required fields on a form with red color.
  • Refers to a button only by it’s color “Click on the green button to continue”
  • Include text content on an image

How to use color on text elements:

The default contrast ratio of text and background has to be at least 5:1

Large scale text can allow a contrast ratio of at least 3:1 (18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio).

Incidental text, (text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content) or logotypes has no minimum contrast requirement.

Tools to check contrast ratio:

Lesson 3.1: Design and build web pages in a way that users can change the size of the text

  • Allow text to flow naturally at larger sizes.
  • Avoid defining text size in explicit units, like pixels or points, use relative values instead.
  • Again, don’t text inside of images. Use text!
  • You can add an “Adjust font size widget”.
  • Avoid moving, scrolling or flashing text. It could be extremely difficult to read.
Advertisements

Thanks for your comments

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s