Color Contrast Checker

Colour Contrast Checker & Ratio Calculator

Large TextWCAG AA
Normal TextWCAG AA
Large TextWCAG AAA
Normal TextWCAG AAA
Click to change demo text!
Foreground Color
Background Color
Color Contrast Checker

Color Contrast Accessibility Validator

Calculate the contrast ratio of text and background colors. This page provides free color contrast analysis tool that will display the color contrast issues of a web page or chosen color-pair; per WCAG 2.1 Guidelines. Color Contrast refers to how bright or dark colors appear against each other on screens; particularly with regard to the relative, gray-scale luminosity as perceived by the human eye. Color contrast checker 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 - The World Wide Web Consortium Web Accessibility Initiative?

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. The purpose of the WCAG standard is to define how to “… make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general.”.

Did you check our free color tools?
A collection of free color tools that will help you choose the right color for your next project! Meet a few tools that will make working with color faster and more fun.