Color Palette
Color Converter
About Color Contrast Checker
This tool checks the color contrast between the foreground and background of the elements that are in the page according to the WCAG 2.
Color contrast is a very important component of creating a more accessible web for all users. To make your text easy to read, the contrast between the text and the background should be high.
Use this color contrast checker to determine whether or not your color combinations are accessible or not.
How contrast checker work?
The tool uses the WCAG 2.0 (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. For level AAA compliance your text should have a contrast ration of 7:1—however, if your text is large (18+ point or 14 points if the text is bold), then your ratio can be 3:1 for AA compliance and 4.5:1 for AAA.
Who benefits from color contrast compliance?
Website and app users who have low vision, low contrast vision, or color vision deficiency will require color choices that adhere to the Web Content Accessibility Guidelines (WCAG) standards in order to read content. As the population ages, consider how many people may fall into one of those visual categories. Additionally, even people without a visual disability will appreciate a color palette that isn’t distracting and won’t cause unnecessary eye strain.
How do I meet color contrast compliance?
Meeting color contrast requirements is truly one of the most important accessibility considerations, and it’s often an area that can be easily remediated.
WCAG success criterion 1.4.3 is the main one to know here, as it dictates the minimum contrast that’s generally considered accessible. The guidelines say that normal text (including images of text) must meet a contrast ratio of at least 4.5:1; large text (18 point or larger, or 14 point or larger and bold) should have a contrast ratio of at least 3:1.
The minimum contrast ratio of 4.5:1 adheres to WCAG Level AA, but there is also an “enhanced” ratio (success criterion 1.4.6) that requires a deeper level of contrast and adheres to Level AAA. The enhanced ratio calls for a contrast of 7:1. It’s important to keep in mind that these designated numbers, just like all WCAG checkpoints, are not arbitrary — they’re specifically designed to help more people access the information on your website. The 4.5:1 ratio should be enough to make up for the loss in contrast sensitivity for those with 20/40 vision, while the 7:1 ratio accounts for roughly 20/80 vision. Remember, complying with Levels A and AA is usually the standard.
