universal-design-center

  • Mobile Accessibility

Graphics and Colors

  Description

If a graphic is needed to understand the content or functionality of the webpage, then it should be perceivable for people with low vision or other impairments. Enough contrast should be provided for graphics that convey important information so people with moderately low vision can perceive them.

  What to Consider

Images Resizing

Resize images at the server, if they have an intrinsic size.

Large Graphics

Do not use images that cannot be rendered by the device. Avoid large or high-resolution images except where critical information would otherwise be lost.

Images Specify Size

Specify the size of images in markup, if they have an intrinsic size.

Non-Text Alternatives

Provide a text equivalent for every non-text element.

Color Contrast

Ensure that foreground and background color combinations provide sufficient contrast.

Background Image Readability

When using background images make sure that content remains readable on the device.

Measures

Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

  Resources

Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile

Mobile Accessibility Standards and Guidelines at W3C

W3C - The Web and Mobile Devices

Informational Graphic Contrast