Color contrast checker

Color contrast is the difference in light between a font (or any other element) in the foreground and its background.  

With respect to web accessibility, the right color contrast can determine whether users with visual disabilities will be able to read your content or not. For example, a yellow font on a white background is less perceivable to a user with low contrast vision than a white font on a black background. Choosing the wrong color combinations can make navigating and interacting with your site confusing or even impossible.  

Your website’s chosen color scheme should be accessible to people with color blindness, low vision, low contrast sensitivity, or other visual disabilities, who may not be able to adequately perceive certain color combinations.  

While having sufficient color contrast is necessary for accessibility reasons, it also makes content easier to see and read for everyone, resulting in a better user experience for all visitors.  

The Siteimprove Color Contrast Checker is an easy-to-use tool that helps you determine whether your website’s chosen font and background colors are accessible to people with low vision and color deficiencies. 

The Web Content Accessibility Guidelines (WCAG) uses a figure known as the color contrast ratio to determine whether your chosen font and background colors meet the level of contrast that is considered acceptable. 

Since every color on the web is assigned a unique identifier (for example RGB values or HEX codes), it is possible to accurately analyze and compare two color codes against each other, thereby calculating the contrast ratio. The ratio is composed of two numbers, where a 1:1 ratio is the weakest contrast (for example a white font on a white background), and a 21:1 ratio is the strongest contrast (for example, black font on a white background). 

To check whether your font and background colors meet WCAG’s minimum requirements for accessibility, all you need to do is input the HEX values for your chosen colors into the Siteimprove Color Contrast Checker. The tool then automatically calculates and presents your color contrast ratio.  

It also indicates with a simple ‘yes’ or ‘no’ whether the inputted color combination, if used for normal or large-sized text, meets AA or AAA conformance levels as defined by WCAG. 

Using a color contrast checker is important to ensure that any visitor to your website can perceive your content, and that includes visitors with visual disabilities.  

While having accessible color contrasts across your site is clearly the ethical thing to do, there are other compelling reasons to ensure you comply with WCAG standards. According to Seyfarth Shaw LLP, 2019 saw 2,256 digital accessibility lawsuits filed in US federal courts – a 177% upwards jump in cases from 2017, or an average of seven cases every day. 

Using a dedicated color contrast checker to proactively check the accessibility of your color combinations is the simplest way to safeguard your organization from legal action and reputational damage. Color contrast checkers also have the added bonus of being a versatile tool for web design, enabling you to quickly test multiple color combinations for web pages, slideshows, infographics, and other design elements on your site. 

WCAG has set out different conditions to meet the AA and AAA levels of conformance with respect to color contrast.  

AA level conformance indicates that your pair of colors will be perceivable by most (but not all) people. AAA level conformance indicates that the color pairing will be perceivable by the maximum number of people possible. 

WCAG also distinguishes between the color contrast ratio requirements for normal and large text, as detailed below: 

For AA compliance: 

• Normal text should have a contrast ratio of at least 4.5:1 
• Large text (18+ pts if regular, 14+ pts if bold) should have a contrast ratio of at least 3:1 

For AAA compliance: 

• Normal text should have a contrast ratio of at least 7:1 
• Large text (18+ pts if regular, 14+ pts if bold) should have a contrast ratio of at least 4.5:1 

WCAG 2.1 requires a contrast ratio of at least 3:1 for certain graphic elements and user interface components, such as form input borders. However, decorative images, brand logos, and media files are not included in the WCAG color contrast requirements, though it is still in your best interests to comply with them.