What is Color Contrast Checker?

Color Contrast Checker is a tool for calculating the contrast ratio between text and background colors and checking whether the pair passes WCAG 2.0 AA / AAA requirements. It shows pass or fail results for both small text and large text, along with a live preview of the selected colors.

It is useful when reviewing website accessibility, tuning brand colors, or checking whether UI text is readable enough before release.

How to Use

1. Enter a text color and a background color.
2. The tool calculates the contrast ratio automatically.
3. Check the AA / AAA results for small text and large text.
4. Use the preview to see how the combination actually looks.

You can also swap the two colors with one click. This is handy when comparing light-on-dark and dark-on-light combinations.

What You Can Check

• Contrast ratio
• AA / AAA pass or fail status
• Separate results for small text and large text
• A visual preview of the selected combination

Because the ratio, criteria, and preview are shown together, it is easier to review both design and accessibility in one place.

WCAG 2.0 Criteria

AA

• small text: 4.5:1 or higher
• large text: 3:1 or higher

AAA

• small text: 7:1 or higher
• large text: 4.5:1 or higher

Large text means 18pt (about 24px) or larger, or 14pt bold (about 18.5px) or larger. The same color pair may pass for a heading but fail for body text, so it is worth checking against the intended use.

Input and Output Example

For example, if you use #121212 for the text color and #FAFAFA for the background color, the tool shows information like this:

Contrast: 18.09
AA small text: pass
AA large text: pass
AAA small text: pass
AAA large text: pass

This lets you confirm both the numeric ratio and the WCAG result for the same color pair.

Use Cases

• Checking whether body text or button labels are readable enough
• Reviewing color choices for dark mode and light mode
• Adjusting brand colors while keeping accessibility in mind
• Running a quick WCAG check before a design or UI review

Things to Keep in Mind

• The result is based on the text and background color pair only. It does not change font size or spacing automatically.
• Small text and large text use different thresholds, so the same pair can produce different outcomes depending on the context.
• Even a high contrast ratio can still feel hard to read when text is very thin or very small.