# What is color contrast?

DevFeed: [What is color contrast?](<https://devfeed.tech/articles/what-is-color-contrast-9424.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/what-is-color-contrast/>)

Author: Rachel R. Vasquez

Published: 2015-01-05T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [article](<https://devfeed.tech/tags/article.md>), [developers](<https://devfeed.tech/tags/developers.md>), [readability](<https://devfeed.tech/tags/readability.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>)

## AI overview

This article explains color contrast and its importance for web accessibility. It describes complementary colors, contrast between foreground content and backgrounds, tools for checking contrast ratios, and WCAG 2 guidance including a 4.5:1 minimum for regular text and a 7:1 ratio for AAA conformance. It also discusses larger text, heavier strokes, and user controls for adjusting colors.

## Source excerpt

In color theory, contrasting colors, also known as complementary colors, are colors from opposing segments of the color wheel. Colors that are directly across from one another on a basic color wheel provide maximum contrast. Oftentimes companies implement complementary colors to provide the most contrast in their brand. The IKEA logo uses blue and gold, which are direct opposites on the color wheel, as does the FedEx logo. These allow for maximum recognizability and readability, the latter of which is especially important for web accessibility. What does this mean for web accessibility? On the web, the use of complementary colors is about finding shades that provide enough contrast between content and the background for anyone with low vision impairments and color deficiencies. This doesn't mean colors should only be limited to contrasting colors, but instead that care should be taken to ensure a level of contrast in body text, logos, and essential diagrams or other pieces of content. There are a number of tools to help designers and developers check color contrast, including these listed below: Tanaguru Contrast Finder Contrast Ratio by Lea Verou Colour Contrast Analyzer by TPGi Color Contrast Checker by WebAIM These tools test your colors against a contrast ratio. A contrast ratio of 4.5:1 is the minimum Web Content Accessibility Guideline (WCAG) 2 standard for regular sized text. For more information on how these ratios are calculated, there is a link to an article by W3C called "The Contrast Minimum" included in the Further Reading section following the article. The level to which a pair of colors are contrasted is measured with a grade system, known as "levels of conformance". The highest attainable grade is AAA, which requires a 7:1 contrast ratio. W3C states that because it is not always possible to reach the AAA level of conformance across entire sites, the goal is to get the highest level in crucial areas across a site, such as headlines and body text. What