Site search
Language
Try SEO Tools
Site search hamburger-menu icon
Select language
Čeština
Dansk
Deutsch
Eestlane
Español
Français
Hrvatski
Indonesia
Italiano
Lietuvis
Magyar
Melayu
Nederlands
Polski
Português
Română
Slovenský
Suomalainen
Svenska
Tiếng Việt
Türkçe
Ελληνικά
Български
Українська
Русский
ქართული
Հայերեն
עִברִית
العربية
فارسی
हिंदी
ภาษาไทย
한국어
中文
日本語

Contrast Checker

WCAG color contrast checker for calculate the text contrast ratio.

Foreground Color

Please enter a valid hex triplet, or use the color picker.

Background Color

Please enter a valid hex triplet, or use the color picker.

Contrast Ratio 21:1

Normal Text

WCAG AA: Pass

WCAG AAA: Pass

Example normal text - 16px

Large Text

WCAG AA: Pass

WCAG AAA: Pass

Example large text 18pt/24px

Graphical Objects and User Interface Components

WCAG AA:  Pass

image/svg+xml
  • Calculate contrast ratio for normal text size.
  • Calculate contrast ratio for large text size.
  • Calculate contrast ratio for User Interface Components.
  • Select color from color picker
  • Set up color Lightness

How to use Contrast Checker

  • Choose Background Color
  • Choose Foreground Color
  • Adjust Lightness if needs
  • Check audit for normal and large text

FAQ

How does contrast checker work?

You need to evaluate the color of the text and background. According to the WCAG 2.1 guidelines, these are: Large text - Text with a minimum size of 18px requires a contrast ratio of 3:1; Small text - Text with a size of less than 18px requires a contrast ratio of 4.5:1.

Why should my website have sufficient color contrast?

Text on a background with a low contrast ratio is often difficult to read. This does not only negatively impact those with visual impairments, it actually inconveniences all users. One example is reading text on a cell phone outside on a sunny day.

What does website accessibility mean?

An accessible website is a website designed so that people with visual or hearing impairments can use it without restrictions. For example, this ensures that all site elements have sufficient color contrast, i.e. the text color is quite different from the background color.

Do images and videos have to comply with WCAG color contrast requirements?

Certain graphics and interface components require a contrast ratio of at least 3:1. However, this doesn’t include logos, decorative images, or general media files.

© Smallize Pty Ltd 2022-2024. All Rights Reserved.