Choose colours for ‘user interface components’ such as buttons and ‘graphical objects’ such as the lines in graphs, which have a contrast ratio of at least 3:1 with the background they appear on.
Note
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.
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
Useful links
- 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
| Category | Perceivable |
| Guideline | 1.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 text | The 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 © [2020] World Wide Web Consortium, (MIT, ERCIM, Keio, Beihang)
Fully meet 1.4.11 Non text contrast
We only give a summary of the Level AA standards on our site. Find out how to fully meet this standard in our book Designing Accessible Learning Content.
Recent Comments