WeCapable - Color Contrast Checker

Foreground Color

Background Color

Large Text WCAG AA
Normal Text WCAG AA
Large Text WCAG AAA
Normal Text WCAG AAA
Click to change demo text
Contrast Ratio
Normal Text is:
  • Less than 14pt / 18.5px and bold face.
Large Text is, at least:
  • 14pt / 18.5px and bold face, or
  • 18pt / 24px and normal face
More Style Samples:
Normal
Bold
Italic
Bold and Italic
Underline
Graphic Elements > ❤ (18.5px)
Graphic Elements > ❤ (24px)

What is Color Contrast?

Color contrast is the difference between two colors. A higher contrast ensures better readability of text in a particular color over the background of a particular color. White and black colors offer highest contrast possible. Therefore, it is easiest to read black over white or white over black text. However the contrast between red and pink is not that great. As a result, it is advisable not to use the combination or red and pink. Needless to say that red over red will offer zero contrast and the text will not be visible.

Its not just colors but font size and font weight also impact contrast. Bigger and bolder the text - better would be the contrast.

Why is Color Contrast Important?

On websites, color contrast plays a significant role in the information accessibility. If a website will not offer proper contrast among its various components, it will be difficult for visitors to use the website. In particular, people with low vision or other vision-related issues, require high contrast elements in order to browse through the website.

Often designers and developers do not take web accessibility seriously. They, inadvertently, end up in losing a significant number of visitors simply because of difficult to read text.

What does the Color Contrast Checker do?

WeCapable - Color Contrast Checker is a tool that helps you enhancing accessibility of your website. Using this tool, you can easily find whether your color schemes will pass the test of WCAG guidelines for web accessibility. It is highly recommended that you keep your website compliant to the WCAG guidelines.