Accessibility.Blog

What is color contrast?

April 20, 2019 at 11:27:02 AM EDT

Colors are an essential feature of web design and how they're used is a core consideration of a website's or app's accessibility. A term you may have heard is "color contrast," but if you aren't quite sure what that means, we have you covered.

What is color contrast?

Color contrast is the difference in light between font (or anything in the foreground) and its background. In web accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information.

What is color contrast ratio?

Color contrast ratio is the numerical value assigned to the difference in light between the foreground and the background. In web accessibility, the color contrast ratio is how contrast is actually measured. This is possible because colors on the web are generated through unique codes, providing a way to accurately analyze and compare those codes against each other, resulting in a ratio.

Where can I learn more about color contrast for web accessibility?

For more information, such as who benefits from color contrast compliance and how to meet color contrast compliance, check out The Basics and Importance of Color Contrast for Web Accessibility.

Anybody can get a free instant color contrast analysis of a web page with the a11y® Color Contrast Accessibility Validator.

Here to help

To understand how color contrast expectations and all accessibility guidelines apply to your website or app, talk to us. Or, get started with a free website accessibility scan.

We look forward to helping you achieve, maintain, and prove digital compliance.

Accessibility Guidelines Human Interest Accessibility Requirements Accessibility UX Defining Terms Knowing is half the battle

   

Subscribe to Email Updates