Day 2: Check colour contrast on the Elves’ Control Panel

Overnight, the Department of Elfish Affairs received a report from Santa’s workshop that parts of the Elves’ Control Panel are hard to read. Some elves say text blends into the background, particularly during early-morning shifts or when working in low light.

Today, you are reviewing part of the Control Panel to learn how to check whether text and controls meet minimum colour contrast requirements. Poor contrast does not just affect people with visual impairments - it can impact any elf using a screen in bright light (snow blindness is common in the North Pole), on a low-quality display, or when sleepy.

Your mission today

Learn how to check that text and interactive elements have enough colour contrast to be readable.

Quick 5-minute check

• normal body text must have a contrast ratio of at least 4.5:1 so it can be read by people with low vision
• large text (18px or larger, or 14px bold) must have a contrast ratio of at least 3:1
• text in buttons, links and form controls must also meet contrast requirements, not just body text
• placeholder text often fails contrast and should not be the only way information is conveyed
• do not rely on visual judgement alone - contrast that looks fine to you may fail for others

---

Review the Elves’ Control Panel

The following example is a simplified section of the Control Panel showing examples of good and bad colour contrast. The failing examples rely on colours that are too similar in brightness, making the text harder to distinguish from the background.

Workshop status

🧸 Current toy output is running as expected across all workshops.

🛷 Sleigh maintenance checks are complete and ready for the next flight.

Show answers and explanation

The examples above include both passing and failing colour contrast.

• The light grey 'Curent toy output...' text fails contrast. It does not meet the minimum requirement of 4.5:1 for normal text.
• The darker text 'Sleigh maintenance checks...' passes contrast requirements. It comfortably exceeds the minimum requirement.
• The dark red button 'Update toy schedule' with white text passes contrast.
• The pale pink button 'Review delivery notes' with red text fails contrast.

Finding this issue using the special elf testing tool

The elves use the Web Accesibility Viewer for Elves (WAVE) to help identify colour contrast issues.

When WAVE is run on a page, it highlights text and controls that do not meet minimum contrast requirements and provides information about the contrast ratios used.

This can help you identify potential problems quickly, but it is still important to consider whether colour is being used in a way that is clear and usable for everyone.

The elves sometimes use WebAIM's Contrast Checker to verify their colour choices too.

What this checks for

1.4.3 contrast (minimum) (opens in a new tab) Text must be readable against its background.

Why this matters

Poor colour contrast can make content difficult or impossible to read for people with low vision or colour vision deficiencies. It also affects users in everyday situations - such as using a screen in sunlight, on older devices, or when fatigued.

When contrast is too low, users may miss important information, make mistakes, or abandon tasks altogether. Good contrast improves readability for everyone, not just people with disabilities.

A common misconception is that increasing font size or using bold text fixes contrast issues. While size can help, colour contrast must still meet minimum requirements.

Bonus challenge

Use a contrast checker to test the failing examples above. What colour changes would make them pass?