Color Contrast Checker (WCAG)

Calculates contrast ratios between two colors according to WCAG 2.1 guidelines (AA/AAA).

Color Contrast Checker (WCAG 2.1)

Foreground (Text)

Background

4.47 : 1

Contrast ratio

WCAG 2.1 Accessibility

Normal text Smaller than 18pt (approx. 24px)

AA Fail AAA Fail

Large text Larger than 18pt or 14pt bold

AA Pass AAA Fail

UI elements / icons Controls and informative graphics

AA Pass

Preview

Large heading

This is an example of normal body text. Readability strongly depends on the contrast ratio between foreground and background color.

Example application

Button

The preview above shows the exact colors. Use a contrast ratio of **4.5:1** for body text (AA) and **3:1** for large text to ensure good accessibility.

Guide & best practices

Contrast Checker for WCAG-compliant color contrast

Make sure text and UI provide enough contrast – with contrast ratio and a clear AA/AAA assessment.

Typical use cases

Ideal for accessibility audits, design systems, accessibility compliance and reviewing themes.

How Balou computes contrast

Enter foreground and background color (HEX/RGB); Balou computes the contrast ratio and rates it against WCAG thresholds.

Accessible color best practices

Aim for at least AA (4.5:1 normal text), also check large text and UI components and test hover/focus states.

Frequently asked questions

Which contrast ratio meets WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text (from about 18 pt or 14 pt bold).

What is the difference between AA and AAA?

AAA is stricter and requires 7:1 for normal text and 4.5:1 for large text.

Does contrast apply to icons and UI?

Yes, non-text elements like icons and controls require at least 3:1 (WCAG 1.4.11).

HEX or RGB – does it matter?

No, both describe the same color; the contrast ratio is identical.