--- title: Improving Your Design and Conversion with Contrast description: Most digital professionals realize that getting a user’s attention is a primary factor in achieving your online goals. We’ve all seen the popups, huge buttons, and animation that works to draw a user somewhere on a webpage in hopes of a racking up a conversion or lead. But how do we know what is good […] image: https://modern.kelp.agency/hubfs/woman-holding-tablet-computer.jpg --- [Skip to Content](https://modern.kelp.agency/blog/improving-your-design-and-conversion-with-contrast#main-content) Kelp Creative Agency logo dark [![Modern Pro](https://modern.kelp.agency/hubfs/modern-pro-assets/modern-pro-dark.svg "Modern Pro")](https://modern.kelp.agency/) Kelp Creative Agency logo light [![Modern Pro](https://modern.kelp.agency/hubfs/modern-pro-assets/modern-pro-light.svg "Modern Pro")](https://modern.kelp.agency/) - Page Layouts - [Home](https://modern.kelp.agency) - [Services](https://modern.kelp.agency/template-services) - [Contact](https://modern.kelp.agency/contact) - [Landing](https://modern.kelp.agency/template-landing) - System - [404 Error](https://modern.kelp.agency/404) - [Documentation](https://modern.kelp.agency/docs) - [Theme Options](https://modern.kelp.agency/docs#theme-options) - [Templates](https://modern.kelp.agency/docs#templates) - [Modules](https://modern.kelp.agency/docs#modules) - [Blog](https://modern.kelp.agency/blog) Search [Purchase Theme](https://ecosystem.hubspot.com/marketplace/website/modern-pro-theme-by-kelp-creative-agency) Menu ## Search Design Dives # Improving Your Design and Conversion with Contrast written by **Brandon Berlew** ![bench-accounting](https://modern.kelp.agency/hs-fs/hubfs/woman-holding-tablet-computer.jpg?width=1200&height=802&name=woman-holding-tablet-computer.jpg) ### Most digital professionals realize that getting a user’s attention is a primary factor in achieving your online goals. We’ve all seen the popups, huge buttons, and animation that works to draw a user somewhere on a webpage in hopes of a racking up a conversion or lead. ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/popupspam-1.gif?width=500&height=333&name=popupspam-1.gif) **But how do we know what is good and what is *just too much*?** It turns out that Google doesn’t really like when websites throw attention grabbing visuals at a user that fight for visual space or make it difficult for the user to engage in the core page material. This problem doesn’t just start and end with webpages and Google, though. Taking strategic steps to grab a viewers attention is a large part of any design, both physical and digital. This means that there has to be a safer, more optimal path to increasing conversion while bettering design overall, right? Well, yes. Good design uses appropriate **CONTRAST**. Establishing a hierarchy of importance by using contrast in color, size, shape, and type is critical as it will give your design or website a clear and concise message to your audience. To understand how to properly use contrast in your design, we first need to know what contrast is. Contrast is defined as [“the degree of difference between things having similar or comparable natures.”](https://www.merriam-webster.com/dictionary/contrast)  A simple way of understanding this is it is the difference between black and white, big or small, thick or thin. These examples are all on the opposite side of the spectrum, making sure nothing is blending together. Contrast will make your design exciting and aesthetically pleasing. Also contrast will create a focal point for your eye to naturally draw in to. This helps organize the information and guide the reader to get a better understanding of what you deem as important to them. Let’s take a look at some of the different ways we can use contrast to help our design. ## **Contrast of Color** ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Contrast-blog-1-3.png?width=996&height=543&name=Contrast-blog-1-3.png) Using colors that are too close to each other can make the design feel bland or unaccessible. An easy way to make sure you have a separation of colors is to make sure the luminance values are different on the colors you choose. A simple example of this is black and white. This will help your objects you want to highlight stand out from the rest of the design. When it comes to digital design, several of the most popular web browsers provide designers tools to evaluate whether a design is using a level of contrast that will be ADA Compliant. If you inspect any element via the browser and select the color in question, you should be able to see the contrast guide and make more educated decisions on the level of the color contrast. ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Screen-Shot-2020-06-05-at-9_19_11-AM-3.png?width=670&height=924&name=Screen-Shot-2020-06-05-at-9_19_11-AM-3.png) When it comes to digital design, several of the most popular web browsers provide designers tools to evaluate whether a design is using a level of contrast that will be ADA Compliant. If you inspect any element via the browser and select the color in question, you should be able to see the contrast guide and make more educated decisions on the level of the color contrast. [Google also provides some information on how color contrast can affect accessibility.](https://web.dev/color-and-contrast-accessibility/) ## **Contrast of Size** ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Contrast-blog-2-3.png?width=996&height=543&name=Contrast-blog-2-3.png) Whether it is text or images, sizing can create a separation to show what is most important to you and guide the user through the design. Focus the user’s attention on the larger objects while supplementing it with the less important information in smaller blocks. ## **Contrast of Type** ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Contrast-blog-3-2.png?width=996&height=543&name=Contrast-blog-3-2.png) You can use different typefaces to help give contrast to your design. Complemented by different sizes and weights, you can create a hierarchy that stands out to the audience. ## **Contrast of Shape** ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Contrast-blog-4-1-2.png?width=996&height=543&name=Contrast-blog-4-1-2.png) Using unique shapes in your design or web page can help catch the eye of your viewer. Using a shape or image that breaks up the grid-like feel of your content can grab the user’s attention and focus on that particular object. ## **Contrast of Position** ![](https://modern.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/Contrast-blog-5-Jan-27-2022-06-28-37-50-PM.png?width=996&height=543&name=Contrast-blog-5-Jan-27-2022-06-28-37-50-PM.png) Aligning and spacing around content blocks will help differentiate and group related information and create a design that is easy to navigate. Use whitespace to your advantage for this. Whitespace can help focus on the most important feature of the design. There is a lot more that goes into graphic design and improving interaction, but using these contrast tips can help you level-up your work by creating intentional flow and separation to your design.  #### **Let us know how you’ve used appropriate contrast to achieve your design goals by commenting below.** ## Recent Blog Posts [Partners VS Pirates: Navigating an Ocean of Digital Agencies](https://modern.kelp.agency/blog/partners-vs-pirates-navigating-an-ocean-of-digital-agencies) ## Partners VS Pirates: Navigating an Ocean of Digital Agencies Ready to go on a journey? Let me paint you a picture. Your business is your island, and the internet is the digital ocean connecting you to... Read more ![](https://modern.kelp.agency/hs-fs/hubfs/black-flat-screen-computer-monitor.jpg?width=800&name=black-flat-screen-computer-monitor.jpg) [Improving Your Design and Conversion with Contrast](https://modern.kelp.agency/blog/improving-your-design-and-conversion-with-contrast) ## Improving Your Design and Conversion with Contrast Most digital professionals realize that getting a user’s attention is a primary factor in achieving your online goals. We’ve all seen the... Read more ![](https://modern.kelp.agency/hs-fs/hubfs/woman-holding-tablet-computer.jpg?width=800&name=woman-holding-tablet-computer.jpg) [Perfection Paralysis: Stay Calm, Create on](https://modern.kelp.agency/blog/perfection-paralysis-stay-calm-create-on) ## Perfection Paralysis: Stay Calm, Create on Any good creative producer will tell you their goal is to create something better than they did before. That’s not too hard of an ask. Is... Read more ![](https://modern.kelp.agency/hs-fs/hubfs/modern-toy-robot-on-bright-shelf-near-wall.jpg?width=800&name=modern-toy-robot-on-bright-shelf-near-wall.jpg) ## Lorem Ipsum Sit Amet Lorem Ipsum Dolor [![Modern Pro](https://modern.kelp.agency/hubfs/modern-pro-assets/modern-pro-light.svg "Modern Pro")](https://modern.kelp.agency/) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut fringilla turpis, vehicula tempus neque. [Follow us on Facebook](https://www.facebook.com) [Follow us on LinkedIn](https://www.linkedin.com) [Follow us on Twitter](https://www.twitter.com) [Follow us on Instagram](https://www.instagram.com) ##### Lorem Ipsum - Aliquam sed - Aliquam sed - Aliquam sed - Aliquam sed ##### Lorem Ipsum - Aliquam sed - Aliquam sed - Aliquam sed - Aliquam sed ### Subscribe Here! Copyright © 2026 Kelp Creative Agency - Terms of Use - | - Privacy Policy