On our current platform, the default theme colours meet WCAG contrast requirements. Customising colours 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 colour 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 colour 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 colours.
- WCAG 2.2 AA checkpoints: 1.4.3 Contrast (Minimum) (AA), 1.4.11 Non-text Contrast (AA)
Checking your colours
- Find the hex codes of your text and background colours in your theme settings (for example #333333 on #FFFFFF)
- Open the WebAIM Contrast Checker
- Enter the two colours 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 colour alone
Colour should never be the only way information is conveyed. For example, don’t ask respondents to “pick the green option”, and don’t use colour alone to distinguish choices in an image. Our validation messages include text as well as colour 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