Color Contrast Checker
The tool tests the contrast ratio of background and text colors for accessibility. You can use it to visualize different color combinations for your website design that are in compliance with Web Content Accessibility Guidelines (WCAG) and international legislation based on it like the EU Web Accessibility Directive, the Americans with Disabilities Act (ADA), or the Accessibility for Ontarians With Disabilities Act (AODA).
Color Contrast Tool Guide
How to Interpret the Color Contrast Ratios
WCAG 2.1 Level AA
Large text - minimum contrast ratio of 3:1.
WCAG 2.1 Level AAA
Large text: minimum contrast ratio of 4.5:1
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.
Need additional help?
See how we can help you make your website more accessible. Book a free web accessibility scan today.
Why Use a Color Contrast Checker?
Use Monsido’s 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.
Frequently Asked Questions
Color is such a vital element of web design as it is used to convey personality, attract attention, symbolize action, and indicate importance. As color carries a lot of significance in both being visually pleasing as well as conveying meaning, users must be able to perceive the content of different colors on a webpage. Color accessibility is important as it helps users with visual impairments like low vision or color blindness to properly distinguish content elements and read/view them effectively.
A color contrast checker is a tool that measures the difference in perceived luminance between two colors to ensure that is perceivable to users with visual impairments or insensitivity.
The difference is measured on a ratio scale that starts at 1:1 (for white on white, to 21:2 (black on white). According to the WCAG level AA, the minimum contrast ratio that colors can have for the visual presentation of text and images of text is 4.5:1.
WCAG 2.1 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, except for large text, which should have a minimum contrast ratio of 3:1.
WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (14 point and bold or larger, or 18 point or larger).
Images must pass the WCAG contrast requirements. Images that contain text must ensure that the contrast between the image background and the text is sufficient, especially if the images are of low quality and if the image needs to be enlarged in any way. Images of text must have a minimum contrast ratio of 4.5:1.
For images that do not contain text, but still convey meaning, the image components must still have sufficient contrast to ensure that the overall image is perceivable. WCAG 2.1 level AA specifies that graphical objects and author-customized interface components such as icons, charts, and graphs, buttons, form controls, and focus indicators and outlines, have a contrast ratio of at least 3:1.
