Wcag color contrast checker

Third parties, outside of the approved use casesNot being used or transferred for purposes that are unrelated to the item's core functionalityNot being used or transferred to determine creditworthiness or for lending purposesSupportFor help with questions, suggestions, or problems, visit the developer's support siteRelatedRecite Me - WCAG Page Checker0.0(0)A basic WCAG checker for scanning individual web pages.WCAG Color contrast checker4.2(28)To check the color contrast between foreground and background of the textsIBM Equal Access Accessibility Checker4.9(17)A web browser extension for checking accessibility issuesDigital Accessibility Report and Test Suite5.0(1)Easier, faster, smarter WCAG accessibility testing, reporting, & ADA compliance management. Screen reader accessible. Built by PWDBrowserStack Accessibility Toolkit4.8(62)Web Accessibility Testing Tool for WCAG & ADA compliance - Empowering Developers and Testers to find and fix accessibility issues.Accessible Web Helper4.4(13)Discover and highlight accessibility violations on the web with the push of a button.ARC Toolkit3.4(24)Accessibility testing tool from TPGiLinkedIn Post Enhancer5.0(6)Make your LinkedIn posts stand out with bold, italics & lists. Enhance readability and keep your audience engaged effortlessly.WCAG Color Contrast Tool4.5(2)WCAG 2.2 Color Contrast Calculator & Color Grabber - Check text or image colors on any pageaxe DevTools - Web Accessibility Testing4.0(115)Accessibility Checker for Developers, Testers, and Designers in ChromeHalfAccessible - Accessibility Toolkit5.0(7)Accessibility Testing Toolkit, Target Size Checker, Text Spacing, Automated Accessibility & Color Issues, HTML Code CopierSiteimprove Accessibility Checker3.3(23)Jumpstart your web accessibility efforts directly in Chrome.Recite Me - WCAG Page Checker0.0(0)A basic WCAG checker for scanning individual web pages.WCAG Color contrast checker4.2(28)To check the color contrast between foreground and background of the textsIBM

Learn moreGuide to color contrastYou can trust our contract color checker or you can read this guide to learn more about accessibility standards.What is color contrast and why should you care?Color contrast is the difference in light between two colors. In web and graphic design, it typically describes the relationship between text color and its background color.High contrast makes the text easy to read, while low contrast can make it difficult or impossible for some users to discern the content.How to measure color contrastColor contrast is typically measured using a contrast ratio, ranging from 1:1 (no contrast, same color) to 21:1 (highest contrast, black text on white background or vice-versa). The color contrast ratio represents the difference in luminance or brightness between two colors.The contrast ratio is calculated using the following formula:(L1 + 0.05) / (L2 + 0.05)Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.WCAG contrast guidelinesWe recommend adhering to the WCAG (Web Content Accessibility Guidelines) color contrast guidelines for web and graphic design.WCAG 2.0 brought the use of the minimum contrast requirements (AA level), which became even more stringent with WCAG 2.1 in 2018. The subsequent WCAG 2.2 and the upcoming WCAG 3.0 don’t bring anything new in the context of color contrast.WCAG 2.0WCAG 2.1Small text4.5:17:1Large text3:14.5:1Non-text content/3:1Whenever possible, you should adhere to the WCAG 2.1 guidelines, with WCAG 2.0 guidelines being the mere minimum.In our contrast checker tool above, you will see a green color when you meet WCAG 2.1 guidelines and a yellow color for WCAG 2.0, while you’ll get flagged with red if your color contrast meets neither.Small textSmall text is defined as any text below 18 points or 14 points (pt) if bold. Since the conversion ratio is 1pt = 1.333px, this would

Be equivalent to 24px and 18.5px respectively.According to WCAG 2.0 guidelines, small text requires a minimum contrast ratio of 4.5:1 to ensure readability for users with moderate visual impairments. This stringent requirement acknowledges that smaller text is more difficult to read, especially for individuals with low vision or color vision deficiencies. WCAG 2.1 guidelines suggest a minimum of 7:1 color contrast ratio for small text.In the image below, you can check how white (#FFFFFF) text performs on various shades of grey, and how various shades of grey text perform on black background. (Feel free to experiment with more options with our color contrast checker above).More often than not, we work with colors, especially for backgrounds. Here, working just off your intuition can be challenging because were are not good at perceiving the lightness of colors.For example, you may think that using a complementary color palette (you can check what that would look like in our color palette generator) would ensure the highest contrast ratio, but it doesn’t. In fact, for most colors, it won’t pass the guidelines.My favorites are using different shades of the same hue for all design elements. For example, I’d use light blue for the background and dark blue for the text (much like you can see on Photutorial). Or vice-versa.Here are a few examples of what works and what doesn’t.Large textLarge text refers to text that is 18 points or larger, or 14 points if bold (remember, that’s 19px or 24px if bold and more).For large text, the minimum contrast ratio required by WCAG 2.0 is 3:1 and 4.5 by 2.1 version. This relaxed ratio reflects the fact that larger text is inherently easier to read, even with lower contrast, because of the increased size and stroke width.Non-text contentNon-text content includes images, graphs, charts, and other