Check the contrast of your color design for accessibility base on Web Content Accessibility Guideline (WCAG). Calculate the contrast ratio of text and background colors. This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible. Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast). The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. The level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text.
What is WCAG?
Web Content Accessibility Guidelines (WCAG) is developed by W3C WAI (The World Wide Web Consortium Web Accessibility Initiative) with a goal of providing a single shared standard for web content accessibility. The WCAG documents explain how to make web content more accessible to people with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
How it works color contrast checker?
- We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility.
- If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.
- We modify the lightness value only, in order to stay as true to the original color as possible.