Understanding How Color Relationships Affect Accessibility

In the last three lessons, we learned about the color wheel, about luminosity, and about saturation. But, how do we connect it to instructional design?

Consider the squares below.

In the illustration above, the same circle of gray is used at the center of six squares of color. Imagine if these were color schemes for eLearning. Which colors would provide the best schemes with this tone of gray?

Choose the best answer. Multiple selections are permitted.

• Purple
• Lavender
• Aqua
• Mint

See All Options

You can vote for more than one answer.

Shifts in luminosity and saturation have a direct affect on accessibility in instructional design.

Imagine if the gray circle were a block of gray text on a colored background. Two colors work best: yellow, and lavender. Both provide the necessary contrast with the gray for any text to stand out. In the purple and aqua pairings, the gray disappears. In the mint and blue pairings, while there is some contrast, more contrast would be beneficial for learners with total colorblindness. Additionally, those with color sensitivities may benefit from a less saturated green.

The same blue background with the same gray as text shown in grayscale to simulate total colorblindness.

Understanding how colors relate to each other is an important part of building accessible eLearning. In doing so, we are able to build eLearning that is less visually overwhelming and thereby much more engaging for neurodivergent learners, as well as build courses giving consideration to learners with varying forms of color sensitivity and color blindness.