Are page elements distinguishable, is the flow logical and is the content malleable?

While it‘s one thing for content to look good and fit nicely in a layout, it‘s entirely something different to appreciate how styles, organization, hierarchy, flexibility and other attributes impact the efficacy of that content.

Contents

Color

According to Karl Groves, “By volume, insufficient color contrast is the most common accessibility issue on the Web.”1 In turn, it‘s also one of the easiest issues to address. However, contrast isn‘t the only issue, so we‘ll tackle color from these three vantage points:

  1. Color Contrast
  2. Color as Meaning
  3. Color Consistency

Color Contrast

Color contrast applies to all text and images of text that are considered content. Text that is incidental, like a street sign in a photograph, or text in a logo has no contrast requirement. To satisfy WCAG 2.0 AA the contrast ratio must be at least 4.5:1 between text and background.

There are five scores you can achieve when testing:

  1. AAA - Text has a contrast ratio of at least 7.0 (black and white together have the highest ratio of 21.0)
  2. AAA Large - Large-scale text (text that is 18pt and larger or 14pt bold and larger) has a contrast ratio of at least 4.5
  3. AA - Text has a contrast ratio of at least 4.5
  4. AA Large - Large-scale text has a contrast ratio of at least 3.5
  5. Fail - Text does not satisfy any of the above

Note: The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.2

There are many tools you can use to test, and some are listed below. Automated scan tools can catch some potential contrast issues, but they are not foolproof and manual testing is recommended.

Color as Meaning

Color can be helpful to indicate the state or status of content, but using color alone is not a sufficient or reliable way to convey these things when a user cannot discern colors. e.g. A text input within a form is marked invalid with a red border, it also has an alert icon and text explaining the error. In this way the use of color is provided meaning and context that would be clear even if a change in color was not discerned.

Color Consistency

A consistent use of color will help users identify patterns across a site. e.g. using blue as the color for anything that acts as a link or green for a success status.

What to Expect

  • Text must have a contrast ratio of at least 4.5:1
  • All text states (hover, focus, etc.) must meet the 4.5:1 contrast ratio with the exception of disabled states when the disabled text cannot be interacted with
  • Logos do not need to meet the contrast ratio, but should have appropriate alt text. In general though, for legibility purposes it is more ideal when a logo does meet the 4.5:1 contrast ratio against its background.
  • Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this criterion.
  • Color is not the only attribute that conveys meaning
  • Color is used consistently

Page Flow

Page flow is important to consider visually, logically, and semantically. Can a user visually scan the page and understand the order? Is the content logically organized? Does the DOM order make sense when followed through assistive technology? Matching visual weight with semantic hierarchy can be very helpful. In the same way, the order that a visual user reads the page should mirror the way a screen reader follows the content.

What to Expect

  • Headings logically structure a page, are scannable, and create page depth and hierarchy
  • Logical content order exists in the DOM, even if the presentation alters the order. Ask, “does this content make sense with the absence of images or layout?”
  • Text is clear when referencing content based on position in layout. This is especially important within responsive layouts where content may reflow at different breakpoints. e.g. “Reference the following chart” instead of “See the chart to the right.”
  • Dynamic states have been considered, such as errors, or other states where the flow or hierarchy changes based on the UI or other page attributes
  • The content makes sense as arranged in the available layouts

Resizing

For many users, the ability to scale text is critical to a good reading experience. Per WCAG 2.0 AA a user should be able to scale content up to 200% for either the width or height. Note that system settings can also control text size, which is a different function that browser zooming. The ability to resize does not apply to captions.

What to Expect

  • When a system setting has increased the size of the text, the content and layout should maintain its integrity when the scale is 200% or less. This means that text is not truncated and content remains legible, scrollable, functional, and does not overlap other content.
  • The above also applies when a user‘s browser zoom is set to 200% or less

Resources

References