DEV Community

Cover image for Pour Explained: P is for Perceivable Part 3

Posted on


Pour Explained: P is for Perceivable Part 3

1.4 Distinguishable

Your users want to be able to see and hear your content.

The P in POUR is for Perceivable:

Information and user interface components must be presentable to users in ways they can perceive. (Ensure content is accessible to people who are blind and/or deaf.)

Let me Level with you…

Each guideline has success criterion, and each one of these are placed at a level of A , AA , or AAA. Now what these levels refer to is the level of their conformance to Accessibility Laws, A being the minimum and AAA being the max. In most cases you will see a Level AA conformance, because it is achievable as well as meaningful, but will fall short here and there because really every guideline success criterion is necessary to at least some users with disabilities. So essentially do not ignore level AAA completely.

Success Criterion 1.4.1 Use of Color

--Level A

Color is not the end all and be all way to convey your important information. In fact color should not be the sole method of conveying important content or distinguishing visual elements.

In other words if I were to present a link to you in a paragraph of text it should have a hover or focus effect that will denote visually that this is a link, like becoming underlined or bold.

Here is an example of a good color contrast and use of hover and focus.

    background: #FFFFFF; // White
    color: #0000FF; //Blue

    text-decoration: underline overline;
    text-decoration: underline overline;

Enter fullscreen mode Exit fullscreen mode

Generally speaking it is a good practice to set your hover and focus states as the same style. A tool for checking your color contrasts is the WebAIM Contrast Checker

Success Criterion 1.4.2 Audio Control

--Level A

If there is audio that auto plays for more than 3 seconds, you must provide a mechanism to control the audio. So your user can stop, pause, mute, or adjust the volume.

Success Criterion 1.4.3 Contrast (Minimum)

--Level AA

There are minimum contrast ratios that need to be followed to achieve level AA.

Text & Images of text

  • Contrast minimum of 4.5:1

Large Text ( at least 18pt or *c.*24px or 1.5rem) or (14pt or 18.66px or 1.17rem)

  • Contrast minimum of 3:1

1.4.3 Contrast example

Success Criterion 1.4.4 Resize Text

--Level AA
The text is still readable when the page is zoomed into 200%. A good practices is switching to mobile view of the page so the column size changes as it is zoomed

  • 1.4.10 which was introduced in WCAG 2.1 sets high requirements in order to achieve level AA

Success Criterion 1.4.5 Images of Text

--Level AA
If at all possible try to avoid using an image of text. Essentially if you can present that same information just using text alone and image should not be used to convey that information. This allow the information to be resizable and adjust for those using assistive tech that adjusts colors of a site.

Success Criterion 1.4.6 Contrast (Enhanced)

--Level AAA

There are Enhanced contrast ratios that need to be followed in order to achieve level AAA.

Text & Images of text

  • Contrast of at least 7:1

Large Text ( at least 18pt or *c.*24px or 1.5rem) or (14pt or 18.66px or 1.17rem)

  • Contrast of at least 4.5:1

1.4.6 Contrast example

Success Criterion 1.4.7 Low or No Background Audio

--Level AAA
Audio with speech has no or very low background noise so the speech is easily distinguishable.
The threshold is 20 dB, this means the background sounds are low enough not to distract from the foreground sounds.

Success Criterion 1.4.8 Visual Presentation

--Level AAA

Blocks of text over one sentence long

  • Column should be restrained 80 characters wide
  • The text must not be fully justified (aligned left and right, it messes with the word spacing)
  • Adequate line spacing must be provided
    • Line: half the height of the text
    • Paragraph: One & a half the line spacing
  • Have a specified foreground and background color
  • DO NOT require horizontal scrolling when text size is doubled (a user can adjust the text size via the browser)

Success Criterion 1.4.9 Images of Text (No Exception)

--Level AAA

Text must only be used in an image for decorative purposes or when the info cannot be presented with text alone.

Success Criterion 1.4.10 Reflow

--Level AA

There must not be any loss of function or content and horizontal scrolling is avoided when your screen size is at a width of 320px.

  • This means that your site must have responsive design elements.
  • It’s best tested when at a width of 1280px and zooming in to 400%.

Content requiring horizontal scrolling, like Data tables, complex images, toolbars and such are exempt from avoiding horizontal scrolling.

Responsive design in action

Success Criterion 1.4.11 Non-text Contest

--Level AA
There needs to be a minimum contrast ratio for non-text elements on your site in order to achieve a level AA.

Controls & Icons (Graphical Objects)

  • Contrast of at least 3:1

States (hover, focus, active, invalid, etc)(borders, text-decorations, color, etc)

  • Contrast of at least 3:1

Success Criterion 1.4.12 Text Spacing

--Level AA

When the user adjust text size via browser settings, there should be NO loss of content or function when:

  • The paragraph spacing is adjusted to 2x the font size
  • The text line height and spacing is adjusted to 1.5x the font size
  • The word spacing is adjusted to .16x the font size
  • The letter spacing is adjusted to .12x the font size

This is best supported by avoiding pixel height assignments for elements containing text.

  • Instead use one of the more responsive measurement values like rem, em, or percent base.

Success Criterion 1.4.13 Content on Hover or Focus

--Level AA

Sometimes there is content presented on a hover or focus state. In this situation:

  • The new content must be dismissed/ escapable, unless the content presents an input error or does not block or interfere with other page content.
  • The pointer can be moved to the newly presented content without that content disappearing.
  • The new content is persistent until the trigger loses focus, the content is dismissed/escaped, or the content is no longer relevant.

Thank you for sticking with The P in POUR is for Perceivable, be on the look out for the first section in The O in POUR is for Operable in the coming week!

Top comments (4)

anevins12 profile image
Andrew Nevins

Hi Ren I really like this post and thank you for going through the effort of writing the SC in an understandable way.

I was just wondering about the 'Use of Color' example. If I am understanding correctly, the link uses colour to differentiate itself by default, then on hover or focus it adds the underline. What do you think about adding the underline by default rather than in the focus or hover state? That way people will know it's a link before interacting with it.

stories_of_ren profile image

Hi Andrew and Thank you for commenting
You'll have control over the color of your links via the CSS, so if the default color is not within a 3:1 contrast ratio in relation to the surrounding text you may need to change the color. Having an underline initially on a link is a great way to visually represent a link as well, however you will still need to have a Focus state that differentiates itself from the default state so that keyboard only users will have an indicator of where they are on the page. Then it's best practices to mimic the focus state for the hover state and vice versa.

A lot of the time underlining initially gets left out via designs because it doesn't look good, but it is a good method for denoting a link.

for more on this topic: W3's understanding use of color
Again, thank you for your comment! I hope that was helpful in your studying of accessibility.

anevins12 profile image
Andrew Nevins

You're right thank you for clarifying! I would just bear in mind that this technique is not the preferred technique for meeting this SC:

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.

Thread Thread
stories_of_ren profile image

Thanks For providing further research into the method, my post is only a brief description of the success criterion at a beginners level with the hope that it will inspire others to research more on accessibility or at the very least get folks thinking about it when maybe they hadn’t before.

Thanks again for your diligence

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.