Enter a background and a foreground color and check if the contrast ratio meet the Web Content Accessibility Guidelines
What is the color contrast?
Contrast is the difference in luminance or colour that makes an object (or its representation in an image, icon or display) distinguishable.
In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.
On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression.
Contrast is important because it allows designers and marketers to actually guide the attention of visitors who come to their websites, and this is done with and without color.
WCAG 2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or for user interface components.
WCAG 2 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.
Related resources
Share this tool
Related tools
Validate your pages with W3C Markup Validation Service.
Check the markup validity of HTML5 web documents with W3C Validator.
Validate your Css file sheet with W3C validation Service.
Check if the markup of your Cascading style Sheet document is W3C compliant.
Validate your AMP pages with this tool.
Test your Accelerated Mobile Pages, get detailed report and optimize performance.
Test your Progressive Web App.
Check the performance of your PWA, try to deliver high quality, engaging, fast and capable apps on every devices.
Test your Web Vitals metrics, score and diagnostic.
Measures Google Core Web Vitals LCP, FID, CLS, TTFB, FCP, TTI, TBT and more.
Capture web page requests and timeline waterfall.
Quickly capture and analyze web page network requests during page load.
Test your web pages structured data.
Check conformity of your structured data json-ld and improve your SEO.
Analyze your web page speed performance.
Retrieve information about speed index, latency, first contentful paint and more.
Is your web page mobile-friendly? Ready for mobile-first indexing?
Test whether a page on your site is mobile-friendly or not based on Googlebot User-agent.
Get Facebook data and engagement count by URL.
Retrieve Open Graph data, "share" count, comment count and engagement from url.
Check color contrast ratio WCAG 2 AA of your pages.
Check if your color scheme meet the WCAG 2 AA contrast ratio thresholds.
Explore and compare keywords.
Find out what customers are looking for. Select country, date, category, search type and compare keywords.
Get counts and keyword density from your content.
This tool provide your content validation on social network with just one click.
Menù
Tracking Tools
Builders and Generators
Image Tools
Tester and Validators
Server and Proxy Tools
Converters Tools