Contrast is king

Contrast is king illustration showing shades of grey

Contrast is the perceived difference in colors that are in close proximity to each other. Using contrast effectively not only differentiates your web design from others, it’s the essential ingredient that makes content accessible to every viewer. People who are fully colourblind, those with specific types of colourblindness, and people with low-vision need to access content on the web. The guys at A List Apart reckon designers must ensure that every viewer is able to perceive content on websites. What’s more, designers don’t have to limit themselves to the high contrast combination of black and white: Instead, they can embrace their big pail of colors and create websites that unabashedly employ color with appropriate contrast.

Today, designers are more aware of color choice ramifications. Many businesses, organisations, and institutions follow rules of accessibility, requiring designers to make color decisions based on contrast. This has created a greater need and desire to test for color contrast. A variety of tools and resources help meet this need, and a great way to determine the best fit for your workflow is to take some time to experience the tools for yourself.

Every designer has a different workflow, but research is often one of the first stages of the design process. One way to guarantee that design effectively uses contrast is to evaluate web layouts in grayscale. To evaluate a live website’s contrast, use a tool such as graybit.com that converts existing websites to grayscale. Ask yourself the following questions:

  • Can you read the text?
  • Do the visual elements retain their hierarchy?

Take note of what works well when you view the websites in color and what stops working well when you view these sites in grayscale. Read full article at A List Apart …