Web ToolBox

Color Contrast Checker

Evaluate text and background visibility with WCAG standards

Contrast

17.95

AA

small text

Readable
AA

large text

Readable
AAA

small text

Readable
AAA

large text

Readable

Preview

  • This is level AA small text.
  • This is level AA large text.
  • This is level AAA small text.
  • This is level AAA large text.

What is Color Contrast Checker?

When website or app text is hard to read, or you're unsure if it meets accessibility standards—this tool can help. It calculates the contrast ratio between text and background colors and instantly checks if it complies with WCAG 2.0 standards.

  • Real-time contrast ratio calculation
  • Checks compliance with WCAG 2.0 AA/AAA standards
  • Preview to see the actual appearance

Useful for creating designs readable by users with visual impairments, checking brand color accessibility, selecting colors for UI components, and many other scenarios.

How to Use

Select text color and background color. You can enter color codes directly or choose colors with the color picker. Once selected, the contrast ratio is calculated in real-time, showing WCAG compliance status and a preview.

If it doesn't meet the standards, you can adjust the colors and check again. Use the swap colors button to instantly switch text and background colors.

WCAG 2.0 Contrast Standards

AA (Minimum Standard)

The recommended standard for general websites.

  • Small Text: Contrast ratio of 4.5:1 or higher
  • Large Text: Contrast ratio of 3:1 or higher

Large text refers to 18pt (24px) or larger, or bold 14pt (18.5px) or larger.

AAA (Enhanced Standard)

The standard for cases requiring stricter accessibility.

  • Small Text: Contrast ratio of 7:1 or higher
  • Large Text: Contrast ratio of 4.5:1 or higher

Adopted by government websites and services requiring high accessibility.

What is Contrast Ratio?

Contrast ratio quantifies the difference in brightness between two colors. It's expressed in a range from 1:1 (no difference) to 21:1 (maximum difference).

For example, black (#000000) and white (#FFFFFF) have a ratio of 21:1, the highest possible. Higher contrast ratios make text easier to read.

Benefits of Accessible Design

Readable for Everyone

Makes content comfortable to read for users with visual impairments, color blindness, the elderly, and many others.

Improved SEO

Sites with accessibility considerations receive higher ratings from search engines, positively impacting SEO.

Enhanced Brand Value

User-friendly design demonstrates corporate and service social responsibility, improving brand image.