1.4.3 Contrast (Minimum) - ELA Hub

Choose colours for your text and background which have a contrast ratio of at least 4.5:1.


How do I comply?

  • Check contrast ratios using an online contrast checker.
  • There are many contrast checkers available, but our preferred tool is the WebAIM colour contrast checker.

    Webaim colour contrast checker.

  • The WebAIM colour contrast checker has the following functionality:
    • Pass or fail indicators for WCAG AA and AAA levels.
    • Pass or fail indicators for normal and large text size.
    • Pass or fail indicator for Graphical objects and User Interface Components useful for 1.4.11. Non-text Contrast (Level AA).
    • Lightness sliders which allow you to darken or lighten the colours you have input, until they pass WCAG requirements.
  • Remember to test all elements in your learning resource e.g. headings and text in menus, as well as in the main content.
  • Text that is part of a logo or brand name, and inactive elements such as greyed out text, are exempt from this standard. 

Tip
Create a style sheet for eLearning resources with each of your checked foreground and background colour combinations. This helps to make sure you don’t accidentally change colours during production which could lead to some of your colour choices failing this standard.


Why?

  • People with low vision often have difficulty reading text that does not contrast sufficiently with its background.
  • Learners who are colour blind also find it difficult to read text which doesn’t have sufficient colour contrast.
  • Many older people find it difficult to distinguish colour and need strong contrast to make it easier to read content.
  • Users who are using devices in bright sunlight will also benefit from strong colour contrast.

eLaHub examples

Common eLearning colour contrast issues

A page showing many common colour contrast mistakes often found in eLearning resources.

Image shows:
A series of common mistakes with colour contrast often found in eLearning. The first example shows both background and foreground colour too dark. The next shows both background and foreground colour too light. The third example shows the background and foreground colour too similar. The fourth example shows text over an image which has different colours making it difficult to see the light text on the light portion of the image. The correction for this is a coloured semi transparent overlay over the image which makes it possible to see the text clearly everywhere. The final example is black text on a white background which is considered too glaring. The corrected version of this example is black text on a pastel blue background.

How can I test?

Use a colour contrast checker to check the contrast ratio between your text and background colour combinations is at least 4.5:1.


Further information


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.3 Contrast (Minimum) (Level AA)
WCAG textThe 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 minimum contrast requirement.

Copyright © [2020] World Wide Web Consortium, (MIT, ERCIMKeio, Beihang)


Beta page
Help us to make this page better for everyone in the eLearning community. Contact us with your improvements, examples and suggestions.

Back to top