Digital A11y

wcag2.0

Understanding SC 1.4.3 – Contrast Minimum

Last Modified on by 1 Comment

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text
    Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental
    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, have no contrast requirement.
  • Logotypes
    Text that is part of a logo or brand name has no contrast requirement.

This success criterion requires that the texts and image of texts that are regular in size meet the color contrast ratio of 4.5:1 against their background color. For the large or large scale texts, this SC mandates at least 3:1 against their background. This requirement solely relies on the content authors, designers and the developers and the user agents or contrast enhancing assistive technology, be it at the system level or independent.

Differentiators for the regular/large text

Based on different research and books, WCAG defines a large text which uses 18 PT font or 14 PT bold text. To put into CSS pixels, 1 PT=1.333 CSS PX and therefore, 14 PT bold and 18 PT are 18.5 PX and 24 PX approximately. Anything below these font size requirement is considered regular text and therefore must meet 4.5:1 ratio.
These specificities are arrived at so that it covers people with moderately low vision who don’t use any assistive technology to enhance the contrast and people who have color deficiency too. Moreover, large texts are easily readable in lower contrast.

Exceptions

The contrast minimum
Excludes the following in meeting the contrast requirements:

  • Incidental or decorative texts that are part of inactive components or invisible to users
  • Brand names and logo type images
  • Texts that are part of pictures that contain most visuals. (the sign of the painter on a painting)

Points to ponder

  • Develop the style guide in such a way that all the texts that are crucial meet the minimum contrast
  • Choose color schemes that are contrastive enough for everyone to see and read
  • Provide a “Contrast” mode with the help of alternative CSS if you can’t
    Design and develop the content with the minimum contrast requirement.

Let your site be a feast to the eyes and not a strain!

References

Understanding Success Criterion 1.4.3

Continue reading Understanding SC 1.4.3 – Contrast Minimum

Understanding SC 1.4.4 Resize Text

Last Modified on by Leave a Comment

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA).

This success criterion requires that the text – both static and that are part of user interface components that are visible to the users must be resizable (scalable) to 200% without the help of any assistive technologies like screen magnifiers. Even though the user agents like the browsers that meet UAG (User Agent Guidelines) 1.0 bear the responsibility of scaling or zooming the text up to 200%, it is the authors responsible for providing that support to the browsers.

What do I do as the content author?

The authors or developers have to ensure:

  • The content is scalable to 200% without any loss of information or functionality
  • The content or texts do not overlap or become not available to the users
  • The user interface components do not become unusable or inactive.

Who Benefits?

Users with low vision or limited vision who consume the content without any assistive technology but use browsers’ zoom functionality alone.

Points to ponder

  • Where browsers do not support or provide zoom functionality (IE6 as an example), provide alternative CSS for scaling purpose
  • When zoomed to 200%, ensure there is no much of horizontal scrolling ( a best practice)
  • Where lengthy user interface components or content like subject line of an email is there, truncate and provide ways along with the instructions to access the content.
Continue reading Understanding SC 1.4.4 Resize Text

3.2.4 Consistent Identification

Last Modified on by Leave a Comment

3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)

The guideline states that functional components (elements) that appear repeatedly in a set of web pages must have the same name/label. Assistive aid users heavily rely on these functional elements for quick navigation & understanding the purpose of a particular widget.

For example the “search button “is labelled as either “find or go” in a web page while it is being labelled as “search” on all other pages then it violates this checkpoint. This checkpoint applies to non-text content, icons and images that appear repeatedly & convey the same information must be provided with same alternative text.

Points to Remember

  • Icons & images that are used repeatedly and provide the same function must be provided with same alternative text.
  • Elements with same function are named & labelled consistently.
  • Use icons/images that are consistent. For example print, twitter, Facebook etc.
  • Images will have different meaning in different context, so will need different alternative text depending on the context.

References

Continue reading 3.2.4 Consistent Identification