Creating visually accessible CTAs (BP)
Overview
While having access to configurable CTAs through Igloo's CTA Widget, it's important to properly use these settings to create visually accessible CTAs.
Recommendation
Try to use highly contrasting text, text backgrounds, and images, keeping in mind that transparent text backgrounds will need even more contrast with the text. You can use a Contrast Grid to test your desired colors.
Steps
- The example below shows a text box background color with the "Use contrasting color" default selected in the Widget configuration. The result is readable but is it accessible to users with vision impairments? Let's find out!
- The image below shows how I test the hex code #BD6060 in the Contrast Grid to see how white text tests against it. (Note: The grid is based on solid fill color and does not consider transparency.)
Result
The chosen background and default contrast text color only pass accessibility with white text in a large text format. The example CTA does not have the option for large enough text to make this color combination accessible, leaving those people with different visual abilities a difficult challenge or potentially unable to read the CTA. Passable alternatives are using black text or using a slightly darker background shade.
- 313 views
- 3 previews
- 2 versions
- 0 comments
- 1 follower
- Updated By:
- Jesse Langstaff
- January 6, 2020
- Posted By:
- Ashley Pergolas
- June 13, 2019
- Versions:
- v.2
0 Comments