July 5, 2022

Evaluating Color and Contrast – How hard can it be?

Testing contrast and use of color is one of the most deceptively difficult tasks in a web accessibility evaluation. Consider this screenshot of a checkbox as an example:

This simple checkbox and label text require at least 15 checks to test conformance with WCAG requirements for contrast and color use.

Text Contrast

WCAG 1.4.3 requires at least 4.5:1 contrast between this text label and its background (assuming the text is not “Large Text”). That requires measuring contrast of both the dark grey text label and the blue link to their grey background. Because this is true text with a solid background color, WAVE will identify any contrast errors in this text automatically. You could also test this with several other tools including WebAIM’s contrast checker and Chrome DevTools.

Checkbox Contrast

A default checkbox will provide sufficient contrast and does not require additional contrast testing, but because this example includes a customized checkbox, WCAG 1.4.11 requires 3:1 contrast between the checkbox and the background. If a checkbox is customized using CSS, it may be possible to find its defined colors in the page’s styles using a browser inspection tool. If the checkbox is made up of an image (or multiple images for different states), you will need to use an eyedropper tool like ColorZilla, Colour Contrast Analyser, or the eyedropper in DevTools or WAVE to extract the image color values.

Links that rely on color

The underline has been removed from the “Terms of Use” link. Because a text color difference is used to distinguish the link from the rest of the label, WCAG 1.4.1 adds two requirements that you must also check:

  • There must be at least 3:1 contrast between the body text color and link text color. This is in addition to the 4.5:1 contrast requirement of the text with the background. Our link contrast checker allows you to check the conformance of all three combinations of colors and, if necessary, identify colors that will meet these requirements. With certain color combinations, such as a light grey background, it may be difficult or impossible to meet all these contrast requirements.
  • The link must have a non-color cue (usually the introduction of underline) with at least 3:1 on keyboard focus.

We also recommend checking for a similar cue on mouse hover, but strictly speaking, this is not a WCAG requirement.

Checkbox and Link States

Beyond the default state, you must also check the contrast of the link text and the checkbox in other possible states. The link must have at least 4.5:1 contrast to the background in the mouse hover, keyboard focus, active, and visited states. The checkbox must have at least 3:1 contrast in the mouse hover, keyboard focus, active, and checked states.

The white checkmark must also have at least 3:1 contrast with the dark grey checkbox color.

Checkbox in a checked state

Keyboard Focus Indicators

There are currently three WCAG success criteria that relate to the visible indication that an element has keyboard focus:

  • 2.4.7 Focus Visible (Level AA) requires a visible indication that an element has keyboard focus.
  • 1.4.1 Use of Color (Level A) states that this indication cannot be just a subtle change in color.
  • 1.4.11 Non-text Contrast (Level AA) requires 3:1 contrast for graphical objects and user interface components.

There is some interplay between these three requirements, but the takeaway is that interactive elements must have a visual cue of keyboard focus with at least 3:1 contrast. This could be a color change that has at least 3:1 contrast with a default state, like changing the color of the checkbox border. However, an outline with at least 3:1 contrast is usually best. Most modern browsers will, by default, provide conformant outlines. However, if you customize the outline colors, you must ensure that it provides at least 3:1 contrast.

The Grand Total

For WCAG conformance, this simple example requires:

At least 4.5:1 contrast:

  1. Label text
  2. Link text
  3. Link text – mouse hover
  4. Link text – keyboard focus
  5. Link text – active
  6. Link text – visited

At least 3:1 contrast:

  1. Between label text and link text
  2. Visual cue when the link has keyboard focus
  3. Visual cue that the checkbox has keyboard focus
  4. Checkbox border – default
  5. Checkbox border – mouse hover
  6. Checkbox border – keyboard focus
  7. Checkbox border – active
  8. Checkbox border – checked
  9. The checkmark indicating the checkbox is checked.

This doesn’t include possible color and contrast issues related to error states or feedback, so 15 is the lowest number of checks required.

Browser Defaults are Usually Best

For simplicity and optimal accessibility, it is recommended to stick to default form controls and focus outlines, and to not remove the underline from links that appear within text. If this example followed these three principles your testing effort goes down considerably. You would only need to verify 4.5:1 contrast of:

  1. Label text
  2. Link text
  3. Link text – mouse hover
  4. Link text – keyboard focus
  5. Link text – active
  6. Link text – visited

While this is the ideal, the reality is that many sites are closer to the original example. That is why color and contrast testing will continue to be deceptively difficult.

Source link

Leave a Reply

Your email address will not be published.