Color Contrast Checker

Choose a text color and a background color, then press Check contrast. You get the contrast ratio, a pass or fail for each WCAG 2.1 level, a live preview, and the nearest text color that passes when yours does not.

Try a preset

About this color contrast checker

Text that is too close in brightness to its background is hard to read, especially for people with low vision or on a phone in sunlight. The Web Content Accessibility Guidelines (WCAG 2.1) measure this with a contrast ratio from 1:1, the same color twice, to 21:1, black on white. Level AA needs at least 4.5:1 for normal text and 3:1 for large text and interface parts such as icons and input borders; level AAA raises this to 7:1 and 4.5:1. This checker computes the ratio from the relative luminance of both colors, shows how real text looks, and when a level fails it finds the nearest text color, with the same hue, that passes.

How to check color contrast

  1. Enter both colors. Type hex codes or other color values, use the pickers, or press a preset. The ⇄ button swaps the text and background colors.
  2. Press Check contrast. Read the ratio and the pass or fail result for normal text, large text, and interface parts, and look at the preview.
  3. Fix a failing pair. Press Use this color next to a suggestion to switch the text color to the nearest one that passes and check again.

Frequently asked questions

What contrast ratio do I need?

For WCAG level AA, body text needs at least 4.5:1, and large text, icons, and form borders need at least 3:1. Level AAA asks for 7:1 for body text and 4.5:1 for large text.

What counts as large text?

WCAG treats text as large from 18 points (24 CSS pixels) at normal weight, or from 14 points (about 18.7 CSS pixels) when bold. Headings usually qualify; body text and captions usually do not.

How is the contrast ratio calculated?

Each color’s relative luminance is worked out from its linearized red, green, and blue values. The ratio is (lighter + 0.05) divided by (darker + 0.05), which gives values from 1 to 21.

Why does #777777 on white fail AA?

It reaches about 4.48:1, just under the 4.5:1 needed for normal text. The checker suggests #757575, a slightly darker gray that passes.

Does transparency affect the result?

The ratio is calculated from the solid colors, ignoring any alpha value. For a semi-transparent text color, check the color it blends to on your background instead.