On our current platform, the default theme colors meet WCAG contrast requirements. Customizing colors is the most common way an otherwise accessible survey becomes hard to read, so it’s worth two minutes to check your choices.
What is color contrast?
Contrast is the difference in brightness between text (or a control) and its background, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). Low contrast makes content difficult to read, particularly for people with low vision or color blindness, and for anyone using a screen in bright light.
The ratios to meet
- Normal text: at least 4.5:1 against its background
- Large text (24px, or 19px bold, and larger): at least 3:1
- Buttons, form controls and focus indicators: at least 3:1 against adjacent colors.
- WCAG 2.2 AA checkpoints: 1.4.3 Contrast (Minimum) (AA), 1.4.11 Non-text Contrast (AA)
Checking your colors
- Find the hex codes of your text and background colors in your theme settings (for example #333333 on #FFFFFF)
- Open the WebAIM Contrast Checker
- Enter the two colors and check the ratio meets the levels above
- Repeat for question text, answer options, buttons and links
- Preview your survey and check it’s comfortable to read on a phone as well as a desktop screen.
Don’t rely on color alone
Color should never be the only way information is conveyed. For example, don’t ask respondents to “pick the green option”, and don’t use color alone to distinguish choices in an image. Our validation messages include text as well as color for this reason.
- WCAG 2.2 checkpoints: 1.4.1 Use of Color (A)
Logos and images
Logos are exempt from the contrast requirements. Any other image containing text should meet them; better still, use real text instead of images of text.
Resources