Choose foreground and background colours for all interactive elements and graphical objects which have enough contrast to make it easy for everyone to see them.


Note

This standard is very similar to 1.4.3. Contrast Minimum (Level AA), but requires a higher contrast level for “user interface components” and “graphical objects”.

User interface components are anything which the learner needs to interact with. For example, buttons, hyperlink text and data entry fields etc.

Graphical objects include any icons or visual elements which add meaning to your eLearning resource. For example a standalone icon like a print icon with no text, or the important parts of a complex diagram such as each line in a graph, or each section in a pie chart.


How do I comply?

  • The contrast ratio you need to meet for user interface components and graphical objects is 3:1.
  • The best way to check this is to use a colour contrast checker.
  • There are many contrast checkers available but our preferred tool is the WebAIM colour contrast checker, because you can specifically check for this requirement.

    The Graphical Objects and User Interface Components functionality of the WebAIM colour contrast checker.

Tip
Remember to check all the states of user interface components such as buttons e.g. hover and visited as well as the normal state.


Why?

  • For people with low vision or colour blindness, it is essential that all the controls that they need to interact with, have enough contrast so that they are able to see and use them.
  • Graphical objects must also have high contrast because if learners with low vision or colour blindness are unable to see them, they will not be able to understand your content.

How can I test?

Use the Graphic Objects and User Interface Components section of the WebAIM colour contrast checker to check the colour contrast of all interactive elements and graphical objects in your course.


Further information

  • WebAIM: Colour contrast checker
    eLaHub preferred colour contrast checker, but others are available.
  • Webfx: Hex to RGB converter
    An RGB to Hex converter is useful because your contrast checker may ask for Hex values, while your rapid authoring tool only supplies them as RGB (Red, Green, Blue) values. This is our preferred tool, but others are available.
  • UXellence tool: Colorbot
    Colour values converter which includes Hex, RGB and HLSA values.
  •  Colorcop: Colour picker
    A colour picker can save a lot of time to quickly find out the colour value of a visual element in your resource. This is our preferred tool, but others are available.
  • British Dyslexia Association: Style guide
    Has recommendations about colour combinations and contrast for dyslexic learners.

WCAG information

CategoryPerceivable
Guideline1.4 Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
WCAG link
1.4.11 Non-text Contrast (Level AA)
WCAG textThe visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
• User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Copyright © 2019 W3C ®


Beta page
Please help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.