Color Contrast in Web Design – How to Stay Accessible.

Accessibility efforts enhance color contrast so that everyone can read the complete information provided and leverage the relevant parts. The correct use of color makes content more perceivable to all users. It also makes websites more inclusive for people with disabilities.

So, what are Colors with Good Contrast?

Contrast is the difference in brightness between two colors. A good way to understand contrast is to compare colors in the same tonality (e.g.: grayscale). Colors must have sufficient contrast, for example, between the text color and the background color (technically called luminance contrast ratio). This includes text on images, icons, and buttons. Also, colors used to convey information on diagrams, maps, and other types of images must be distinguishable.

What is a Colour Contrast Ratio?

The more scientific definition is that contrast is a ratio of the luminance of the brightest color to the darkest color that the system can produce. Contrast ratios range from 1 to 21 [written as 1:1 and 2:2]

Why is Color Contrast Important in Web Design?

Color contrast is part of a broader set of web standards that fall under the umbrella of accessibility. When designing websites, it’s important to ensure sufficient color contrast. These standards are meant to ensure that everyone—including those with visual, motor/mobility, auditory or cognitive impairments, or seizures—is able to interact with websites without barriers.

Who depends on this feature?

• People with low contrast sensitivity, which is common in older people.
• People who cannot distinguish between certain colors (often called “color blindness”).

Accessibility is about more than compliance

Sure, it’s important to stay compliant. Critically important, in many cases. But really, web accessibility is about doing the right thing. Ideally, marketers and web developers should strive to make information accessible to everyone.

Your site probably isn’t perfect, particularly when it comes to color contrast. Almost none are. That doesn’t mean you shouldn’t strive for 100% accessibility and proper contrast. Don’t panic, and don’t give up – make the changes that need to be made.

What are the additional benefits of Colour Contrast?

• Content works in different lighting conditions, such as sunlight and glare.
• Content is easier for everyone to read, including those who do not have specific visual conditions.

What needs to happen for this to work?

Select text and background colors that provide sufficient contrast. There are tools to help check and select appropriate color combinations. This is ideally done during the early design stage and the selection of color palettes. While some people need high contrast, some people are sensitive to brightness and need to change the colors.

Takeaway

• Web accessibility standards have been developed to make online information and tools more useful to all populations.
• Website owners and developers should strive for maximum accessibility. Perfection is difficult to achieve, but a good faith effort is absolutely something that should be done.
• Google’s Lighthouse tool will identify accessibility issues, including color contrast problems.
• The minimum acceptable contrast for most text is 4.5:1.
• The Web AIM Contrast Checker will tell you the contrast between two colors.

So, find colors that provide maximum contrast, including enough contrast between content and the background, so that text is legible and non-decorative images are visible to anyone with low vision or color deficiencies.

This article was written by Will Awad.

For more information on Newgen’s digital accessibility services, visit wwww.newgen.co or a consultation, please email rdinesh@newgen.co