The Contrast Conundrum
A university's online learning platform uses a light gray background (#F0F0F0) with dark gray text (#333333) for body content. The design team recently updated the color scheme to use a trendy pastel palette, changing the text color to a light blue (#99CCFF) on the same background. They argue that the new color is more visually appealing and matches the university's brand. However, students with low vision have reported difficulty reading the text. An accessibility audit found that the contrast ratio between the text and background is 2.5:1, which fails WCAG 2.1 AA. The design team is resistant to changing the color because they believe it will make the platform look outdated. They ask you to explain the issue and suggest alternatives that maintain brand identity while meeting accessibility standards.
1. Explain the WCAG 2.1 contrast requirements for text and why the current color scheme fails. Include the specific success criteria and contrast ratios.
Read the worked answer
WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The current ratio of 2.5:1 fails both. The light blue (#99CCFF) on light gray (#F0F0F0) lacks sufficient luminance difference, making it hard for users with low vision or color deficiencies to read. This is a Level AA requirement.
2. Propose at least two alternative color schemes that meet WCAG 2.1 AA while preserving the pastel aesthetic. Justify your choices with approximate contrast ratios.
Read the worked answer
Alternative 1: Darken the text to a deep blue (#003366) on the same light gray background. Contrast ratio: approximately 10:1, well above 4.5:1. This maintains a blue theme but with sufficient darkness. Alternative 2: Keep the light blue text but darken the background to a dark gray (#333333). Contrast ratio: approximately 7:1. However, this inverts the scheme and may not preserve the pastel look. Alternatively, use a medium blue (#0066CC) on white (#FFFFFF) with a ratio of 5.5:1. Each option should be tested with users.