Using contrast for accessible themes in Experience Builder
About contrast
Contrast is the degree of difference between the lightest and darkest parts of an image. In online content, contrast is most often represented by comparing foreground elements—such as text and icons—against their respective backgrounds. The difference in contrast can also be expressed as a ratio, where 1:1 has the least contrast (white text on a white background), and 21:1 has the most contrast (black text on a white background).
Importance of contrast
Good contrast in web page elements is essential to creating an experience that all users can enjoy, especially those with visual disabilities. Poor or inaccessible levels of contrast can cause your users to become confused or frustrated with their experience and can prevent users from viewing your content successfully. Accessible levels of contrast increases the readability of your content and allows users to visually distinguish and process information more efficiently.
The level of accessible contrast changes depending on the size or type of element.
Contrast is just one part of the much larger subject of web accessibility. According to the World Wide Web Consortium (W3C) at w3.org, “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.”
Determining accessible levels of contrast
The best way to ensure your colors have an acceptable level of contrast is to test them.
There are many tools available that can analyze your colors and compare them against the standards set by the Web Content Accessibility Guidelines (WCAG).
Q2 recommends the Contrast Checker by WebAIM. Specifically, Q2 recommends implementing contrast levels necessary to pass level AA, but you will have to decide which level of conformance to WCAG 2 is right for your organization.
In order to pass AA level conformance, you should follow the contrast ratios.
Small text: Ratio of 4.5:1 or higher
For small text (18 pt or 24 pixels and below), an acceptable level of contrast is 4.5 (or higher) to 1 (4.5:1).
Accessible contrast ratio
Poor contrast ratio
Large text: Ratio of 3:1 or higher
For large text (greater than 18 pt or 24 pixels), an acceptable level of contrast is 3 (or higher) to 1 (3:1).
Accessible contrast ratio
Poor contrast ratio
Nontext elements: Ratio of 3:1 or higher
For nontext elements (such as logos, icons, or user interface components), an acceptable level of contrast is 3 (or higher) to 1 (3:1).