Color Contrast Checker
Reading content on a site with similar text, background, and UI colors is challenging. And it’s particularly challenging for people with vision-related disabilities. Sample normal text sizes, large text sizes, and non-text elements to see your WCAG compliance results.
How to Interpret the Color Contrast Ratios?
Minimum contrast ratio requirements
WCAG 2.1 Level AA
Normal text – minimum contrast ratio of 4.5:1
Large text – minimum contrast ratio of 3:1.
WCAG 2.1 Level AAA
Normal text: minimum contrast ratio of 7:1
Large text: minimum contrast ratio of 4.5:1
Large text is defined as 14 point (18.67 px) and bold or larger, or 18 point (24 px) or larger.
Please note that incidental text such as images that are purely decorative or part of an inactive user interface component,
and logotypes, such as parts of a logo or brand name, have no minimum contrast requirement.
Why Use a Color Contrast Checker?
Contrast is one of the more common web accessibility issues, but it is also one of the easiest to fix. According to the U.S. Web Design System (USWDS), 4.5% of the U.S. population has some kind of color insensitivity that makes it difficult to distinguish or perceive differences in hues. People with color insensitivity and low vision often have difficulty reading text that does not contrast with its background. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable for users who cannot see the full range of colors and also helps those rare users who see no color.
Use our web color contrast checker to quickly check color combinations, and ensuring that all your branded content assets and design elements are accessible to everyone. It can also be used to test color contrast with other legislation, e.g. as an ADA contrast checker.
Contrast Checker
Enter foreground and background colors to check the contrast ratio:
Normal Text
WCAG AA:
WCAG AAA:
Large Text
WCAG AA:
WCAG AAA:
Graphics and UI Components
WCAG 2.1: