Accessible Moodle (implementation guide)

3.4. Contrast ratio

Texts have a sufficient contrast ratio to the background. For large texts from 18 pt. or bold texts from 14 pt. at least 3:1. 4.5:1 for all other texts.

What is meant by this?

The contrast ratio refers to the relationship between the brightness of the text and the background on which it is displayed. A high contrast ratio makes the text easier to read. A sufficient contrast ratio is achieved when the text color stands out clearly from the background color. Black text on a white background (or vice versa) represents the optimum contrast. If other colors are used, the contrast ratios must be checked.

The reason for these minimum requirements is that texts with poor contrast ratios cannot be properly recognized/read in poor lighting conditions or with visual impairments.

Why is it important?

A sufficient contrast ratio between text and background color is of great importance, especially for recipients with impaired vision. If the contrast is not high enough, the text can be difficult or impossible to read, resulting in barriers to accessing information.

For example, recipients with color blindness have difficulty distinguishing between certain colors. A sufficient contrast ratio helps to ensure that they can still read the text. If the contrast ratio between the text and the background is low, it can be more difficult to read the text, even if it is large.

Sufficient contrast not only makes it easier for recipients with visual impairments to perceive content. Recipients who work in an environment with poor lighting conditions, have a printout in black and white or are watching a presentation via a projector also benefit from a high contrast ratio. Sufficient contrast ensures that the content is clearly and distinctly recognizable, making it easier to absorb and process information.

How can I implement/check it?

You can use various online tools or programs to check contrasts. These often contain "color contrast" in their name. You can use these tools to check the selected font color in comparison to the selected background color. If the contrast is not high enough, adjust the colors according to the recommendations.