Color Contrast Checker & Ratio Calculator

Calculate contrast ratio of foreground and background colors and check for Web Content Accessibility Guidelines (WCAG)

#
#
Contrast Ratio - 13.41:1

Title text

Sample text: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.


For not large-scale text and images of text

For large-scale text and images of text

WCAG AA (minimum contrast)

WCAG AAA (enhanced contrast)

WCAG AA (minimum contrast)

WCAG AAA (enhanced contrast)

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.

Learn more »

What is a WCAG success criterion 1.4.3?

WCAG success criterion 1.4.3 states that visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Learn more »

What is a WCAG success criterion 1.4.6?

WCAG success criterion 1.4.6 states that visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Learn more »
Color Theory article cover image
Your Guide to Colors: Color Theory, The Color Wheel & How to Choose a Color Scheme
Read More
Color Contrast Science article cover image
The Science of Color Contrast — An Expert Designer’s Guide
Read More