Easily enhance your website’s accessibility with the Siteimprove Color Contrast Checker. This tool helps you quickly identify and correct color contrast issues, ensuring your content is readable for everyone.
Text color
#
Background color
#
Result — Ratio: 9.68:1
Accessibility Grade
AA
AAA
Normal text
pass
pass
Large text
pass
pass
Graphics
pass
Sample text
This tool tests the contrast ratio of your background and text for accessibility. It will also indicate if the colors pass the newer WCAG 2 contrast ratio formula.
This tool tests the contrast ratio of your background and text for accessibility. It will also indicate if the colors pass the newer WCAG 2 contrast ratio formula.
This tool uses the WCAG 2 (the world’s authority on web accessibility) formula for color contrast. For level AA compliance, your text should have a contrast ratio of 4.5:1 (don’t worry, our tool will figure this out for you!). For level AAA compliance your text should have a contrast ration of 7:1—however, if your text is large (18+ point or 14 point if the text is bold), then your ratio can be 3:1 for AA compliance and 4.5:1 for AAA.
Siteimprove Toolkit
Check out the Siteimprove Toolkit. This collection of free tools will help you achieve your digital potential today.
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 userswith visual disabilities will be able to read yourcontent 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 colorschemeshould 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 SiteimproveColor Contrast Checker is an easy-to-use tool that helpsyou determine whether your website’s chosen font and background colors are accessible to peoplewith low vision and color deficiencies.
The Web Content Accessibility Guidelines (WCAG)usesa 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 calculatesand presentsyour color contrast ratio.
It also indicates with a simple ‘yes’ or ‘no’whether the inputtedcolor combination, if used for normal or large-sized text, meets AA or AAA conformancelevels 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 includesvisitorswith 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,256digital accessibility lawsuits filed in US federal courts – a 177% upwards jump in cases from 2017, or an average of seven cases every day.
Using adedicated color contrast checker to proactively check the accessibility of your color combinationsis the simplest way to safeguard yourorganizationfrom legal action and reputational damage. Color contrast checkers also have the added bonus of beinga versatile tool for web design, enablingyou 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 meetthe AA and AAA levels ofconformancewith respect to color contrast.
AA level conformanceindicates that your pair of colors will be perceivable by most (but not all) people. AAA level conformanceindicates 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 yourbest interests to comply with them.
