Color Contrast Accessibility Checker (WCAG)

Color contrast is a very important component of creating a more accessible web for all users. To make your text easy to read, the contrast between the text and the background should be high. Use this color contrast checker to determine whether or not your color combinations are accessible or not. Color Contrast Checker tool uses the WCAG 2.0 (the world’s authority on web accessibility) formula for color contrast. For level AA compliance, your text should have a contrast ratio of 4.5:1 (don’t worry, our tool will figure this out for you!). For level AAA compliance your text should have a contrast ration of 7:1—however, if your text is large (18+ point or 14 point if the text is bold), then your ratio can be 3:1 for AA compliance and 4.5:1 for AAA.

How does it work Color Contrast Checker?

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.

https://hexcolor.co/color-contrast-checker