What contrast ratio does normal text need?

WCAG AA requires at least 4.5:1 for normal text, while AAA requires 7:1. Large text uses lower thresholds of 3:1 for AA and 4.5:1 for AAA.

How does the accessible color suggestion work?

If the current pair misses 4.5:1, the tool searches lighter and darker versions of the text color and chooses a passing result that remains perceptually close when possible.

Does a Pass for UI components certify my interface?

No. That result checks only the current color pair against 3:1. Complete accessibility also depends on component boundaries, states, typography, semantics and other context outside this checker.

What counts as large text in these results?

The interface follows the common WCAG interpretation: at least 24px regular text or approximately 18.66px bold. The editable preview includes both normal and large samples for comparison.

Back to Design & Color Tools

Color Contrast Checker

Measure a foreground and background pair against WCAG thresholds, preview real text and find a nearby accessible alternative.

Click a color swatch to choose a color, or enter a HEX value.

Text color

Background color

Live preview

Design that everyone can read

Check whether your text remains clear and accessible against this background.

Large text sample

Normal text sample for everyday interface content.

Contrast ratio

8.08:1

Calculated from the current text and background colors.

Normal text — AA

Pass

Requires 4.5:1

Large text — AA

Pass

Requires 3.0:1

Normal text — AAA

Pass

Requires 7.0:1

Large text — AAA

Pass

Requires 4.5:1

UI components — AA

Pass

Requires 3.0:1

Large text means at least 24px regular or approximately 18.66px bold. The UI components result checks only this color pair, not the accessibility of an entire interface.

color: #384D37;
background-color: #F1F0EF;

How to use Color Contrast Checker

1
Choose the Text color and Background color with the swatches or enter valid HEX values.
2
Read the calculated contrast ratio and the separate AA, AAA, large-text and UI-component results.
3
Edit the sample heading or paragraph directly in the Live preview to judge the pair with realistic content.
4
When offered, review the Suggested accessible text color and click Use suggestion to apply it.
5
Copy either color, the suggestion or the generated foreground/background CSS.

Frequently asked questions

About Color Contrast Checker

Color Contrast Checker turns relative luminance into decisions that are relevant to text and interface design. Instead of returning one ratio alone, it separates the thresholds for normal text, large text and UI components at WCAG AA and AAA levels.

A live, editable preview shows the selected pair across headings, paragraphs and a bordered control. When normal text fails, the suggestion engine adjusts the foreground lightness toward a nearby color that reaches 4.5:1, while keeping the original hue character as closely as the available gamut permits.

Contrast is one measurable part of accessibility, not a site-wide certification. The copied CSS reproduces the tested pair, but designers should still evaluate fonts, states, non-text indicators and the broader user experience.