ToolsHub
//Contrast Checker

Samples

Live preview

Body text (14px)

The quick brown fox jumps over the lazy dog. Aa Bb Cc 0123456789.

Heading text (16px bold)

Large text (20px bold)

Auto-contrast text on this background

Automatic foreground: #FFFFFF

WCAG 2.1 criteria
Normal textAA

Body text, links, labels

≥ 4.5:1Pass
Normal textAAA

Enhanced accessibility

≥ 7.0:1Fail
Large textAA

≥ 18pt or 14pt bold

≥ 3.0:1Pass
Large textAAA

≥ 18pt or 14pt bold

≥ 4.5:1Pass
UI componentsAA

Borders, icons, form controls

≥ 3.0:1Pass

Contrast ratio

5.17

:1

AA

Foreground

#FFFFFF

Background

#2563EB

WCAG guidelines
AAA
≥ 7.0 : 1

Highest accessibility. Ideal for all text sizes.

AA
≥ 4.5 : 1

Minimum for normal body text. Required by most standards.

AA Large
≥ 3.0 : 1

For large text (≥18pt or 14pt bold) and UI components.

Fail
< 3.0 : 1

Does not meet any WCAG level. Avoid in production.

Related Tools