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.