Return to knowledge base main page
What is a Contrast map?
A Contrast Map visually illustrates how effectively the colors in an image stand out from their surroundings.
By leveraging this data, you can ensure that your design not only meets accessibility contrast standards but is also clear and visually engaging for all viewers.
The contrast map measures the degree of contrast based on the WCAG 2.2 guidelines, ensuring accessibility for users with visual impairments.
Why is it important?
Understanding Contrast maps empowers design, UX, marketing, and CRO specialists to create visually engaging and accessible designs. By incorporating insights from Contrast maps, one can enhance the user experience, boost conversions, and ensure content is inclusive for all.
How it works?
We divide the image into rectangular zones, extracting key colors from each rectangle. Contrast ratios between colors within a rectangle are measured, displaying the numeric value of the highest contrast ratio between the most important colors in that zone.
Zones with higher contrast ratios are green, and those with lower ratios are blue.
Use and applications of a Contrast map?
Increasing visibility and conversions
Identify which objects in your design are the most crucial for your content (webpage, banner ad, poster, etc.) goals. Inspect those design objects in the Contrast map.
Are they in the green zones? If not, it could be more difficult for the viewers to notice since their visibility might not be optimal. Consider increasing the contrast of those design objects.
You can also check the contrast ratio numeric values of the zones that include your most important design elements. A higher contrast value indicates better visibility.
Ensuring compliance with accessibility standards
The target values are derived from the WCAG 2.2 standard, ensuring high accessibility compliance.
Level AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The level AAA standard requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
It also requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
Discovering untapped opportunities
Examine design parts in the blue zones. Are these design parts essential? Would your content goals benefit from increasing the contrast and likely the visibility of these parts? If the answer is yes, then go for it and increase the contrast in these areas.
Be cautious; increasing contrast in one area can divert attention from others. Attention is a zero-sum game – if one part gets more of it, other parts get less.
Use and applications of a Contrast map?
Contrast maps are particularly useful in assessing how well an image or design adheres to accessibility standards. They aid in identifying areas where text or other crucial design elements may lack sufficient contrast for optimal visibility. Fixing that can also positively affect conversions by reducing the likelihood that essential information will slip past the viewer’s eyes.
