Readability standards
Contents
Readability standards
Testing the contrast ratio
Our lockups must always pass the AA accessibility standard for visibility set by the Web Content Accessibility Guidelines. Use the WebAIM tool to check the contrast ratio of the lockup color you wish to use against the background color of your creative:
- Regular and small lockups (18pt or below) must show a contrast ratio of 4.5:1 or higher.
- Large lockups (18pt or above) must show a contrast ratio of 3:1 or higher.
Color backgrounds
Make sure you check the contrast ratio of the wordmark and icon color against your background color. Both the wordmark and icon must pass the contrast ratio test in order to be used in any marketing collateral.
In this example, the red icon and white wordmark pass WCAG AA standards, but the black wordmark does not.
In this example, the red icon and black wordmark pass WCAG AA standards, but the white wordmark does not.
When the red icon does not pass the contrast ratio test, use a monochrome lockup instead.
Photo backgrounds
Whenever you place a lockup on a photo, the lockup must always be easy to see and read. You can continue to use the WebAIM tool to test the contrast ratio by selecting a predominant color from your background image.
Note that this approach will not provide a perfect ratio reading due to the various colors within a photo.
In this example, the red icon and black wordmark pass WCAG AA standards, but white wordmark does not.
In this example, the red icon and white wordmark pass WCAG AA standards, but the black wordmark does not.
Use a monochrome lockup if the red icon does not pass the color ratio test.
Since the red icon does not pass the color ratio test and the background image is predominantly light in color, the black monochrome lockup works best here.
Since the red icon does not pass the color ratio test and the background image is predominantly dark in color, the white monochrome lockup works best here.