Color Contrast CheckerDeveloper

Check if your foreground and background colors meet WCAG accessibility standards.

Local-first

Presets:

Foreground (text)

Foreground hex

Background

Background hex

Preview

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contrast ratio

5.17:1

Meets WCAG AA

Normal Text (AA)

Pass

Requires 4.5:1

Large Text (AA)

Pass

Requires 3.0:1

WCAG AAA

Fail

Requires 7.0:1

WCAG AA Compliant (Standard)

Good

Meets standard accessibility requirements for all regular text and passes AAA for large text.

WCAG 2.1 Compliance Breakdown

Normal Body Text

< 18pt regular or < 14pt bold

Level AA (4.5:1)Pass

Level AAA (7.0:1)Fail

Large Text & Headings

≥ 18pt regular or ≥ 14pt bold

Level AA (3.0:1)Pass

Level AAA (4.5:1)Pass

UI Components & Icons

Borders, focus rings, icons, buttons

Level AA (3.0:1)Pass

How this tool works

What it accepts, how to use it, and where your input is processed.

Show Guide

Web Accessibility ensures that digital content is usable by everyone, including people with visual impairments. Our tool helps you verify that your text is readable against its background.

WCAG 2.1 Guidelines:

AA Standard: Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
AAA Standard: Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Need an extra feature or found an edge case?Send Feedback