Question 1

What is a color contrast checker?

Accepted Answer

A color contrast checker compares foreground and background colors to estimate whether text and interface elements have enough visible contrast.

Question 2

What is contrast ratio?

Accepted Answer

Contrast ratio measures the luminance difference between two colors. It ranges from 1:1 for no contrast to 21:1 for maximum contrast.

Question 3

What contrast ratio passes WCAG AA?

Accepted Answer

WCAG AA uses 4.5:1 for normal text and 3:1 for large text. UI components and graphical objects commonly use 3:1 guidance.

Question 4

What contrast ratio passes WCAG AAA?

Accepted Answer

WCAG AAA uses 7:1 for normal text and 4.5:1 for large text.

Question 5

What is the maximum contrast ratio?

Accepted Answer

The maximum contrast ratio is 21:1, such as black text on a white background or white text on a black background.

Question 6

Does large text need the same contrast as normal text?

Accepted Answer

No. Large text has lower contrast thresholds because bigger letters are easier to read.

Question 7

Can I check button contrast?

Accepted Answer

Yes. Use the UI component mode for a 3:1 non-text contrast reference, and also check the button text against its button background.

Question 8

Does passing contrast mean my page is fully accessible?

Accepted Answer

No. Color contrast is one important part of accessibility, but full accessibility also depends on structure, keyboard support, labels, focus states, readability, and assistive technology support.

Question 9

Does this tool upload my colors?

Accepted Answer

No. Color parsing and contrast calculations run locally in your browser.

Question 10

Can I copy the contrast results?

Accepted Answer

Yes. You can copy a summary with the colors, contrast ratio, luminance values, and pass/fail results.

Color Contrast Checker

Color inputs

Contrast result

Example pairs

Contrast questions

More tools to try